Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm creating a child theme (My first in over 3 years) of a WooCommerce theme and I'm having some trouble with the fact that some of the layout styles are enqueued in the parent theme and I'm having to add !important to all the styles I want to override.

This is the current enqueue code in the parent themes functions.php;

if ( ! is_admin() ) { add_action( 'wp_enqueue_scripts', 'woo_load_frontend_css', 20 ); }

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
function woo_load_frontend_css () {
    wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );
    wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' );
    wp_enqueue_style( 'theme-stylesheet' );
    wp_enqueue_style( 'woo-layout' );
} // End woo_load_frontend_css()
}

What I need to do is load the child theme css AFTER the layout.css file loaded by the parent theme.

share|improve this question

2 Answers 2

Because the Woo function is wrapped in if( ! function_exists('function_name') ) you can override the function in your child theme's functions.php file.

Add the function to the file and then adjust the queue order to load style.css after layout.css.

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
    function woo_load_frontend_css () {
        wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );
        wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' );

        wp_enqueue_style( 'woo-layout' );

        //load stylesheet after layout.
        wp_enqueue_style( 'theme-stylesheet' );

    } // End woo_load_frontend_css()
}
share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.