WooCommerce: When to Use Hooks and When to Use Templates

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:

  1. Overriding templates
  2. 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:

<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'; ?>" />

view raw
hosted with ❤ by GitHub

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:

  1. Actions
  2. 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.

<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.

WooCommerce Single Product Page

The standard WooCommerce single product page

// 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 );

view raw
hosted with ❤ by GitHub

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.

WooCommerce Single Product Page With a Moved SKU

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!

2 thoughts on “WooCommerce: When to Use Hooks and When to Use Templates

  1. Old post but super helpful for moving the product meta below the product description. Still works in 2019. Thank you!

  2. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.