One of the best reasons to use WooCommerce is that it's a fully featured e-commerce platform and it's open source. That means you can customize every. single. line of code. If you don't like the way something works you can change it or you can hire a developer to change it for you. It's great knowing that as your business grows your software will grow with you.
There are two ways of changing the way WooCommerce works:
- Overriding templates
- Adding & removing hooks
Both of these methods are good at different things so I'll share when is an appropriate time to use each of them.
WooCommerce Templates
Templates are what WooCommerce uses to put the different parts of a page together. The product page for example is made out of many different templates. And these templates wrap the product data in useful HTML tags both for the reader and for search engines.
For example the price you see on the product page uses a template. And it looks something like this:
There's markup (HTML), classes for CSS, and HTML attributes for search engines & screen readers. If you want to change the HTML, add classes for CSS, or tweak the meta information for bots then you should modify the template.
To modify a template you copy the template from the WooCommerce plugin into a woocommerce folder in your own theme.
Ex. copy wp-content/plugins/woocommerce/templates/single-product/price.php and move it into wp-content/themes/my-theme/woocommerce/single-product/price.php.
You can also watch a video of this process.
WooCommerce Hooks
The other option you can use are hooks. Hooks are a part of WordPress itself and come in two flavors:
- Actions
- Filters
Actions are places in the code where a developer says:
“I'm at this milestone if you want to do anything now's your chance”.
And filters are where the developer says:
“I've just calculated this thing if you want to do anything to this value now's your chance”.
WooCommerce itself uses many of it's own actions to arrange the items on a page. If you take a look at woocommerce/templates/content-single-product.php you'll see an action called woocommerce_single_product_summary and above it in the comments you'll see where all the items in that page are already hooked in.
So how do you use this? How does this help? You can see what items are hooked in where and you can unhook them and rehook them. If you receive phone orders but only 1/100 orders come via the phone then you might not need the SKU field to be prevalent and you may want to move it somewhere where it's not in the way.
The standard WooCommerce single product page
With the above snippet the first line removes the meta information from the page. The second line re-adds the information to the bottom of the page.
That same product page as above but we moved the SKU from one hook to another hook.
If you wanted you could massage the data a bit more and fit it into that table on the Additional Information tab.
You could also add brand new data to the page that was never there by adding it to an existing action. Or you could remove data entirely if you don't need it.
Happy customizing your site!