csswordpressstorefront

Storefront child theme still load parent CSS


I have a problem with the Storefront child theme. I created a Storefront child theme like they suggest here: https://docs.woocommerce.com/document/set-up-and-use-a-child-theme/

The child theme works fine, I can write my CSS, write my code inside functions.php and override template files, but the child theme still loads the parent theme CSS.

How I can create a child theme without the parent's CSS loaded?


Solution

  • Add these functions to your child theme's functions.php.

    This code will disable the loading of the Storefront default CSS.

    Source: https://github.com/stuartduff/storefront-child-theme

    /**
     * Storefront automatically loads the core CSS even if using a child theme as it is more efficient
     * than @importing it in the child theme style.css file.
     *
     * Uncomment the line below if you'd like to disable the Storefront Core CSS.
     *
     * If you don't plan to dequeue the Storefront Core CSS you can remove the subsequent line and as well
     * as the sf_child_theme_dequeue_style() function declaration.
     */
    
    add_action( 'wp_enqueue_scripts', 'sf_child_theme_dequeue_style', 999 );
    
    /**
     * Dequeue the Storefront Parent theme core CSS
     */
    function sf_child_theme_dequeue_style() {
        wp_dequeue_style( 'storefront-style' );
        wp_dequeue_style( 'storefront-woocommerce-style' );
    }
    

    Also, you can disable the WooCommerce standard stylesheets,

    Source: https://docs.woocommerce.com/document/disable-the-default-stylesheet/

    /**
     * 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;
    }