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

Building an online store using WooCommerce isn’t rocket science. You can either do it yourself or use plenty of guides on WooCommerce available on the Savvy Blog and across the web. However, to succeed, your store must provide at least a good user experience. A significant part of that user experience is the page load time and the responsiveness of the store.

Your online store (your business, in other words) can fail simply due to a poor user experience. In this post, we’ll discuss one of the many actions you can take to improve the load time of websites using WooCommerce.

This specific action involves how to remove—or rather, prevent—WooCommerce from loading unnecessary JavaScript and CSS files on all pages of your site, restricting them only to pages where WooCommerce is active.

Things to Consider Before You Proceed:

• Does your site have elements outside WooCommerce pages (e.g., cart, checkout, product pages) that rely on these scripts? Examples might include a cart widget in the header or a widget in the sidebar throughout the site.
• Do you have a staging or development environment? It’s highly recommended to test these changes locally on your computer or on a staging site if available.
• You should be comfortable with coding and know what you’re doing.
• Always ensure you have a proper backup of your site before making any code changes.

Removing Default WooCommerce Files

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

<!--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>

CSS file names will end with rtl if your WooCommerce store uses a right-to-left language like Hebrew.

For instance, there’s no reason to load the add-to-cart.min.js script on your Contact page, right? Similarly, there’s no need to load the woocommerce-layout.css file on your blog posts.

You can check your site’s source code on any page to confirm that these files are loading. If your site has already undergone optimization, you shouldn’t see these files except on WooCommerce-specific pages.

To ensure these files are loaded only on relevant store pages—such as product pages, checkout pages, or the cart—you can add the following code to your functions.php file:

<?php
//* 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
            wp_dequeue_style('woocommerce-layout');
            wp_dequeue_style('woocommerce-general');
            wp_dequeue_style('woocommerce-smallscreen');

            ## Dequeue WooCommerce scripts
            wp_dequeue_script('wc-cart-fragments');
            wp_dequeue_script('woocommerce');
            wp_dequeue_script('wc-add-to-cart');

            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' );

Note the conditional tags on line 10. If you need to load these scripts on a non-WooCommerce page, you can adjust these conditions accordingly.

If you have questions about this topic, feel free to ask in the comments, and I’ll reply as soon as possible.

Appendix A

This solution works well for both CSS and JavaScript files. However, if you want to completely remove WooCommerce’s CSS files from all pages—including WooCommerce pages—you can use the following filter:

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

Alternatively, if you wish to remove specific CSS files, you can do so 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' );

This approach is discussed in detail in the post How to Remove Default WooCommerce Stylesheets.

Conclusion

Depending on how you use WooCommerce, it’s likely beneficial to implement optimizations as described in this post. Personally, I’m a fan of delivering the best possible user experience and ensuring websites are fast and efficient. When a plugin globally loads its assets unnecessarily, it can drive me crazy.

While I appreciate clean and efficient code, I also understand why WooCommerce globally loads these files. They aim to cover most user scenarios, and without this approach, their technical support would likely face a massive increase in inquiries.