Skip to content

Instantly share code, notes, and snippets.

@xavierartot

xavierartot/woocommerce-sage-template-part-overrides.md

Forked from drawcard/woocommerce-sage-template-part-overrides.md
Created June 12, 2017 14:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save xavierartot/dc2f47bff8b27f5a48f2bcf1ff5fc0f0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save xavierartot/dc2f47bff8b27f5a48f2bcf1ff5fc0f0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -63,4 +63,4 @@ 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, 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.)
    * 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](https://codex.wordpress.org/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.)
  2. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -63,4 +63,4 @@ 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, 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. In the repo, click on the Branch / Tag dropdown and select Tags > 2.3.8 (or whatever version you're using). Then click "Raw" and copy the code.
    * If you are getting a blank page after copying and pasting code, 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.)
  3. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,10 +11,10 @@ Now you're familiar with how to do Sage + Woocommerce templates, it's time to ma

    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.

    1. Create a Sage template for the entire page to be modified, using these [instructions](https://roots.io/using-woocommerce-with-sage/). 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](https://github.com/roots/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).```)
    * Create a Sage template for the entire page to be modified, using these [instructions](https://roots.io/using-woocommerce-with-sage/). 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](https://github.com/roots/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
    2. 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.
    * 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
    <?php
    @@ -27,7 +27,7 @@ Let's say you want to override a part of a theme in the single product view, lik
    do_action( 'woocommerce_before_single_product_summary' ); // <---- the hook name
    ?>
    ```
    3. Look up the function in [WooCommerce Functions Reference](http://docs.woothemes.com/wc-apidocs/package-WooCommerce.Functions.html) and check out where the function is derived from, eg:
    * Look up the function in [WooCommerce Functions Reference](http://docs.woothemes.com/wc-apidocs/package-WooCommerce.Functions.html) and check out where the function is derived from, eg:
    ```
    Function woocommerce_show_product_images
    @@ -37,7 +37,7 @@ Package: WooCommerce\Functions\Product
    Author: WooThemes
    Located at includes/wc-template-functions.php
    ```
    4. Click on that file reference, eg ```includes/wc-template-functions.php``` to find out what template part the function uses:
    * Click on that file reference, eg ```includes/wc-template-functions.php``` to find out what template part the function uses:
    ```php
    /**
    * Output the product image before the single product summary.
  4. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -51,7 +51,7 @@ Located at includes/wc-template-functions.php
    wc_get_template( 'single-product/product-image.php' ); //<---- the template part
    }
    ```
    5. Now we know what template part to override, we simple create that part of the template in Sage, copy and paste the code from the original [WooCommerce template part](https://github.com/woothemes/woocommerce/tree/master/templates) into our new file, and make whatever changes we want to. Use this example as a reference:
    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](https://github.com/woothemes/woocommerce/tree/master/templates) into our new file, and make whatever changes we want to. Use this example as a reference:

    ```php
    wc_get_template( 'single-product/product-image.php' );
  5. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -57,10 +57,10 @@ Located at includes/wc-template-functions.php
    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**
    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!)
    /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, 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. In the repo, click on the Branch / Tag dropdown and select Tags > 2.3.8 (or whatever version you're using). Then click "Raw" and copy the code.
  6. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -59,8 +59,8 @@ 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**

    You need to make your template part override here:
    **/your-theme-root-folder/woocommerce/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, 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. In the repo, click on the Branch / Tag dropdown and select Tags > 2.3.8 (or whatever version you're using). Then click "Raw" and copy the code.
  7. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    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.
    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](http://docs.woothemes.com/document/template-structure/) before you begin.
  8. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,9 @@
    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.

    ### Prerequisites
    * Check out the info on how [template overriding works in Woocommerce](http://docs.woothemes.com/document/template-structure/) before you begin.
    * Also check out how to set up [Sage Templates & Woocommerce](https://roots.io/using-woocommerce-with-sage/)
    * Install [Roots Wrapper Toolbar](https://github.com/roots/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.

    @@ -58,4 +60,7 @@ 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**

    You need to make your template part override here:
    **/your-theme-root-folder/woocommerce/single-product/product-image.php**
    **/your-theme-root-folder/woocommerce/single-product/product-image.php**

    ### Troubleshooting
    * If you are getting a blank page after copying and pasting code, 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. In the repo, click on the Branch / Tag dropdown and select Tags > 2.3.8 (or whatever version you're using). Then click "Raw" and copy the code.
  9. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -57,5 +57,5 @@ 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**

    Sage needs them to be located like so:
    You need to make your template part override here:
    **/your-theme-root-folder/woocommerce/single-product/product-image.php**
  10. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,13 +5,13 @@ So, you know how to override a template file in Woocommerce using Sage, but you'

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

    ### Make the template page override
    ### 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.

    1. Create a Sage template for the entire page to be modified, using these [instructions](https://roots.io/using-woocommerce-with-sage/). 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](https://github.com/roots/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).```)

    ### Make the template part
    ### The template part
    2. 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
  11. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,9 +5,13 @@ So, you know how to override a template file in Woocommerce using Sage, but you'

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

    ### Make 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.

    1. Create a Sage template for the entire page to be modified, using these [instructions](https://roots.io/using-woocommerce-with-sage/). 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](https://github.com/roots/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).```)

    ### Make the template part
    2. 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
  12. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    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](http://docs.woothemes.com/document/template-structure/) before you begin.
    2. Also check out how to set up [Sage Templates & Woocommerce](https://roots.io/using-woocommerce-with-sage/)
    * Check out the info on how [template overriding works in Woocommerce](http://docs.woothemes.com/document/template-structure/) before you begin.
    * Also check out how to set up [Sage Templates & Woocommerce](https://roots.io/using-woocommerce-with-sage/)

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

  13. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -51,7 +51,7 @@ Located at includes/wc-template-functions.php
    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```
    WooCommerce is expecting your overrides to be in: **/your-theme-root-folder/woocommerce/templates/single-product/product-image.php**

    Sage needs them to be located like so:
    ```/your-theme-root-folder/woocommerce/single-product/product-image.php```
    **/your-theme-root-folder/woocommerce/single-product/product-image.php**
  14. @drawcard drawcard revised this gist Jul 23, 2015. No changes.
  15. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 1 addition and 5 deletions.
    6 changes: 1 addition & 5 deletions woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -54,8 +54,4 @@ 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```

    Sage needs them to be located like so:
    ```/your-theme-root-folder/woocommerce/single-product/product-image.php```




    ```/your-theme-root-folder/woocommerce/single-product/product-image.php```
  16. @drawcard drawcard revised this gist Jul 23, 2015. 2 changed files with 61 additions and 25 deletions.
    25 changes: 0 additions & 25 deletions woocommerce-sage-template-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,25 +0,0 @@
    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](http://docs.woothemes.com/document/template-structure/) before you begin.
    2. Also check out how to set up [Sage Templates & Woocommerce](https://roots.io/using-woocommerce-with-sage/)

    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](https://roots.io/using-woocommerce-with-sage/). 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](https://github.com/roots/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
    <?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' );
    ?>
    ```
    3. Look up the hook in [WooCommerce Hook Reference](http://docs.woothemes.com/wc-apidocs/hook-docs.html) and check out the php file the hook is derived from, eg


    61 changes: 61 additions & 0 deletions woocommerce-sage-template-part-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    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](http://docs.woothemes.com/document/template-structure/) before you begin.
    2. Also check out how to set up [Sage Templates & Woocommerce](https://roots.io/using-woocommerce-with-sage/)

    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, like adding some classes to the DIVs that surround the product image.

    1. Create a Sage template for the entire page to be modified, using these [instructions](https://roots.io/using-woocommerce-with-sage/). 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](https://github.com/roots/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).```)
    2. 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
    <?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
    ?>
    ```
    3. Look up the function in [WooCommerce Functions Reference](http://docs.woothemes.com/wc-apidocs/package-WooCommerce.Functions.html) 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
    ```
    4. Click on that file reference, eg ```includes/wc-template-functions.php``` to find out what template part the function uses:
    ```php
    /**
    * 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 simple create that part of the template in Sage, copy and paste the code from the original [WooCommerce template part](https://github.com/woothemes/woocommerce/tree/master/templates) into our new file, and make whatever changes we want to. Use this example as a reference:

    ```php
    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```

    Sage needs them to be located like so:
    ```/your-theme-root-folder/woocommerce/single-product/product-image.php```




  17. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions woocommerce-sage-template-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@ 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](https://roots.io/using-woocommerce-with-sage/). 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](https://github.com/roots/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
    ```php
    <?php
    /**
    * woocommerce_before_single_product_summary hook
    @@ -19,7 +19,7 @@ Let's say you want to override a part of a theme in the single product view.
    */
    do_action( 'woocommerce_before_single_product_summary' );
    ?>
    `
    ```
    3. Look up the hook in [WooCommerce Hook Reference](http://docs.woothemes.com/wc-apidocs/hook-docs.html) and check out the php file the hook is derived from, eg


  18. @drawcard drawcard revised this gist Jul 23, 2015. 1 changed file with 25 additions and 1 deletion.
    26 changes: 25 additions & 1 deletion woocommerce-sage-template-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,25 @@
    1) Check out the info on how [template overriding works in Woocommerce](http://docs.woothemes.com/document/template-structure/) before you begin.
    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](http://docs.woothemes.com/document/template-structure/) before you begin.
    2. Also check out how to set up [Sage Templates & Woocommerce](https://roots.io/using-woocommerce-with-sage/)

    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](https://roots.io/using-woocommerce-with-sage/). 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](https://github.com/roots/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
    <?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' );
    ?>
    `
    3. Look up the hook in [WooCommerce Hook Reference](http://docs.woothemes.com/wc-apidocs/hook-docs.html) and check out the php file the hook is derived from, eg


  19. @drawcard drawcard created this gist Jul 23, 2015.
    1 change: 1 addition & 0 deletions woocommerce-sage-template-overrides.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    1) Check out the info on how [template overriding works in Woocommerce](http://docs.woothemes.com/document/template-structure/) before you begin.