Woocommerce template structure, hooks and actions

Author: Dawid Adach

-

Woocommerce template structure, hooks and actions.

In this lesson we will learn how to adjust default woocommerce templates. You have to know that WooCommerce uses predefined templates for a different part of our store. In order to let developer customize the design of the shop, they came with the 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:

Product

As you can see WooCommerce has automatically displayed product image, name, price, descriptions, review forms and more. It's certainly missing some styles but technically it's working and the customer would be able to make a purchase (you can add the product to cart and proceed to checkout).

1. WooCommerce template structure

  1. Navigate to wp-content/plugins/woocommerce/ where you will find templates/ folder
  2. Each file is responsible for 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 it step by step in this tutorial.

  3. In order to adjust product title open wp-content/plugins/woocommerce/templates/single-product/title.php:
  4. <?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>' );
    
    
          
  5. Change the <h1>...</h1>
  6. the_title( '<h1 class="product_title entry-title">', '</h1>' );
    
    
          
  7. to <h3>...</h3>
  8. the_title( '<h3 class="product_title entry-title">', '</h3>' );
    
          
  9. Refresh the product page.
  10. You will notice that heading on the product page has changed.

  11. Now revert the change and remember to never do it again!
But why!?

I wanted to show you how the mechanism work 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 plugin files will be gone after each update.

The one will ask - so how to to make them permanent?

2. Overwrite WooCommerce template (the right way)

In order to overwrite templates, we have to move them into our theme (or child theme).

  1. To adjust a title in a proper way copy previous file wp-content/plugins/woocommerce/templates/single-product/title.php
  2. Into our theme under woocommerce/ folder: wp-content/themes/mdbtheme/woocommerce/single-product/title.php (create missing folders)
  3. Now adjust the heading size again and refresh the product page.
  4. As you noticed the heading has changed. So you may ask how is it possible that our file affected 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 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 begining:

 * 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 entire templates folder if you don't want (and most probably you don't) to adjust all templates.

3. WooCommerce hooks and actions

You already know how templates works, so it's a high time to learn about hooks and actions used by WooCommerce.

  1. Copy template of content-single-product.php into your theme and open it:
  2. You will notice extended comments and calls to function: do_action()
  3.   <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>
        
  4. You can see woocommerce_single_product_summary hook and multiple templates that are @hooked to this hook location (i.e. woocommerce_template_single_title). Templates have assigned priority number. This number decide in which order templates will be loaded.
  5. I guess that you start understanding now how does it work. If you want to edit one of the templates you can adjust 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
        
  6. Except for editing templates, you can unhook (remove) them. Add following function to: functions.php:
  7. remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
        
  8. Refresh the page. Title is gone now. You can also change order, add another function:
  9. add_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 15);
        
  10. Now we moved title below the price tag (because we changed priority from 5 to 15, while price has 10)
  11. We can also hook template to a different hook
  12. add_action('woocommerce_after_single_product_summary', 'woocommerce_template_single_title', 5);
        
  13. Which will move or template to a different section.
  14. Remove all add_action() and remove_actions() from functions.php

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:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...