Atomic Smash homepage splash

How to customise WooCommerce templates with hooks

Words by Adam WardMay 29, 2018

image for woocommerce hooks

In this post, I will run through some of the different methods you can use to customise WooCommerce templates. I will also show examples of how you can create your own custom PHP functions to work with WooCommerce’s ‘hooks’.

WooCommerce comes packed with a load of templates, these include; a shop archive, product single, checkout, cart and my account area pages. These default templates look pretty good but it’s inevitable that you, your designer or your clients will want to change some of the layouts or add some extra functionality. If you are new to WooCommerce, you’ll notice that customising these templates isn’t as straightforward as updating the regular WordPress template files – let’s run through the different methods…

Use CSS

You will almost always need to add or override the default CSS when working on a WooCommerce project to get the templates to fit your or your clients brand. Sometimes this approach might be all you require to customise WooCommerce templates but when it comes to adding in text or changing the functionality you will need another approach.

Customising the WooCommece Checkout?

'Checkout' George's post!

Read more

Duplicate the template files

Woocommerce will look for any of the template files within your theme first and prioritise them over the version in the plugin.Create a directory named ‘woocommerce’ in the root of your theme and mirror the directory structure that WooCommerce uses within it’s ‘templates’ directory wp-content/plugins/woocommerce/templates

If you wanted to overwrite the product archive, which is located here –
wp-content/plugins/woocommerce/templates/archive-product.php
Copy the same file to your theme like so…
wp-content/themes/your-theme/woocommerce/archive-product.php

This approach can be good if you just need to add some text at a certain point. It’s important to only ever copy the files you intend to actually change. The reason for this is because these templates are core plugin files and could be overwritten in future WooCommerce updates.

Use Hooks

You might already be familiar with using hooks in WordPress. There are two types of hooks – Actions and Filters, which are specific functions created by WordPress or the plugin developer to allow you to either add custom content/functionality or customise what’s already there.

The best way to explain how hooks work in practice is to show you some examples of real-world situations where they would be useful –

Customise WooCommerce – Example One

Hook (Action): woocommerce_before_single_product

With this hook, we will add a message above the main image on the single-product.php template. This is how the page looks before we add the message –

customise woocommerce single product page

To use this hook, we can put the following code in our functions.php file.

// Add our custom function
function my_function_before_single_product() {
	echo '<h2>Everything is 50% off today!</h2>';
}

// Add the action
add_action( 'woocommerce_before_single_product', 'my_function_before_single_product', 11 );
Customise woocommerce single product template

Customise WooCommerce – Example Two

Hook (Action): woocommerce_archive_description

With this hook, we will add a shop description underneath the ‘Shop’ title. This is the template before –

customise woocommerce shop product archive
// Add our custom function
function my_function_custom_archive_description() {
	$new_description = '<p>Welcome to my shop, please be generous and buy many things, thank you.</p>';
	return $new_description;
}

// Add the action
add_action('woocommerce_archive_description', 'my_function_custom_archive_description');
woocommerce shop after

Customise WooCommerce – Example Three

Hook (Filter): woocommerce_sale_flash

In this last example, we will use a ‘filter’ hook to change the text and look of the on-sale badge.

image of sale badge on woocommerce shop page
// Add our custom function
function change_on_sale_badge() {
	$sale_badge = '<span style="background:crimson;color:white;padding:5px;">Reduced!</span>';
	return $sale_badge;
}

// Add the filter
add_filter('woocommerce_sale_flash', 'change_on_sale_badge');

Image of changing the woocommerce sale badge

Summing up

You will notice in each example, we define our custom function followed by the add_action() or add_filter() functions. This tells WordPress that we want to add an ‘action’ or ‘filter’ function at a particular point.

If you’re new to using hooks in WooCommerce then I hope this post has been helpful. Please check out our other posts on how to customise WooCommerce and also the resources below to help you start experimenting with hooks.

Read Next

Customising the WooCommerce 'My Account' section

Read more

Useful Resources

Woocommerce introduction to hooks – https://docs.woocommerce.com/document/introduction-to-hooks-actions-and-filters/

The official hook reference is a great guide for you to get started and experimenting with actions and filters – https://docs.woocommerce.com/wc-apidocs/hook-docs.html

Another good resource is this great article, with visual hook guides by Rodolfo Melogli, ‘Business Bloomer’ – https://businessbloomer.com/category/woocommerce-tips/visual-hook-series/

Profile picture of Adam Ward

Adam WardDeveloper

Adam is an expert in WordPress development and CRM integrations. His ability to craft WordPress to a users needs makes our websites easier to use.

Go back to top

Keep up to date with Atomic news