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 blocks for the Block editor. WooCommerce also provides styles for these blocks. Styles are loaded in a front-end and a back-end of your site. 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 had a need to disable CSS styles of WooCommerce blocks. Our goal is to completely change a design of the blocks which come from WooCommerce. We want 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. It’s already done for you. If you do not need these styles then you can disable it using this code snippet:

/**
 * Disable WooCommerce block styles (front-end).
 */
function slug_disable_woocommerce_block_styles() {
  wp_dequeue_style( 'wc-block-style' );
}
add_action( 'wp_enqueue_scripts', 'slug_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 slug_disable_woocommerce_block_editor_styles() {
  wp_deregister_style( 'wc-block-editor' );
  wp_deregister_style( 'wc-block-style' );
}
add_action( 'enqueue_block_assets', 'slug_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.

Adding these 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 a plugin mentioned above.

Posted in Guides, WordPress

4 thoughts on “Disabling CSS styles of WooCommerce blocks

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.