Skip to content
ThemesCraft.

Say Hej

Putting WooCommerce on a CSS Diet

Woo ships a lot of stylesheet for pages that aren't shops. Here's how we conditionally load it and what broke when we got it wrong.

Written by Tomáš Holub Written by Tomáš Holub Tomáš Holub Theme engineer Tomáš joined the studio in 2017 and owns everything from theme.json architecture to the release pipeline. He maintains the studio's two plugins and runs the accessibility audits. Reviewed by Elizabeth Sramek Reviewed by Elizabeth Sramek Elizabeth Sramek Founder & lead designer Elizabeth started ThemesCraft in 2012 as a one-person theme shop and has designed every theme the studio has released since. She writes about block themes, typography systems, and the unglamorous work of keeping a fourteen-year-old codebase healthy.
Last updated · Published · 1 min read
Putting WooCommerce on a CSS Diet

On a content-heavy site with a small shop, WooCommerce's default styles load on every page — including the ones with nothing to sell.

Dequeue, then re-enqueue deliberately

add_filter( 'woocommerce_enqueue_styles', function ( $styles ) {
    if ( is_woocommerce() || is_cart() || is_checkout() ) {
        return $styles;
    }
    return [];
} );

The trap: mini-cart widgets and product blocks placed in a footer or on a landing page. Check for those blocks before you strip the styles, or you'll ship an unstyled cart to the one page that converts.

Results

182kb removed from every non-shop page, and a 0.4s improvement in Largest Contentful Paint on the blog index.