Prevent Loading WooCommerce’s JS & CSS Files & Improve Loading Time

Building a digital store using WooCommerce is not rocket science. You can do it yourself or get help from many tutorials discussing WooCommerce on Savvy’s blog and across the web in general. However, in order to succeed and provide a good user experience for your store, a significant part of that user experience is the loading time and responsiveness of the store.

Your online store (your business, in other words) can stumble and fail if the user experience it offers is not up to par. In this post, we’ll describe one of many steps to improve the loading time of WooCommerce-powered websites.

The action we’re discussing in this case is how to remove, or rather, how to prevent WooCommerce from loading unnecessary JavaScript and CSS files on every single page of your website, but only on the pages where WooCommerce is active.

Several things to consider before proceeding:

  • Are there elements on your site that depend on those WooCommerce scripts and are essential for WooCommerce pages itself? (Payment page, shopping cart, product pages, etc.). Elements like the cart icon in the header, or any widget in the site’s sidebar.
  • Do you have a development environment? It’s highly recommended to test changes locally (on your personal computer) or in a development environment if you have one.
  • You should know what you’re doing and be comfortable with code.
  • Always make sure you have a proper backup of your site before you start tinkering with code.

Removing Default Loaded Files by WooCommerce

By default, WooCommerce loads three CSS files and five JavaScript files. These files are:

<!--CSS Files-->
<link  href='.../plugins/woocommerce/assets/css/woocommerce-layout.css' rel='stylesheet' type='text/css' />
<link  href='.../plugins/woocommerce/assets/css/woocommerce-smallscreen.css' rel='stylesheet' type='text/css' />
<link  href='.../plugins/woocommerce/assets/css/woocommerce.css' rel='stylesheet' type='text/css' />

<!--Javascript Files-->
<script src='.../plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/add-to-cart.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/woocommerce.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/cart-fragments.min.js'></script>

The CSS file names will end with ‘rtl’ if your WooCommerce store is in Hebrew.

It’s quite obvious that you don’t need the script responsible for adding products to the cart (add-to-cart.min.js) to be loaded on the contact page, right? And surely, the CSS file responsible for styling the store layout (woocommerce-layout.css) shouldn’t be loaded on your blog posts, correct?

You can inspect the source code of any page on your site and see if these files are being loaded. Of course, if your site has already undergone optimization for speed, you might not see these files at all, except on WooCommerce pages where they’re necessary.

You want these files to be loaded only on relevant store pages, such as product pages, checkout page, shopping cart page, etc. So, in order to achieve that and remove unnecessary JS and CSS files from non-WooCommerce pages, add the following code to your functions.php file:

//* Enqueue scripts and styles

function savvy_remove_woocommerce_css_js() {

    // Check if WooCommerce is active
    if( function_exists( 'is_woocommerce' ) ){

        // Check if we are on a WooCommerce page
        if(! is_woocommerce() && ! is_cart() && ! is_checkout() ) {

            ## Dequeue WooCommerce styles

            ## Dequeue WooCommerce scripts

            wp_deregister_script( 'jquery-blockui' );
            wp_dequeue_script( 'jquery-blockui' );

            wp_deregister_script( 'js-cookie' );
            wp_dequeue_script( 'js-cookie' );

add_action( 'wp_enqueue_scripts', 'savvy_remove_woocommerce_css_js' );

Pay attention to the conditional tags in line 10. If you need to load these scripts on pages other than WooCommerce pages, you can adjust these conditions accordingly.

If you have any questions about this topic, feel free to ask in the comments, and I promise to respond promptly.

Appendix A

This solution will work perfectly for both CSS and JavaScript files. However, it’s worth mentioning that when it comes to WooCommerce’s loaded CSS files, you can remove them entirely from all pages of the site, including WooCommerce pages, using the following filter:

// Remove all the stylesheets in one line
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Alternatively, if you want to remove a specific CSS file, you can do it like this:

// Remove each style one by one
function sv_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );	    // Remove the gloss
    unset( $enqueue_styles['woocommerce-layout'] );		    // Remove the layout
    unset( $enqueue_styles['woocommerce-smallscreen'] );	// Remove the smallscreen optimization
    return $enqueue_styles;
add_filter( 'woocommerce_enqueue_styles', 'sv_dequeue_styles' );

Appendix A is extensively discussed in the post How to Remove Default Loaded CSS in WooCommerce.

To Sum Up

Depending on how you’re using WooCommerce, it might be advisable to optimize as described in this post. Personally, I’m a fan of proper user experiences in general and site speed in particular, so if an added plugin is loading its scripts globally, it could annoy me.

I like the code of the sites I work on to be tidy and clean whenever possible, but I also understand why WooCommerce loads these files globally. They’re meant to cover most scenarios users encounter, and if they didn’t, their technical support requests would skyrocket by thousands of percent.

Roee Yossef
Roee Yossef

I develop websites & custom WordPress themes by design. I love typography, colors & everything between, and aim to provide high performance, seo optimized websites with a clean & semantic code.

  • Assaf 18 January 2024, 15:09

    Shalom Roee,

    Great post. If I’m using Elementor then I can remove css files altogether no? I mean even woocommerce pages are handled by elementor.

    Also regarding elementor – I don’t really have an add to cart. When someone wants to buy he sent to immediately to the checkout page using something like www.**mysite**.com/checkout/?add-to-cart=**product-number**

    So I think that in this case the js cookie of adding to cart could be removed altogether? To note that I don’t have a store with thousands of product. Just a few online courses.

    Regarding the jquery cookie – I’m using an affiliate plugin (affiliatewp) so I think that if you unload the js cookie site-wide it will also effect it and it should not be removed.

    • Roee Yossef 18 January 2024, 17:17

      I’m not really sure about the behaviour of Elementor, but it seems reasonable that you can remove all the CSS. You should give a try (and let us know 🙂 )

      If you do not use the Cart you can definitely remove the relevant assets, but i do not know if there are any dependencies on the cookie js for affiliatewp. once again, you should check it locally as i don’t have experience with affiliatewp and neither with elementor…

  • 25 January 2024, 8:19

    Yea this snippet was beautiful. Thank you sir for the excellent code snippet.

    On a side note. I should be able to click comment at very top of post and smooth scroll down here. Maybe a feature you’ll integrate soon.

    • Roee Yossef 25 January 2024, 10:48

      Thanks Matt, Will soon apply your recommendation.. 🙂

Leave a Comment