# Sage + Woocommerce - how to handle stylesheets?

**URL:** https://discourse.roots.io/t/sage-woocommerce-how-to-handle-stylesheets/5857
**Category:** sage
**Created:** 2016-02-06T21:03:48Z
**Posts:** 14
**Showing post:** 14 of 14

## Post 14 by @stuartcusackie — 2020-06-24T15:52:04Z

I’ve just been going through this today. Here is a Sage 9 solution that should require minimal maintenance as the WooCommerce plugin gets updated:

1. Create a custom **woocommerce.php** functions file in **/theme-folder/app/**

2. In your new file, add a filter to remove default woocommerce stylesheets and scripts:

```
add_action('wp_enqueue_scripts', function () {

    if (function_exists('is_woocommerce')) {

        // Part 1: Dequeue styles on all pages (These will be added to the main.scss build)
        wp_deregister_style('woocommerce-general');
        wp_deregister_style('woocommerce-layout');
        wp_deregister_style('wc-block-style');

        // Part 2: Dequeue scripts on non-WC pages (I haven't figured out how to include these in main.js yet)
        if (!is_woocommerce() && !is_cart() && !is_checkout()) {

            # Styles not covered by part 1 (this one is trickier to remove because it contains an inline media query)
            wp_dequeue_style('woocommerce-smallscreen');

            # WooCommerce Scripts
            wp_dequeue_script('wc_price_slider');
            wp_dequeue_script('wc-single-product');
            wp_dequeue_script('wc-add-to-cart');
            wp_dequeue_script('wc-cart-fragments');
            wp_dequeue_script('wc-checkout');
            wp_dequeue_script('wc-add-to-cart-variation');
            wp_dequeue_script('wc-single-product');
            wp_dequeue_script('wc-cart');
            wp_dequeue_script('wc-chosen');
            wp_dequeue_script('woocommerce');
            wp_dequeue_script('prettyPhoto');
            wp_dequeue_script('prettyPhoto-init');
            wp_dequeue_script('jquery-blockui');
            wp_dequeue_script('jquery-placeholder');
            wp_dequeue_script('fancybox');
            wp_dequeue_script('jqueryui');

            # WooCommerce Multilingal scripts
            wp_dequeue_script('wcml-front-scripts');
            wp_dequeue_script('cart-widget');
        }
    }
}, 99);
```

1. Initialise the new file in **/theme-folder/resouces/functions.php** , like so:

```
['helpers', 'setup', 'filters', 'admin', 'woocommerce']
```

1. Add the plugins folder to webpack’s paths in theme-folder/resources/build/config.js, like so:

```
paths: {
  root: rootPath,
  assets: path.join(rootPath, 'resources/assets'),
  plugins: path.join(rootPath, '../../plugins'),
   ...
```

1. Modify webpack.config.js so that it applies the url loader to the plugins folder, like so:

```
test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
include: [
  config.paths.assets,
  config.paths.plugins
], 
...
```

1. Add WooCommerce styles to main.scss  
**Be careful not to use WooCommerce’s SASS files as its variables conflict with Bootstrap’s. Use the pre-compiled CSS files.**

```
/** Import woocoomerce styles */
@import "./../../../../../plugins/woocommerce/packages/woocommerce-blocks/build/style.css";
@import "./../../../../../plugins/woocommerce/assets/css/woocommerce-layout.css";
// @import "./../../../../../plugins/woocommerce/assets/css/woocommerce-smallscreen.css";
@import "./../../../../../plugins/woocommerce/assets/css/woocommerce.css";
```

Then you can just yarn build as usual. Webpack will know the location of all the WooCommerce assets thanks to the webpack config modifications.

**I’m a little concerned that the distribution file paths will cause problems, e.g.:**  
`dist/_/_/_/_/plugins/woocommerce/assets/fonts/WooCommerce.woff`  
Notice the series of folders named with an underscore. This hasn’t caused any problems yet, but just a heads up!

Thank you to all the previous commenters on this post, and also this post:  
[https://discourse.roots.io/t/any-working-example-of-sage-9-latest-sage-9-0-0-beta-4-with-woocommerce-3-1-1/10099/20](https://discourse.roots.io/t/any-working-example-of-sage-9-latest-sage-9-0-0-beta-4-with-woocommerce-3-1-1/10099/20)

---

_[View the full topic](https://discourse.roots.io/t/sage-woocommerce-how-to-handle-stylesheets/5857)._