Skip to content

Instantly share code, notes, and snippets.

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

Prerequisites

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
	?>
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!)

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

This comment has been minimized.

Copy link

@reidelliott reidelliott commented Dec 13, 2017

Do you know how/if this applies to Sage 9 Beta 4?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment