WooCommerce Theme Overriding
Introduction
- For every task there are many good and bad ways to do that
- WooCommerce theming also fall under this prey like directly editing the WooCommerce template files
- In one fine day WooCommerce may release a new version, you unintentionally update the WooCommerce plugin which results in replace of your beautiful custom shop page into default template
- So to avoid this we have to override our WooCommerce template in our theme directory
- Let’s we see it in detail
Detect Template to Override
- To detect which template your current page renders you can place this snippet in your activated theme’s
functions.php
file - Let’s we see the explanation for this snippet
- On line 2 of the snippet we using WordPress provided API helper function
add_action
which hook our function (we pass it as second parameter) in specific point or event in the context of first parameter (the action’s name wp_head
technically it is called as tag
) add_action
accepts totally 4 parameters in that 2 are mandatory- The first parameter (mandatory) is tag which is the name of that action hook like
wp_head
, muplugins_loaded
, shutdown
- The second parameter (mandatory) is the function to be called at the time hook action triggers
- The third parameter (optional) execution priority
- The fourth parameter (optional) is accepts number which denotes number of arguments the hooked function accepts
- In our anonymous function we echoed global variable
$template
which output the full path of the rendering template file
Override Product Listing Page
- Assume that you declared the template path identifying snippet in your theme’s
functions.php
file - Go to any page in your WordPress you will find at the top of your page the rendering template’s file path
- Now go to your shop page where you will find the template path as in the given image

- Now we will override this without disturbing the original file
- In order to do that first create a directory with the name
woocommerce
in your active theme directory for example wp-content/themes/twenty-twenty-child/
- Copy the template file
archive-product.php
from WooCommerce plugin for path reference see the image in 3rd point and paste it in your newly created directory woocommerce
i.e. inside your theme - Hurray! You succeeded you learned overriding the WooCommerce template
Edit Customised Shop Page
- To check whether we correctly implemented we will change few things in copied file
archive-product.php
in our theme directory not in the WooCommerce plugin’s template directory - Open the file and replace the header section with the following snippet
- If you has an eagle eye you clearly note that the change is one line
- In line 3 changed the
h1
text case to upper - By default WooCommerce function
woocommerce_page_title
echoed the title instead of that we passed boolean false
as first parameter to that function to return the title as a string woocommerce_page_title
function’s return is passed as an argument to the php string function strtoupper
- Now if you refresh your shop page you will find that the title is uppercase
- We only covered tip of the iceberg of WooCommerce to customise archive page
Conclusion
- You learned why must avoid overriding the WooCommerce plugin’s template directly
- You understand the basics of action hooks and some action hook tags
- You can able to detect the current page’s template
- You can able to modify the WooCommerce template file without disturbing the plugin’s template directory