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.

Currently, we are working on a new theme which will be mainly based on WooCommerce and the Block editor. Our goal is to completely change a design of WooCommerce blocks that come with the plugin. 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_editor_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.

Posted in Guides, WordPress

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.