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 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() && ! is_account_page() ) {

            ## 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', 99 );

Note the conditional tags on line 10. We also include is_account_page() so that WooCommerce assets still load on the My Account page. 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.

The cart-fragments.min.js Performance Problem

Among all WooCommerce scripts, cart-fragments.min.js deserves special attention. This script fires an AJAX request (?wc-ajax=get_refreshed_fragments) on every page load to keep the mini-cart widget updated. Even when the cart is empty, this request runs and can be one of the slowest requests on your site.

If you are on an older version or still see the fragments request on non-cart pages, you can disable it selectively. The smartest approach is to only load cart fragments when the user actually has items in the cart:

add_action( 'wp_enqueue_scripts', function() {
    if ( ! isset( $_COOKIE['woocommerce_items_in_cart'] ) || $_COOKIE['woocommerce_items_in_cart'] === '0' ) {
        wp_dequeue_script( 'wc-cart-fragments' );
    }
}, 99 );

This preserves cart functionality for shoppers while eliminating the AJAX overhead for everyone else.

WooCommerce Block Styles

Modern WooCommerce versions also load block-related stylesheets that may not be needed on every page. These include handles like wc-blocks-style and wc-blocks-vendors-style. If you are not using WooCommerce’s Gutenberg blocks on non-store pages, you can dequeue these as well:

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_woocommerce' ) && ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {
        wp_dequeue_style( 'wc-blocks-style' );
        wp_dequeue_style( 'wc-blocks-vendors-style' );
    }
}, 99 );

For a broader look at speeding up your WordPress site, check out the guide on proven strategies to optimize WordPress loading time. You can also load plugins selectively with Plugin Organizer for even more control over which assets load where.

FAQs

Common questions about WooCommerce asset optimization:

Summary

WooCommerce loads several CSS and JavaScript files on every page of your site by default, even where they are not needed. By dequeuing these assets on non-WooCommerce pages using conditional tags, you can reduce unnecessary HTTP requests and improve page load times across your store.

Pay special attention to cart-fragments.min.js, which fires an AJAX request on every page load to update the mini-cart. If you are running WooCommerce 7.8 or later, this is already handled. For older versions, a cookie-based conditional approach gives you the best balance between performance and functionality.