How to disable CSS styles of WooCommerce blocks if you don’t use them

woo expert

Among the many resources that WordPress systematically loads on all pages of your website is everything related to the blocks.

The same goes for the complete editing of the site, and the global styles that it loads unless you avoid it.

But that’s not all, because if you have installed WooCommerce, the plugin to create online stores with WordPress, although the product editor is still the classic one, WooCommerce adds blocks in case you want to use them in posts or pages, and of course, styles are loaded for those blocks on your website, whether you use them or not.

So, if you have WooCommerce installed and you don’t plan to use its blocks in your posts and pages, you can prevent the CSS of the styles of these blocks from being loaded in all the pages of your website, by adding this simple code:

/* Remove WooCommerce block styles */
function wphelp_remove_block_styles_woo() {
wp_deregister_style( 'wc-blocks-style' );
wp_dequeue_style( 'wc-blocks-style' );
add_action( 'enqueue_block_assets', 'wphelp_remove_block_styles_woo' );Code language: JavaScript (javascript)

This will stop loading 22.8 Kb of extra styles on all pages of your website, which are unused CSS, which performance analyzers will detect as such, and most importantly, which you don’t need if you don’t use WooCommerce blocks.

wc block styles

When you apply the above code it will stop loading that unused CSS, reducing the loading times of all of them.

Where to add this code?

You can add the code in several ways. Here is a simple guide on how to do it:

WordPress guide: How and where to paste PHP, JS, CSS codes and functions

How useful was this post?

Click on a smiley to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top