Default stylesheets can’t be disabled

Resolved

(@germanfrelo)

WooCommerce block styles override the styles set in the theme.json file of my custom block theme, and can’t be disabled/dequeued.

For example: I added a Button block to a sample page that uses one of WooCommerce’s page templates like Product Catalog. The Button has styles set in the theme.json file of my theme, but some of them are overridden by the default WooCommerce block styles located in wp-content/plugins/woocommerce/assets/client/blocks/product-button.css. Adding the Button (any block) to a page that doesn’t use a WooCommerce template works as expected.

I tried to disable the WooCommerce stylesheets using the code snippets from the official documentation, but it didn’t work:

/**
 * Set WooCommerce image dimensions upon theme activation
 */
// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
	unset( $enqueue_styles['woocommerce-general'] );	// Remove the gloss
	unset( $enqueue_styles['woocommerce-layout'] );		// Remove the layout
	unset( $enqueue_styles['woocommerce-smallscreen'] );	// Remove the smallscreen optimisation
	return $enqueue_styles;
}

// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

I also tried other solutions from stackoverflow and similar sites, but it didn’t work:

/**
 * Disable WooCommerce block styles (front-end).
 */
function dequeue_woocommerce_blocks_styles() {
	if ( class_exists( 'WooCommerce' ) ) {
		// Examples of handles. You may need to inspect your site's source code
		// to find the exact handles of the styles you want to remove.
		wp_dequeue_style( 'wc-blocks-style' );
		wp_dequeue_style( 'wc-blocks-vendors-style' );
		wp_dequeue_style( 'wc-blocks-style-active-states' );
		// Add more handles as needed.
	}
}
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_blocks_styles', 99 );

Please, I need to disable it as soon as possible for a client’s website.

Thank you.

This topic was modified 1 year, 3 months ago by Germán.

Viewing 1 replies (of 1 total)

Plugin Support shahzeen(woo-hc)
(@shahzeenfarooq)

1 year, 3 months ago
Hi there,

Thanks for reaching out! I understand that you’re trying to prevent WooCommerce block styles from overriding the styles set in your theme.json file, but the usual methods of dequeuing styles haven’t worked as expected.

Since WooCommerce’s block styles are loaded as part of its block-based templates, they may not be affected by woocommerce_enqueue_styles. These styles are handled differently compared to traditional WooCommerce stylesheets.

As our support scope focuses on core WooCommerce functionality, we’re unable to provide customization assistance. However, I’d recommend the following approaches:
1. Use More Specific CSS Selectors
  You might be able to override WooCommerce’s styles by increasing the specificity of your CSS in theme.json or adding !important where necessary.
2. Disable Styles via Hooks
  Try using the wp_dequeue_style() function in functions.php instead of woocommerce_enqueue_styles.
```
function dequeue_woocommerce_block_styles() {
    wp_dequeue_style('wc-blocks-style'); // Dequeues WooCommerce block styles
}
add_action('wp_enqueue_scripts', 'dequeue_woocommerce_block_styles', 100)
```
If that does not help, I can recommend WooExperts and Codeable.io as options for getting professional help. Alternatively, you can also ask your development questions in the WooCommerce Community Slack as custom code falls outside our usual scope of support.

Viewing 1 replies (of 1 total)

The topic ‘Default stylesheets can’t be disabled’ is closed to new replies.

Tags