Remove WooCommerce block styles

Question

I'm working on a custom WooCommerce theme, and ideally would like to use the stable Gutenberg blocks shipped with WooCommerce. Obviously, instead of over-riding all of their styles with my own to match the design, I would rather remove them to improve page speed. Seems like it should be a simple process, but no result so far. Using this:

function mytheme_woocommerce_remove_block_styles() {
  wp_dequeue_style( 'wc-block-style-css' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_woocommerce_remove_block_styles', 100 );

Do I need to hook it at a higher priority? I would think 100 would be sufficient. Any assistance is appreciated.

Answer 1

I found out a working solution with Woocommerce 8.0.1 in 2023:

function disable_wp_blocks() {
    $wstyles = array(
        'wp-block-library',
        'wc-blocks-style',
        'wc-blocks-style-active-filters',
        'wc-blocks-style-add-to-cart-form',
        'wc-blocks-packages-style',
        'wc-blocks-style-all-products',
        'wc-blocks-style-all-reviews',
        'wc-blocks-style-attribute-filter',
        'wc-blocks-style-breadcrumbs',
        'wc-blocks-style-catalog-sorting',
        'wc-blocks-style-customer-account',
        'wc-blocks-style-featured-category',
        'wc-blocks-style-featured-product',
        'wc-blocks-style-mini-cart',
        'wc-blocks-style-price-filter',
        'wc-blocks-style-product-add-to-cart',
        'wc-blocks-style-product-button',
        'wc-blocks-style-product-categories',
        'wc-blocks-style-product-image',
        'wc-blocks-style-product-image-gallery',
        'wc-blocks-style-product-query',
        'wc-blocks-style-product-results-count',
        'wc-blocks-style-product-reviews',
        'wc-blocks-style-product-sale-badge',
        'wc-blocks-style-product-search',
        'wc-blocks-style-product-sku',
        'wc-blocks-style-product-stock-indicator',
        'wc-blocks-style-product-summary',
        'wc-blocks-style-product-title',
        'wc-blocks-style-rating-filter',
        'wc-blocks-style-reviews-by-category',
        'wc-blocks-style-reviews-by-product',
        'wc-blocks-style-product-details',
        'wc-blocks-style-single-product',
        'wc-blocks-style-stock-filter',
        'wc-blocks-style-cart',
        'wc-blocks-style-checkout',
        'wc-blocks-style-mini-cart-contents',
        'classic-theme-styles-inline'
    );

    foreach ( $wstyles as $wstyle ) {
        wp_deregister_style( $wstyle );
    }

    $wscripts = array(
        'wc-blocks-middleware',
        'wc-blocks-data-store'
    );

    foreach ( $wscripts as $wscript ) {
        wp_deregister_script( $wscript );  
    }
}

add_action( 'init', 'disable_wp_blocks', 100 );

Answer 2

after trying all kinds of versions of the dequeue code, this mix is what worked for me:

function ca_deregister_woocommerce_block_styles() {
    wp_deregister_style( 'wc-blocks-style' );
    wp_dequeue_style( 'wc-blocks-style' );
}
add_action( 'enqueue_block_assets', 'ca_deregister_woocommerce_block_styles' );

Answer 3

i used this and worked for me Tested 100% ! Enjoy add that with the aid of Code Snippets plugin or manually by adding to functions.php

if(!function_exists('kazhol_remove_block_styles_woo')){
function kazhol_remove_block_styles_woo() {
    wp_deregister_style( 'wc-blocks-style' );
    wp_dequeue_style( 'wc-blocks-style' );
}
}add_action( 'enqueue_block_assets', 'kazhol_remove_block_styles_woo' );

Answer 4

The dequeue handle is incorrect

it should be wp_dequeue_style('wc-block-style'); and not wp_dequeue_style('wc-block-style-css');

A bit confusing at first i agree, every js and css that was enqued via wp_enqueue_style or wp_enqueue_script gets a suffix of css/js

Example

wp_enqueue_style('swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css')

This will create a <link> with an id attribute of swiper-css, im guessing this is why you thought that in order to dequeue the style you need to do this fundtion wp_dequeue_style('swiper-css'). But it should be wp_dequeue_style('swiper')

Answer 5

I just came across this question, and the handle for the block-style is actually wc-blocks-style

From the HTML Head

<link rel="stylesheet" id="wc-blocks-style-css" href="https://c0.wp.com/p/woocommerce/5.6.0/packages/woocommerce-blocks/build/wc-blocks-style.css" type="text/css" media="all">

So to dequeue the script, you need to use this.

function mytheme_woocommerce_remove_block_styles() {
    wp_dequeue_style( 'wc-blocks-style' ); // WooCommerce Blocks
}
add_action( 'wp_enqueue_scripts', 'mytheme_woocommerce_remove_block_styles', 100 );

Answer 6

A simplified version of Dariusz's answer to remove WC block style assets for WooCommerce 8+ with future proofing for new blocks would be:

add_action(
    'wp_enqueue_scripts',
    function() {
        global $wp_styles;
        foreach ( $wp_styles->queue as $handle ) {
            if ( str_starts_with( $handle, 'wc-blocks' ) ) {
                wp_deregister_style( $handle );
                wp_dequeue_style( $handle );
            }
        }
    },
    999
);