Woocommerce template structure, hooks and actions

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

1. Navigate to wp-content/plugins/woocommerce/ where you will find the templates/ folder

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.

2. In order to adjust the product title open wp-content/plugins/woocommerce/templates/single-product/title.php:
• PHP

<?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>' );


      

3. Change the heading <h1>...</h1>
• HTML

the_title( '<h1 class="product_title entry-title">', '</h1>' );


      

4. to <h3>...</h3>
• HTML

the_title( '<h3 class="product_title entry-title">', '</h3>' );

      

5. Refresh the product page.

You will notice that the heading on the product page has changed.

6. Now revert the change and remember to never do it again!

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

1. To adjust a title in the proper way, copy the previous file wp-content/plugins/woocommerce/templates/single-product/title.php
2. Into our theme under the 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.

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:

• php

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

1. Copy the template of content-single-product.php into your theme and open it:
2. You will notice extended comments and calls to the function: do_action()
• 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>
    

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

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:

• HTML

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
    

4. Except for editing templates, you can unhook (remove) them. Add the following function to: functions.php:
• PHP

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
    

5. Refresh the page. The Title is gone now. You can also change their order, add another function:
• PHP

add_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 15);
    

6. Now we moved title below the price tag (because we changed priority from 5 to 15, while price has priority 10)
7. We can also hook a template to a different hook
• PHP

add_action('woocommerce_after_single_product_summary', 'woocommerce_template_single_title', 5);
    

8. Which will move the template to a different section.
9. Now, 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.