Author: Dawid Adach
Woocommerce template structure, hooks and actions.
In this lesson we will learn how to adjust default woocommerce templates. You need to know that WooCommerce uses predefined templates for each different part of our store. In order to let the developer customize the design of the shop, they came with the an interesting mechanism, which will be explained below. Before we start coding let's have a look at our product page now.
Go to Products and click on View
next to any product:

As you can see WooCommerce has automatically displayed the product image, name, price, description, review forms and more. It's certainly missing some styles but technically it's working and a customer would be able to make a purchase (you can add the product to cart and proceed to checkout).
1. WooCommerce template structure
- Navigate to
wp-content/plugins/woocommerce/
where you will find thetemplates/
folder - In order to adjust the product title open
wp-content/plugins/woocommerce/templates/single-product/title.php
: - Change the heading
<h1>...</h1>
- to
<h3>...</h3>
- Refresh the product page.
- Now revert the change and remember to never do it again!
Each file is responsible for a different part of our store. Unfortunately, at this point, there is no map nor visualization which would show all the dependencies among files. Therefore, we will have to analyze it ourselves. I will explain how to do that step by step in this tutorial.
<?php
/**
* Single Product title
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/title.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
the_title( '<h1 class="product_title entry-title">', '</h1>' );
the_title( '<h1 class="product_title entry-title">', '</h1>' );
the_title( '<h3 class="product_title entry-title">', '</h3>' );
You will notice that the heading on the product page has changed.
But why!?
I wanted to show you how the mechanism works but you should never directly change plugin (nor WordPress core) files. Both WordPress as well as plugins are very often updated. Whenever you are running updates, new files are overwriting the old one and as a result, all changes done by you directly in the plugin files will be gone after each update.
The question one will ask is - how does one to make them permanent?
2. Overwriting the WooCommerce template (the right way)
In order to overwrite templates, we have to move them into our theme (or child theme).
- To adjust a title in the proper way, copy the previous file
wp-content/plugins/woocommerce/templates/single-product/title.php
- Into our theme under the
woocommerce/
folder:wp-content/themes/mdbtheme/woocommerce/single-product/title.php
(create missing folders) - Now adjust the heading size again and refresh the product page.
As you noticed, the heading has changed. So you may ask how is it possible that our file affected a plugin although it's in a different location? This is actually a mechanism which we will use in this lesson. WooCommerce allows us to overwrite any of the default templates. You can take any file from wp-content/plugins/woocommerce/templates/
and place it under yourthemelocation/woocommerce/
. WordPress will automatically pick it and us instead of the default one.
Warning
Keep in mind to preserve the correct folder structure. If the file which you want to overwrite is located under
/templates/emails/plain/admin-cancelled-order.php
you have to recreate the same folder in your theme:/woocommerce/emails/plain/admin-cancelled-order.php
. To make it easier, each template file has location mentioned in a comment at the beginning:* This template can be overridden by copying it to yourtheme/woocommerce/single-product/title.php.
Another thing to remember is that you should copy only templates which you want to overwrite. Don't copy over the entire templates folder if you don't (and most probably you don't) want to adjust all templates.
3. WooCommerce hooks and actions
You already know how templates works, so it's a high time to learn about the hooks and actions used by WooCommerce.
- Copy the template of
content-single-product.php
into your theme and open it: - You will notice extended comments and calls to the function:
do_action()
- You can see the
woocommerce_single_product_summary
hook and multiple templates that are@hooked
to this hook location (i.e.woocommerce_template_single_title
). Templates have an assigned priority number. This number decide in which order templates will be loaded. - Except for editing templates, you can unhook (remove) them. Add the following function to:
functions.php
: - Refresh the page. The Title is gone now. You can also change their order, add another function:
- Now we moved title below the price tag (because we changed priority from 5 to 15, while price has priority 10)
- We can also hook a template to a different hook
- Which will move the template to a different section.
- Now, remove all
add_action()
andremove_actions()
fromfunctions.php
<div class="summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @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
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
I guess that you may start understanding now how does it work. If you want to edit one of the templates
you can adjust the corresponding files:
THE HOOK NAME: woocommerce_single_product_summary hook.
THE TEMPLATES HOOKED (+priority order number) => corresponding template file name:
— woocommerce_template_single_title (5) => single-product/title.php
— woocommerce_template_single_rating (10) => single-product/rating.php
— woocommerce_template_single_price (10) => single-product/price.php
— woocommerce_template_single_excerpt (20) => single-product/short-description.php
— woocommerce_template_single_add_to_cart(30) => single-product/add-to-cart/ (6 files depending on product type)
— woocommerce_template_single_meta (40) => single-product/review-meta.php
— woocommerce_template_single_sharing - (50) => single-product/share.php
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 15);
add_action('woocommerce_after_single_product_summary', 'woocommerce_template_single_title', 5);
Now when you know how to adjust our theme using templates and hooks let's adjust our product page.
Previous lesson Download Live preview Next lesson
Spread the word:
