Add Woocommerce Support in Sage 9
Tags: wordpress, woocommerce, php
Published: 2020-09-26 07:01:59

---
title: Add Woocommerce Support in Sage 9
published: true
date: 2020-09-23 14:00:00 UTC
tags: wordpress, woocommerce, php
canonical_url: https://nimblewebdeveloper.com/blog/sage-9-woocommerce-support
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/t2f3ef7o3ns0bng2wdep.png
---

[Sage 9 from Roots](https://roots.io/sage/) is an awesome way to build modern, fast Wordpress themes with a great developer experience. Unfortunately, early in the Sage 9 development life supporting Woocommerce & Woocommerce template overrides was a little tricky. This has lead to a bit of old and redundant information floating around.

Fortunately for us, adding support for Woocommerce to Sage 9 is really easy, using a package from Roots themselves and a couple of simple steps.

## Add sage-woocommerce from Roots

First up, we need to add a package from Roots that enables Woocommerce template files in the Blade templating engine.

This is as simple as one `composer require...` line.

The repo for the package is located at [https://github.com/roots/sage-woocommerce](https://github.com/roots/sage-woocommerce), and please check out the install instructions there if anything is unclear. Plus, we'll need some code from the repo in the next step.

**First, change directory into your theme folder;**

(Replace the path with your correct path)

```sh  
cd .../my\_wordpress\_site/wp-content/themes/mytheme  
  
```

**Then require the package**

```sh  
composer require roots/sage-woocommerce  
  
```

That's the big part of the job done!

If you're interested in how this actually works under the hood to make Woocommerce & Sage 9 work together, check out `src/woocommerce.php` in the repo.

## Add the necessary template files

Due to some quirks in the way that blade templates work in Sage 9, it's necessary to override two Woocommerce template files to get everything to work.

Fortunately, the kind Roots people have provided the necessary files. Find them in the repo above at ([github:roots/sage-woocommerce](https://github.com/roots/sage-woocommerce)) under [`examples/resources/views/woocommerce`](https://github.com/roots/sage-woocommerce/tree/master/examples/resources/views/woocommerce).

The two files we need are

- [single-product.blade.php](https://raw.githubusercontent.com/roots/sage-woocommerce/master/examples/resources/views/woocommerce/single-product.blade.php) &
- [archive-product.blade.php](https://raw.githubusercontent.com/roots/sage-woocommerce/master/examples/resources/views/woocommerce/archive-product.blade.php)

**Create the woocommerce folder in your theme**

First, create the folder in which we will place Woocommerce template overrides, within your theme.

`mytheme/resources/views/woocommerce`

<img src="https://cdn.sanity.io/images/uvwftosn/production/109e27203ad8fb286dce2fd8d9b89bc1bc6a50fc-325x132.png" alt="null"/>

**Add the two Woocommerce overrides**

Finally, download the two template files above and place them within this folder.

You should have

- `mytheme/resources/views/woocommerce/single-product.blade.php`
- `mytheme/resources/views/woocommerce/archive-product.blade.php`

## Add woocommerce support to your theme

The last required step to make Woocommerce work with Sage 9 is to add Woocommerce support to your theme.

Open up `mytheme/app/setup.php`

In the hooked function for `after_setup_theme`, add theme support for woocommerce by calling `add_theme_support`. (This will usually be near the theme support for Soil).

```php  
<?php  
  
// app/setup.php  
  
add\_action('after\_setup\_theme', function() {  
    
  // ...  
  
  /\*\*  
   \* Add Woocommerce Support   
   \*/  
  add\_theme\_support('woocommerce', array(  
    'thumbnail\_image\_width' => 415,  
  ));  
    
  // ...  
    
});  
  
  
```
<img src="https://cdn.sanity.io/images/uvwftosn/production/9be24b7915523b914fd063caa961b5be6c6afc95-578x571.png" alt="null"/>
## You now have Woocommerce & Sage 9 playing nicely!

Congratulations.

## Extras

As you know if you read some of my posts, I like to give extra "pro tips" at the end of an article.

When using Sage 9 and Woocommerce, it's a good idea and you probably want to remove Woocommerce's default stylesheets. By default these look a bit tacky, and who wants like 4 extra stylesheets to be downloaded in their fast, lean, awesome theme, right?

To remove the Woocommerce styles is actually really easy!

Just add the following filter wherever suits you best (probably `app/filters.php`)

```php  
<?php  
  
// Disable woocommerce stylesheets  
add\_filter('woocommerce\_enqueue\_styles', '\_\_return\_empty\_array');  
  
```

And you're done!

Happy building with Woocommerce and Sage 9!