Skip to content

Instantly share code, notes, and snippets.

  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Woocommerce - Using template part overrides in Sage

So, you know how to override a template file in Woocommerce using Sage, but you're having trouble changing something within the deeper level of that template file. For example, you want to change the output HTML structure of a given part of the product page loop, or incorporate a Bootstrap class into a button element without using Jquery to inject it. Here's how you can override deeper level parts, the default WC theme elements.


Now you're familiar with how to do Sage + Woocommerce templates, it's time to make it happen.

The template page override

Let's say you want to override a part of a theme in the single product view, like adding some classes to the DIVs that surround the product image.

  • Create a Sage template for the entire page to be modified, using these instructions. In this example we've made /your-theme-root-folder/single-product.php and copied the contents of /plugins/woocommerce/templates/content-single-product.php into it. Then we've used the Roots Wrapper Toolbar to verify that the single-product template is being used by Wordpress correctly (It should report: Main: single-product.php Base: base.php (by default).)

The template part

  • Select a function within the that new file which you'd like to be customised, eg change the HTML code within the template part that the hook presents. For instance, here we want to modify the way images are presented, so we need to examine the woocommerce_show_product_images function within the woocommerce_before_single_product_summary hook.
		 * woocommerce_before_single_product_summary hook
		 * @hooked woocommerce_show_product_sale_flash - 10
		 * @hooked woocommerce_show_product_images - 20 // <---- the function we want
		do_action( 'woocommerce_before_single_product_summary' ); // <---- the hook name
Function woocommerce_show_product_images

Output the product image before the single product summary.

Package: WooCommerce\Functions\Product
Author: WooThemes
Located at includes/wc-template-functions.php
  • Click on that file reference, eg includes/wc-template-functions.php to find out what template part the function uses:
      * Output the product image before the single product summary.
      * @access public
      * @subpackage  Product
      * @return void
     function woocommerce_show_product_images() {
         wc_get_template( 'single-product/product-image.php' ); //<---- the template part
  1. Now we know what template part to override, we simply create that part of the template in Sage, copy and paste the code from the original WooCommerce template part into our new file, and make whatever changes we want to. Use this example as a reference:
wc_get_template( 'single-product/product-image.php' );

WooCommerce is expecting your overrides to be in: /your-theme-root-folder/woocommerce/templates/single-product/product-image.php

For Sage, you need to make your template part override here: /your-theme-root-folder/woocommerce/single-product/product-image.php (no /templates/ folder required!)


  • If you are getting a blank page after copying and pasting code, then there is an error somewhere in your PHP code. Switch on WP_DEBUG to investigate and check to see if you are using the template part for the specific version of WooCommerce you're using. Eg if you are on version 2.3.8 of WooCommerce, you need to be getting your template code from the 2.3.8 tree of the Github repo (or "master" if you're just using the latest stable release version.)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment