Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save xavierartot/dc2f47bff8b27f5a48f2bcf1ff5fc0f0 to your computer and use it in GitHub Desktop.

Select an option

Save xavierartot/dc2f47bff8b27f5a48f2bcf1ff5fc0f0 to your computer and use it in GitHub Desktop.
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 of the theme.

  1. Check out the info on how template overriding works in Woocommerce before you begin.
  2. Also check out how to set up Sage Templates & Woocommerce

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

Let's say you want to override a part of a theme in the single product view.

  1. Create the Sage template part using these instructions. In this example we've made 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.
  2. Select a hook that you want to be customised, eg change the HTML code within the template part that the hook presents.
	<?php
		/**
		 * woocommerce_before_single_product_summary hook
		 *
		 * @hooked woocommerce_show_product_sale_flash - 10
		 * @hooked woocommerce_show_product_images - 20
		 */
		do_action( 'woocommerce_before_single_product_summary' );
	?>
  1. Look up the hook in WooCommerce Hook Reference and check out the php file the hook is derived from, eg
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment