WordPress Function to Conditionally Load Woocommerce Styles and Scripts

After installation, Woocommerce (version 4.5.2) by default enqueues many CSS and JS files. Some of these files are added only to the product, shopping cart and checkout pages, where as a few others are added sitewide. As of the latest 2021 version which is 4.5.2 at the time of writing this article, five stylesheets and five Javascript files are enqueued on all pages (site wide) as follows:

CSS Files:

1.) http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css
2.) http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css
3.) http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css
4.) http://localhost/orbitingweb/wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/style.css
5.) http://localhost/orbitingweb/wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/vendors-style.css

Javascript Files:

1.) http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js
2.) http://sitename.com/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js
3.) http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js
4.) http://sitename.com/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js
5.) http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js

The issue is that these files load on all wordpress posts and pages irrespective of if or not the page is a WooCommerce page. In other words, these files are loaded on regular pages that do not require these styles and scripts to function.

As you must be aware, it is a good practice to keep the number of CSS and JS references on a page to the bare minimum as this can impact page load speed. The more files the server has to request while rendering a page, the more time it takes to load. Therefore it is always a good practice to restrict plugins from unnecessarily loading JS and CSS files where not required.

For WooCommerce, you can easily achieve this by using the wp_dequeue_script() and wp_dequeue_style() wordpress functions. These functions dequeue any scripts or styles that are enqueued by wordpress. These functions require you to provide the handles of scripts that need to be dequeued. You can find these handles by digging into the plugin files and searching for the terms self::enqueue_script and self::register_script. Use a software like notepad++ to conduct the search and find.

In our case, the plugin handles we are looking for are woocommerce, wc-add-to-cart and wc-cart-fragments. We can now write a function using these handles to block these scripts from loading when not required.

Function to Dequeue WooCommerce Scripts and Styles

Open your theme's functions.php file and add the following code to it:

function conditionally_load_woc_js_css(){
if( function_exists( 'is_woocommerce' ) ){
        # Only load CSS and JS on Woocommerce pages   
	if(! is_woocommerce() && ! is_cart() && ! is_checkout() ) { 		
		
		## Dequeue scripts.
		wp_dequeue_script('woocommerce'); 
		wp_dequeue_script('wc-add-to-cart'); 
		wp_dequeue_script('wc-cart-fragments');
		
		## Dequeue styles.	
		wp_dequeue_style('woocommerce-general'); 
		wp_dequeue_style('woocommerce-layout'); 
		wp_dequeue_style('woocommerce-smallscreen');
                wp_dequeue_style('wc-block-style');
		wp_dequeue_style('wc-block-vendors-style'); 			
		}
	}	
}
add_action( 'wp_enqueue_scripts', 'conditionally_load_woc_js_css' );

This code will effectively block all Woocommerce CSS and JS files from loading and restrict them only to WooCommerce pages. Once you have added this function, check your page source to make sure that the changes have taken effect. Make sure to check page source of regular blog posts and not woocommerce pages.

Dealing With Additional Scripts and Styles

If you use woocommerce plugins to enhance the functionality of your shop, these plugins can add additional scripts and styles to your site. To dequeue these scripts, you will need to first find the script handles. Check out Step 1 in this article to find out how to find your script handles. Once you have found the handles, you can add these to the above function.