Disabling CSS styles of WooCommerce blocks

Disabling CSS styles of WooCommerce blocks

WooCommerce is one of the most popular eCommerce plugins for WordPress. By default, it provides various useful blocks for the Block editor, including styles for these blocks.

Styles are loaded in a front-end and a back-end of your site. However, there might be situations when you need to disable these WooCommerce block styles.

While working on the Matthew theme, which is mainly based on WooCommerce and the Block editor, we’ve been experimenting with disabling CSS styles of WooCommerce blocks.

Our goal was to completely change a design of WooCommerce blocks because we wanted to make sure that these styles match the theme design.

Reasons to disable the styles

Of course, we can override default styles of WooCommerce blocks in the theme stylesheet but there are two main things that stop us to do it:

  • The theme will load styles that are not actually needed.
  • There will be a lot of CSS overrides which causes more work and makes more mess.

So, instead of overriding WooCommerce block styles, we’ve decided to completely remove them from the theme. Below, you can find a solution on how disable these styles in your own WordPress site.

Disable WooCommerce front-end styles

WooCommerce loads block styles when you or your users visit the site. So, you do not need to worry about styling WooCommerce blocks because it is already done for you.

If you do not need these styles on your WordPress site then you can disable it using this code snippet:

/**
 * Disable WooCommerce block styles (front-end).
 */
function themesharbor_disable_woocommerce_block_styles() {
  wp_dequeue_style( 'wc-blocks-style' );
}
add_action( 'wp_enqueue_scripts', 'themesharbor_disable_woocommerce_block_styles' );

Disable WooCommerce back-end styles

WooCommerce loads block styles in a back-end of your site as well. So, you can use these blocks in Gutenberg (Block editor).

The only difference is that it loads two style files instead of one: block editor styles and block styles.

It can be disabled using this code snippet:

/**
 * Disable WooCommerce block styles (back-end).
 */
function themesharbor_disable_woocommerce_block_editor_styles() {
  wp_deregister_style( 'wc-block-editor' );
  wp_deregister_style( 'wc-blocks-style' );
}
add_action( 'enqueue_block_assets', 'themesharbor_disable_woocommerce_block_editor_styles', 1, 1 );

Before adding these code snippets to your site, make sure you’ve created your own styles for WooCommerce blocks.

Otherwise, these blocks will be unstyled.

Add code snippets

The easiest way to add these code snippets to your site is to use the Code Snippets plugin. This plugin allows to add any code snippets to your site without modifying the parent files of your theme.

Alternatively, you can use the functions.php file of your child theme. I’ve mentioned a child theme because it’s highly not recommended to modify the parent files of your theme.

Be very careful when adding a custom code snippet to the functions.php file because any error or typo made in this file can break your site.

If you don’t have a coding experience then I would recommend to use the plugin mentioned above.

11 thoughts on “Disabling CSS styles of WooCommerce blocks

  1. Thank you so much!
    I’ve spent the whole day trying to figure out how to do this!
    It worked perfectly! <3

  2. Hello taras

    Does this functions also eliminate render blocking issue on pagespeed insight? I have lots of woocomerce css blocking

    1. Hello Anton,

      These functions are designed only for disabling styles used for default WooCommerce blocks. So, it might eliminate some of CSS blocking issues which are caused by default block styles (if any) but it will not solve all the WooCommerce CSS blocking issues on your site.

      Kind regards,
      Taras

  3. Hi,
    This is no longer working in WooCommerce 5.5.1.

    So we can’t remove it. This seems like a dumb decision by WooCommerce team to enforce their CSS.

    But I found the solution for WooCommerce 5.5+

    Instead of wp_dequeue_style(), you use wp_deregister_style().

    1. Hello Renardi,
      Thank you for providing a solution on how to resolve the problem.

      Hmm… I’ve just tried a solution using wp_dequeue_style() and it works fine on WordPress 5.8 and WooCommerce 5.7. However, I’ll keep your comment as an alternative solution for others who also cannot remove WooCommerce block styles using a solution provided in the article.

      Kind regards,
      Taras

  4. Hi there, thanks for this snippet. However, with the recent Woocommerce (5.7.1), the hook name is using plural ‘s‘.

    wp_dequeue_style( 'wc-blocks-style' );

    instead of

    wp_dequeue_style( 'wc-block-style' );

    Cheers

    1. Hello Pras,

      Thank you very much for noticing it. The Block editor, and its related plugins, are changing rapidly, but I am glad that you’ve let us know about the change! I’ve just updated the article using a proper ID of WooCommerce block styles.

      Warm regards,
      Taras

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.