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.
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:
|<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'; ?>" />|
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.
wp-content/plugins/woocommerce/templates/single-product/price.php and move it into
You can also watch a video of this process.
The other option you can use are hooks. Hooks are a part of WordPress itself and come in two flavors:
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.
|<div class="summary entry-summary">|
|* 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.
|// 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.
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!