Give priority to child theme stylesheet

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

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.