How to Optimize WooCommerce to Load Scripts and CSS Conditionally only if required?
WooCommerce and Online Shopping – One of the best thing happened for all WordPress users 🙂
It’s been almost a year WordPress acquired WooCommerce and it’s been amazing journey. It seems, currently WooCommerce covers nearly ~40% of all online stores and that’s a big number. On Crunchify we wanted to have Online Digital Store and we have decided to give it a try.
WooCommerce comes as a simple plugin installation like any other plugin but it will be little bit heavy on resources.
Take a look a this:
WooCommerce adds total 13 new Database Tables
WooCommerce loads 3 CSS files and 5 JavaScript files on Each page
// CSS files woocommerce-layout.css woocommerce-smallscreen.css woocommerce.css // JavaScript files add-to-cart.min.js jquery.blockUI.min.js woocommerce.min.js jquery.cookie.min.js cart-fragments.min.js
Now as we know from Speed Optimization Goal, it’s absolutely not required to load all these 8 additional resources except cart, checkout or product page. Loading these 8 extra files may slow down your blog which may create some negative impact Google Search Engine Result (SERP) page.
Here is a quick tips to disable all above scripts except cart, checkout, my-account and product page.
//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'crunchify_disable_woocommerce_loading_css_js' );
function crunchify_disable_woocommerce_loading_css_js() {
// Check if WooCommerce plugin is active
if( function_exists( 'is_woocommerce' ) ){
// Check if it's any of 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( 'js-cookie' );
wp_dequeue_script( 'js-cookie' );
}
}
}
Put above code into your theme’s functions.php file and save your changes.
And that’s it, you should be all good. Now try checking one more time on your blog home page and other posts and you shouldn’t see any of these files loaded on that page/post.
Thanks, but does not seem to work for me. Added to end of functions.php, cleared all caches, restart server. No errors, but woocommerce.css still on all pages including the home page.
Doesn’t work. Still loads:
woocommerce/packages/woocommerce-blocks/build/style.css
/woocommerce/packages/woocommerce-blocks/build/vendors-style.css
Hi Martynas – will check this out soon and update.
Hey, I use WooCommerce blocks (categories) and has_product_category filter is not working. Anything I can do? Thanks.
Hi There – are referring
has_product_categoryoris_product_categoryfilter?Please confirm.
is_product_category
Ack. Thanks. I’ll check it out and update.
Hi, would this script work on a pages with embedded checkout forms? Or how do I tell if the checkout page with the embedded form is considered is_checkout? I would not want the woocommerce scripts to be excluded from these types of checkout pages.
Hi There – yeah. This code snippet works on all WooCommerece page and only disables scripts on non-woocommerece pages.
Hope this helps. I would suggest to verify once you add code snippet. I agree, we don’t want to break WooCommerece Checkout functionality :).
Daaang this worked easily! I added it to one of my affiliate sites that doesn’t use carts and shipping anyway, it just has Amazon redirects to the product page. It took off 3 seconds and 10 requests. Thank you!
Wow. Awesome news. I’m glad it worked. Happy to help Ed Luvables.
Hi! Thanks for the tips! This code worked fine with WP 5.5 and WC 4.4, but as I wanted to go further with some WC and Elementor dependents, I had to dequeue scripts or styles also with
add_action( 'elementor/frontend/after_enqueue_scripts', function() {
wp_dequeue_script( 'jet-woo-builder' );
} );
Thank you Magnum for an update. I’m glad it worked for you.
Dummy question: If I disable the scripts mentioned by you, will I have no problem with the way my website will look?
Hi Marcel – there will be for sure if you are using WooCommerce on your site. But sometimes there are so many theme developers include WooCommerce themes even if you don’t use that. In that case I would suggest to disable loading all WooCommerce JavaScripts and CSS related to it.
Hope this helps.
it works on my site. thank you!
Thanks you for your comment. Happy blogging.
As of June 2019 and WP 5.2.x, this does not seem to work. I copied and pasted the code to my functions.php file and jQuery gets disabled and my site of course does not load correctly. I comment the modification out, and the site works fine. Any ideas?
Error displayed in console: “my_script.js?ver=4.1C:26 Uncaught ReferenceError: jQuery is not defined”
Hi Karl – we are still using this on our site without any issue.
What issue are you facing at your end?
Hello 🙂
I just installed WP, Woo and Storefront with child theme. I just can’t make this work. I’ve tried 10 examples. Does Storefront block it somehow?
Hi Kevin. Thanks for reaching out. Ideally WordPress hook should honored that. I never played with Storefront theme. So sorry i’m not sure.
wp_deregister_script( ‘js-cookie’ );
wp_dequeue_script( ‘js-cookie’ );
This works now…
Thanks Linden – i’ve just updated tutorial and added solution.
Hello, I followed you example and now my site wont load anymore. how do I get my site back to loading again.
Thanks
Hi Agbe – what do you mean your site doesn’t load? Make sure you don’t have any typo in functions.php file.
Can you share your functions.php file? I’ll try debug further.
It does not work with WC 3.0 do you know a solution to do this in WC 3.0? It worked perfectly before upgrading.
For example:
wp_dequeue_script(‘jquery-cookie’); Worked before 3.0.
Best regards.
Hi Damir. I’ll check and update you by tomorrow. Please stay tuned.
Could you try and let me know?
wp_dequeue_script('js-cookie');Hi there App Shah (coolest name ever?)…
Very thorough list of Woo dequeues here. We made a free plugin based on one snippet:
https://wordpress.org/plugins/disable-cart-fragments-littlebizzy/
If you have ANY suggestions we’d love to hear it… for example, if you think other plugins would be appropriate, compared with custom function snippets. Thanks!
Good to hear that. Thanks Jesse.
Thanks!
You are welcome. Happy blogging.