How to override enqueued styles using a child theme

2 comments

1. 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.

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()
   }
   

Comments are closed.