Woocommerce - Using template part overrides in Sage

woocommerce-sage-template-part-overrides.md

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.

Prerequisites

• Check out the info on how template overriding works in Woocommerce before you begin.
• Also check out how to set up Sage Templates & Woocommerce
• Install Roots Wrapper Toolbar to preserve your sanity!

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.

	<?php
		/**
		 * 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
	?>

• Look up the function in WooCommerce Functions Reference and check out where the function is derived from, eg:

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
     }

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

Troubleshooting

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