Removing Woocommerce Scripts and CSS from Irrelevant Pages

Originally Posted on February 26, 2014 Last Updated on May 8, 2019

If you’re running Woocommerce on a WP site, but don’t want the performance hit that the plugin adds with its multiple Javascript and CSS calls, you can use the code below to remove everything Woo-related from normal index, archive, single post and pages (including the generator tag).

Note that if you’re using Woocommerce widgets or have hardcoded cart information (ie, you show the cart on all pages, not just store pages), your results may vary.

// remove woocommerce scripts on unnecessary pages

function woocommerce_de_script() {

    if (function_exists( 'is_woocommerce' )) {

     if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page() ) { // if we're not on a Woocommerce page, dequeue all of these scripts

    	wp_dequeue_script('wc-add-to-cart');

    	wp_dequeue_script('jquery-blockui');

    	wp_dequeue_script('jquery-placeholder');

    	wp_dequeue_script('woocommerce');

    	wp_dequeue_script('jquery-cookie');

    	wp_dequeue_script('wc-cart-fragments');

      }

    }

}

add_action( 'wp_print_scripts', 'woocommerce_de_script', 100 );

add_action( 'wp_enqueue_scripts', 'remove_woocommerce_generator', 99 );

function remove_woocommerce_generator() {

    if (function_exists( 'is_woocommerce' )) {

	if (!is_woocommerce()) { // if we're not on a woo page, remove the generator tag

		remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );

	}

    }

}

// remove woocommerce styles, then add woo styles back in on woo-related pages

function child_manage_woocommerce_css(){

    if (function_exists( 'is_woocommerce' )) {

	if (!is_woocommerce()) { // this adds the styles back on woocommerce pages. If you're using a custom script, you could remove these and enter in the path to your own CSS file (if different from your basic style.css file)

		wp_dequeue_style('woocommerce-layout');

		wp_dequeue_style('woocommerce-smallscreen');

		wp_dequeue_style('woocommerce-general');

	}

    }

}

add_action( 'wp_enqueue_scripts', 'child_manage_woocommerce_css' );

Woocommerce also adds a new stylesheet for the block editor / Gutenberg. If you want to learn more about removing that, and the rest of the new bloat WordPress adds with the block editor, I cover that here, too.

Up Next: How to Make a Facebook Icon Using Only CSS & HTML (no images)

Discussion

Tara 14 Mar 2014

Hi Nathan,

Any chance you have an example website that has used this code to disable a lot of the features of woocommerce? Also, I’m a newbie and guessing that this can go anywhere in the theme’s functions.php?

Thanks in advance.

Tara

Reply
1. nathan 14 Mar 2014
  
  This doesn’t disable features of Woocommerce exactly, Tara. What is does is prevents your site from loading up all of the Javascript and CSS that comes with Woo, so that your non-store pages will load more quickly.
  
  And yes, you should be able to place it anywhere in your functions.php file.
  
  Reply
Andrew Wood 21 Apr 2014

Thanks for that, VERY useful.

I already had something similar implemented #, but this removed a couple of extra bits of bloatcode.

One problem for me though, when I use the remove styles part, (I am including the enque child_manage_woocommerce_css), it breaks my layout in woocommerce pages?

How do I get it to switch back onto the original css, not a child managed one?

Thanks, Andrew

Reply
nathan 21 Apr 2014

Not sure if I fully understand what you’re asking, Andrew.

This shouldn’t remove anything with child or parent themes at all, but instead remove the actual CSS files (and then put them back in where appropriate) from the Woocommerce Plugin itself.

Reply
Andrew Wood 22 Apr 2014

Hi Nathan,

Thanks for reply.

I was referring to this at the bottom of your code…

add_action( 'wp_enqueue_scripts', 'child_manage_woocommerce_css' );

If I use this bit of CSS code, it does indeed remove all the Woocommerce CSS where not required, but when I go to the woocommerce dependent pages, the layout is no longer as it should be (IE the CSS does not appear to be loading)

Thanks, Andrew

Reply
Andrew Wood 22 Apr 2014

Hi again,

OK, I sussed the problem, the smallscreen.css was screwing it up, and was for some reason loading the smallscreen css in the desktop browser!?

I got around this by deleting lines…

wp_register_style( 'woocommerce-smallscreen', plugins_url().'/woocommerce/assets/css/woocommerce-smallscreen.css'

and…

wp_enqueue_style( 'woocommerce-smallscreen' );

I never liked the way woocommerce displays in a mobile device anyway!

Cheers, Andrew

Reply
Andrew Wood 22 Apr 2014

OK, now I have discovered that the styles part of your code brings back the styles in the main shop and products, but strips them for basket and checkout etc..?

Reply
Andrew Wood 22 Apr 2014

OK, so I got it all working, I had to change your last bit of code for the CSS to this (note I have added the OR is_cart etc) …

// remove woocommerce styles, then add woo styles back in on woo-related pages define( 'WOOCOMMERCE_USE_CSS', false ); // completely removes all woo styles function child_manage_woocommerce_css(){ if (function_exists( 'is_woocommerce' )) { if (is_woocommerce() OR is_cart() OR is_checkout() OR is_account_page() ) { // this adds the styles back on woocommerce pages. If you're using a custom script, you could remove these and enter in the path to your own CSS file (if different from your basic style.css file) wp_register_style( 'woocommerce-layout', plugins_url().'/woocommerce/assets/css/woocommerce-layout.css' ); wp_register_style( 'woocommerce-general', plugins_url().'/woocommerce/assets/css/woocommerce.css' ); if ( class_exists( 'woocommerce' ) ) { wp_enqueue_style( 'woocommerce-layout' ); wp_enqueue_style( 'woocommerce-general' ); } } } } add_action( 'wp_enqueue_scripts', 'child_manage_woocommerce_css' );

Reply
nathan 22 Apr 2014

Nice, Andrew, and thanks for the all input back here.

Reply
Andrew Wood 23 Apr 2014

Hi Nathan,

No problem, I’m glad if it might help somebody with the same issue.

Thanks for the original code.

Reply
Ade Firman Triangga 24 Jun 2014

this code works prefectly on my site ! thank you so much !!

Reply
john warhus 9 Jul 2014

I’ve read through the comments on this topic and have a question.

Andrew removed the code that loaded the woocommerce-smallscreen style sheet, in order to correct the problem of loading it on to a PC or other large screen device. This disabled the small screen style load on any device, making it difficult to use the site on devices with small screens.

Is there a way to modify the code so that the small screen code is loaded only onto small screen devices?

Thanks,
J.W.

Reply
nathan 9 Jul 2014

Sure John, you could first install this code to your functions.php file, which allows for sorting by various mobile devices, and then do something like this:

if (!is_mobile_device()) {wp_register_style( 'woocommerce-smallscreen', plugins_url().'/woocommerce/assets/css/woocommerce-smallscreen.css'}

Reply
john warhus 10 Jul 2014

Nathan,

Thanks for the prompt response. I got things to work correctly, but I needed to make a few changes to the code you posted.

I inserted both of the code pieces that you recommended. But, I found that the line of code that registers woocommerce-smallscreen broke all my woocommerce pages; I got http500 pages when trying to access any of them.

I inspected the modified code carefully and found that a “)” and “;” were needed at the end of that piece of code.
Also, I found that the state of the conditional must be set to “is_mobile_device()” instead of “!is_mobile _device()”. With the inversion, the mobile style sheet loads on every device that is not a mobile device. The corrected line is:

if (is_mobile_device()) {wp_register_style( ‘woocommerce-smallscreen’, plugins_url().’/woocommerce/assets/css/woocommerce-smallscreen.css’);}

I also added the condition to the enqueueing of the smallscreen style:

if (is_mobile_device()) {wp_enqueue_style( ‘woocommerce-smallscreen’ );}

Not sure if its needed, but with the condition, it is consistent with the registering of that style.

Thanks for the help,
J.W.

Reply
Thad 8 Aug 2014

Thanks for sharing this. Having these scripts on every page of the a site was driving me nuts.

Reply
1. nathan 8 Aug 2014
  
  Glad it helped you, Thad. Love the cowboy & computer.
  
  Reply
Jan 5 Nov 2014

Hey, question does any one have any ideas for fast loading admin-ajax.php without losing functionality? Thanks in advance.

Reply
nathan 5 Nov 2014

What are you trying to do specifically, Jan?

Reply
Jesse 7 Mar 2017

What’s up Nathan, a few years late but just wanted to let you know we released a free plugin based on this code:

https://wordpress.org/plugins/disable-cart-fragments-littlebizzy/

If you are interested or have ANY feedback it would be super appreciated… some of your other dequeues are pretty useful and probably raise more possibilities! Anyway cheers —

Reply
1. nathan 15 Mar 2017
  
  Good stuff, Jesse.
  
  Reply
Dana 27 Feb 2018

Good info – any pointers on how to modify the above code so that the woocommerce geolocation functionality doesn’t get called for a given page? We need this on our site’s store pages, but it’s extremely slow and so we’d of course like to avoid calling it on all of the non-store pages.

For clarity, I’m talking about the “geolocate with page caching support”, that results in URLs with parameters like ?v=11aedd0e4327 appended.

Thanks in advance for your help!

Reply
Anon 8 May 2019

Thanks a ton for this Nathan.

Note that with Gutenberg/block-editor, they’ve added another script that needs to be dequeued:

wp_dequeue_style( ‘wc-block-style’ );

Reply
1. nathan 8 May 2019
  
  Correct! WordPress itself adds some bologna as well. I’ll update the post.
  
  Reply
  1. nathan 8 May 2019
    
    Actually, I just wrote a new one on removing bloat in Gutenberg in general: https://clicknathan.com/how-to/remove-wordpress-gutenberg-block-editor-external-css-javascript-files/
    
    Reply
Chris 5 Sep 2020

Hi Nathan, many thanks for this article. I had a few of Woo’s unnecessary files dequeued on my site. But I wasn’t sure of the actual hooks for the remaining scripts. Your code provided the last piece of this puzzle. I know it’s probably a chance in hell. It would be nice if plugin authors provided options to load resources where they’re needed. Case in point. I worked on a site that had Slider Revolution installed and activated. But the site didn’t actually use any sliders. The plugin still loaded all its css and js files. I’ve always operated under the premise of “If it’s not needed or being used, don’t load it.”

Reply
1. nathan 8 Sep 2020
  
  That really should be where all plugins are headed, but especially Woocommerce. Maybe someday…
  
  Reply