[Tip] WooCommerce partial template overrides + Sage

drawcardau · July 23, 2015, 1:59am

Hi everyone, I wanted to share this workflow I discovered in the hope it might help someone else out there who is struggling with WooCommerce theme overrides + Sage.

There’s already good documentation about overriding a page template with Sage, but I was having a hard time overriding template parts or components, eg a little snippet of HTML that creates product thumbnails on a given product page, for instance, so I could include Bootstrap classes or change a UL > LI structure to nested DIVs instead.

Through trial and error I eventually discovered the correct naming & file structure of these template parts through following the trail of hooks & functions that present these template parts, and I wanted to share the process here for those who may be scratching their head over it

gist.github.com

https://gist.github.com/drawcard/c94432eed39ed6cd9cf4

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](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.

### The template page override

This file has been truncated. show original

If this info is useful to add to Sage documention, please be my guest and add it!