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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> | |
| <p class="price"><?php echo $product->get_price_html(); ?></p> | |
| <meta itemprop="price" content="<?php echo esc_attr( $product->get_price() ); ?>" /> | |
| <meta itemprop="priceCurrency" content="<?php echo esc_attr( get_woocommerce_currency() ); ?>" /> | |
| <link itemprop="availability" href="http://schema.org/<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" /> | |
| </div> |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="summary entry-summary"> | |
| <?php | |
| /** | |
| * woocommerce_single_product_summary hook. | |
| * | |
| * @hooked woocommerce_template_single_title – 5 | |
| * @hooked woocommerce_template_single_rating – 10 | |
| * @hooked woocommerce_template_single_price – 10 | |
| * @hooked woocommerce_template_single_excerpt – 20 | |
| * @hooked woocommerce_template_single_add_to_cart – 30 | |
| * @hooked woocommerce_template_single_meta – 40 | |
| * @hooked woocommerce_template_single_sharing – 50 | |
| */ | |
| do_action( 'woocommerce_single_product_summary' ); | |
| ?> | |
| </div><!– .summary –> |
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // removes the meta information | |
| remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 ); | |
| // adds the meta information after all other product data | |
| add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_single_meta', 30 ); |
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!
Old post but super helpful for moving the product meta below the product description. Still works in 2019. Thank you!
I was super confused, and now i understand when to use template.
But i have one question how to manage those hooks because the file got so messy when writing multiple hooks. How to manage the code i mean to understand it in first look?
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.