Breakdance Builder Remove WooCommerce CSS on Non WooCommerce Pages

Firstly let me start by saying I’m a fan of Breakdance builder for web design. It’s fast, intuitive and has great development team behind it.

That being said, I like to ensure that my websites are only loading CSS files when they’re required. This applies to my use of WooCommerce. Breakdance builder has excellent default styling for WooCommerce but unfortunately the breakdance-woocommerce.css file loads on every page regardless of whether the page contains WooCommerce functionality.

The breakdance-woocommerce.css comes in at 227kB which in my opinion is a target for optimisation.

For anyone struggling to remove this near 1/4 MB file when not on WooCommerce pages, it does not use wp_enqueue_scripts to add the style and therefore the action can’t be used to remove it.

This is a little disappointing because it’s a relatively large CSS file, it’s loading on non-woocommerce pages and most developers will assume they can dequeue the script using the standard WordPress dequeue actions.

Breakdance renders this script in the head during the template_include action.

I’ve included some sample code below that will help you to ensure that the script only loads on WooCommerce pages:

Load the class for use in your code.

use Breakdance\GlobalDefaultStylesheets\GlobalDefaultStylesheetsController;

Hook into the template_include action

add_action('template_include', 'remove_breakdance_woocommerce_stylesheet', 100);

Remove the stylesheet on non WooCommerce pages

function remove_breakdance_woocommerce_stylesheet() {

        if( !is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page() && !is_shop() ) {   

            $controller = GlobalDefaultStylesheetsController::getInstance();

            // Loop through the array and remove the URL if it contains 'breakdance-woocommerce.css'
            foreach ($controller->stylesheetUrls as $key => $url) {
                
                if (strpos($url, 'breakdance-woocommerce.css') !== false) { // Check if the URL contains the specific string

                    unset($controller->stylesheetUrls[$key]);
                }
            }

        }        

    }