How to override enqueued styles using a child theme

by

I had the same problem and epilektric’s answer put me in the right path.

I am using “function” wootheme and it needs to load the parent style.css before another parent css called layout.css. So this order needs to be kept when loading the child theme’s style.css.

So basically, to avoid using !important to override all styles we need to load style files in the following order:

  1. Parent theme’s style.css
  2. Parent theme’s layout.css
  3. Child theme’s style.css

To achieve that, we need to change:

  1. Child theme’s style.css
  2. Child theme’s functions.php

Child theme’s style.css

Change this file to import both parent theme’s css files in the right order:

@import url("../function/style.css");
@import url("../function/css/layout.css");

Child theme’s functions.php

Then add this to your functions.php to avoid re-loading layout.css (woo-layout) and to avoid loading child theme’s css (style.css):

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
    function woo_load_frontend_css () {
        // comment this, as we will be loading this css with a different priority
        //wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );

        // we can register the style here for future manipulation...
        wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' );

        // comment this, as we will be loading this css with a different priority
        //wp_enqueue_style( 'theme-stylesheet' );

        // ... but we will not be enqueuing it, instead we will import it in the child theme's style.css
        //wp_enqueue_style( 'woo-layout' );
    } // End woo_load_frontend_css()
}

You can also load an empty function like this to achieve the same effect:

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
    function woo_load_frontend_css () {

    } // End woo_load_frontend_css()
}

Then register and add your child theme’s css by adding this to your child theme’s functions.php file right after the previous function woo_load_frontend_css:

function cherrypick_child_enqueue_css()
{
    wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );
    wp_enqueue_style( 'theme-stylesheet' );
}
add_action( 'wp_enqueue_scripts', 'cherrypick_child_enqueue_css', 99 ); // using priority 99 we make sure the child theme style.css will be loaded after all other css

Now all stylesheet files will be loaded in the right order.