Load WooCommerce CSS Styles and Scripts Conditionally

WooCommerce loads three core CSS style sheets on every page and post when installed on a WordPress site. You can save a bit of page load time here. It also loads a bunch of javascripts and other CSS styles from the libraries it uses for its functionality.

Here is how you can load these files a bit differently so they appear only on the pages you need, speeding up page delivery for non-Woocommerce content.

  • woocommerce-layout.css
  • woocommerce-smallscreen.css
  • woocommerce.css

These are loaded from /wp-content/plugins/woocommerce/assets/css/

Woo have made a filter available to remove all 3 or remove individual ones.

You can do this and just add your own CSS style

This is great but it still loads on every page, if you keep your WooCommerce on the default pages you can conditionally load the CSS file.

Another great way to load only the CSS styles and javascripts only on the WooCommerce product and shop pages is to dequeue them on all the other pages.

3 Comments

  1. Mary Baum on February 27, 2018 at 3:34 pm

    Thank you!

    I had been working with a different version of the dequeue_styles filters that didn’t do the job, because (as I now see) it didn’t return the filtered variable.

    So thanks for the snippet and the learning experience!

  2. Robyn Bieber on January 10, 2017 at 9:19 pm

    OMG! Thanks I really needed this!!

  3. Engelbert on September 24, 2015 at 2:14 am

    The last script can be pasted in theme function?

Leave a Comment





%d bloggers like this: