Sage 9 override WooCommerce template

WooCommerce is the most popular WordPress eCommerce plugin. WooCommerce provides tons of extensions and themes to make you easier to customize your eCommerce store.

Integrating WooCommerce with your theme is an important task, and an important part of this integrating process is overriding WooCommerce template inside your theme. 

Today, I will show you how to override WooCommerce template with Sage 9.

How to override WooCommerce template with Sage 9

1. Standard way to override WooCommerce template

Most of the theme will override WooCommerce template with a standard way which is provided by WooCommerce itself. Overriding by create a woocommercefolder inside your theme root folder, then copy the template you want to override into this folder. For more information about how to override WooCommerce template with standard way, please take a look at https://docs.woocommerce.com/document/template-structure/

2. Problem with Sage 9

Overriding WooCommerce template with Sage 9 is a different problem, because Sage 9 has different theme structure with other themes. Sage 9 will let WordPress initially detects theme in resourcesfolder, you can check it in resources/functions.php:65

With this workflow, the standard way to override WooCommerce template will not be applied in Sage 9. If you want to override WooCommerce template in Sage 9, you will need to create woocommercefolder inside resourcesfolder, then copy the template you want to override into this folder.

Because all the WordPress template files are placed inside resouces/views folder follow Sage 9 workflow, so in my opinion, it will be inconsistent if you override WooCommerce template inside resources/woocommerce folder.

After spending few hours to research a best practices to override WooCommerce template with Sage 9 on https://discourse.roots.io/. I noticed that Sage 9 still not have a standard way to do it, so I tried to figure it out by myself.

3. How to resolve

To make WooCommerce template files consistent with Sage 9 theme, I will move all the WooCommerce override template files inside resources/views/woocommerce folder. But how can I do it?

WooCommerce has a filter hook named woocommerce_template_path to let us modify the default override template path. Remember that Sage 9 will let WordPress initially detects theme in resources folder, so I will need to change the default path from woocommerce to views/woocommerce.

Place this code inside your app/filters.php or app/setup.php file:

Then create woocommerce folder inside resources/views folder then start overriding every WooCommerce template you want!

 

You may also like...

2 Responses

  1. Steve says:

    Just what I was looking for, thanks for this 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: