Storefront child theme still load parent CSS

Question

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?

Answer 1

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

Answer 2

As of Storefront 2.5.8, released 07 July 2020, the means by which to dequeue the Storefront parent theme stylesheet/s have necessarily changed due to Pull request #1369.

This commit establishes the Storefront stylesheet's (handle-name | path/to/file.css):

• storefront-style | wp-content/themes/storefront/style.css and
• storefront-icons | wp-content/themes/storefront/assets/css/base/icons.css

as explicit dependencies of storefront-woocommerce-style | wp-content/themes/storefront/assets/css/woocommerce/woocommerce.css.

This change was made so that child theme's could define storefront-woocommerce-style as a dependency, without the risk of breaking the ordering of other Storefront stylesheets, and without the need for setting a higher priority to that enqueued dependency to mitigate such breakages - per Issue #1299.

Due to this dependency, any attempt to simply dequeue the storefront-style stylesheet (or storefront-icons) now will not work (no matter the priority set). You must first redefine/reset the dependencies of storefront-woocommerce-style, then with a high priority, any removed dependencies can be dequeued.

Per the below example;

1. First enqueue the woocommerce style with only the icons as a dependency,
2. Then enqueue your child style, and
3. Lastly the storefront style is dequeued.

In this example I have deliberately queued my child style after woocommerce, as I have overridden some woocommerce styles within my own (if an even lower priority was needed - I could put it in the dequeue_styles function instead). If this is wasn't the case, and my child style was simply a direct replacement for the storefront style, I could have simply made it another dependency of woocommerce, with the icons styles - array( 'storefront-child-style', 'storefront-icons' ). Or if your child style has replaced both the woocommerce and storefront styles, remove all dependencies from woocommerce, then make the icons a dependency of your child style, then remove woocommerce along with the storefront style. Etc, etc, etc... adjusting it Ad infinitum, according to your specific needs.

add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_styles() {
    wp_enqueue_style( 'storefront-woocommerce-style', get_template_directory_uri() . '/assets/css/woocommerce/woocommerce.css', array( 'storefront-icons' ), $storefront_version );
    wp_enqueue_style( 'storefront-child-style', get_stylesheet_directory_uri() . '/style.css', '', $storefront_version );
}

add_action( 'wp_enqueue_scripts', 'dequeue_styles', 99 );
function dequeue_styles() {
    wp_dequeue_style( 'storefront-style' );
}