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.
- Check out the info on how template overriding works in Woocommerce before you begin.
- 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.
- Create the Sage template part using these instructions. In this example we've made
single-product.phpand copied the contents of/plugins/woocommerce/templates/content-single-product.phpinto it. Then we've used the Roots Wrapper Toolbar to verify that the single-product template is being used by Wordpress correctly. - 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' );
?>- Look up the hook in WooCommerce Hook Reference and check out the php file the hook is derived from, eg