Over the last several weeks I’ve gotten a lot of questions about customizing or working with WooCommerce, the free eCommerce plugin by WooThemes that lets you sell just about anything online. Part of the challenge is that people who’ve worked with WooThemes before are used to a lot of options in the settings pages, so they’re looking for ways to tweak the display of their product pages or the grid of products and when they go looking in the settings of the plugin, they don’t see what they expect. But don’t fear, you can make these changes easily. I’ve already written about a larger adjustment I made. This time I’ll review some really quick and simple ones.
What I’m not telling you to do
By showing you this code, there are some of you that plan to head to your Admin pages and look in Appearance > Editor and start editing your functions.php file. That’s called cowboy coding and I’m not suggesting that in any way. I’m just saying these changes are really super easy – so easy that you could be done with them in less than 5 minutes. In fact, they’re what we’d call “Tweaks” and I just heard about a site that will do tweaks for your site for $25/tweak. So consider that as you read the following tweaks – because they’re free right here at chrislema.com. Use the money you save to buy yourself a beer! So do me a favor, go buy ServerPress, install it locally, and learn to make and test these changes locally, and then (only after) you’ve done that, you can push your changed functions.php file up to the server.
Hooks, Filters & Functions.php
The first thing you need to know is that WooCommerce was built, as a plugin, with a set of hooks and filters. If you’ve never learned about them, I’d point you to this presentation on it from San Diego’s most recent WordCamp. Right off the bat, you’ll learn that filters help you ‘change stuff’, as Jeffrey points out. The code I’m going to show you below is easy to use because it’s tying into plugin filters that already exist – which means you just have to drop this code into your functions.php page and you’re off to the races.
Changing the Add to Cart text
To change the add to cart text, we’re going to use the ‘single_add_to_cart_text’ filter, and connect our own function to change the text. So we add the filter, connect it to our own function, and in our function, return whatever text we want (replace ‘my button text’).
Changing the number of products displayed per row
Here, we’ll use the loop_shop_columns filter and return our own value (in this case ‘3’) in our own function.
Changing the total count of items displayed per page
Maybe you only want to show 15 items on your page, in five rows. Use the code above and then add this. In this case, it’s a single line.
It truly a simple thing, once you see how it’s done. What kinds of tweaks are you doing?