Sage + Woocommerce - how to handle stylesheets?

sage
14

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

4 Likes