Give priority to child theme stylesheet

Question

I've created a child theme and the main style.css works perfectly fine. However, the parent theme has another stylesheet which I want to import and create the same for child theme and use it instead.

Parent theme structure - ./woocommerce/woo.css
Child theme structure - ./woocommerce/woo.css (Manually created)

Now, I enqueued both the stylesheets in the child theme's function.php as below.

function fruitful_load_parent_stylesheets() {
    wp_enqueue_style( 'layout', get_template_directory_uri() . '/woocommerce/woo.css' );
}
add_action( 'wp_enqueue_scripts', 'fruitful_load_parent_stylesheets' );

function fruitful_load_child_stylesheets(){
    wp_enqueue_style( 'woo', get_stylesheet_directory_uri() . '/woocommerce/woo.css');
}
add_action('wp_enqueue_scripts', 'fruitful_load_child_stylesheets');

Now, if I add a style to the child theme's woo.css, it doesn't work until I !important it.I just don't want to go doing it on every style I add.

is

Answer 1

Your child theme's stylesheet will usually be loaded automatically. If it is not, you will need to enqueue it as well. Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it.

/**
 * Enqueue theme styles (parent first, child second)
 * 
 */
function wpse218610_theme_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/woocommerce/woo.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/woocommerce/woo.css', array( $parent_style ) );
}
add_action( 'wp_enqueue_scripts', 'wpse218610_theme_styles' );

Note: take a look in the Theme Developer Handbook for some extra information.

Answer 2

Perhaps you can try adding a priority value to each add_action to make sure that one executes before the other.

add_action( 'wp_enqueue_scripts', 'fruitful_load_parent_stylesheets', 10 );
add_action('wp_enqueue_scripts', 'fruitful_load_child_stylesheets', 20 );

WordPress Codex add_action()

Answer 3

I got to load child theme later like below. I had to dequeue & deregister parent style, then enqueue parent style & child style. Hope this helps

Parent functions.php has

add_action('wp_enqueue_scripts', 'load_parent_style', 10);
function load_parent_style() {
    wp_enqueue_style('parent-theme-style'); // parent theme code
}

Child functions.php has

add_action('wp_enqueue_scripts', 'load_child_style', 20);
function load_child_style() {
  //register & enqueue parent with new name 
  wp_register_style('parent-style', $url, array($deps));
  wp_enqueue_style('parent-style'); 

  // dequeue & deregister parent's theme handle
  wp_dequeue_style('parent-theme-style'); // from parent theme
  wp_deregister_style('parent-theme-style'); 

  // register & enqueue child style
  wp_register_style('child-style', get_stylesheet_uri(), array('parent-style'));
  wp_enqueue_style('child-style');
}