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
To add code snippets in WordPress, use the Code Snippets plugin. This plugin allows to add custom code snippets to a WordPress website without modifying the parent files of the 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.
Leave a Reply