Have you ever wondered why your CSS changes are not loading on your site? You want to make some changes in your CSS file but it is not taking effect and not overwriting the default design.
You look back and check if your CSS file is loading or not. You find the file is there in source and have the required snippet added in that file but still, it is not showing on your site.
If you are using WooCommerce with a Genesis child theme, you will have more frustration working with CSS changes because it is not following your CSS.
Why it is not following me?
Do I need to use !important to make it work? Can I use inline CSS? what I do now?
wait…
Adding multiple !important declarations in CSS is a bad practice and should not be recommended in most cases. Inline CSS is bad as the !important rule and should to be avoided. Inline CSS is stored in the database and can slow and mess the site structure.
Okay, What should I do now?
You should to sit back and relax for some minutes. 🙂
While relaxing, you might be interested to know about, how the stylesheet works and why it is not taking your changes.
To override stylesheet the right way, it’s important to understand how CSS styles are loaded and prioritized. There is a simple rule with the stylesheet, later come and get it.
It works on LIFO methodology Last In, First Out (LIFO). If you have styles of the same class defined in multiple CSS files, the style that is loaded last is the one that will be rendered in the browser.
This how it works in real life. You have a book (site) and you want to protect/beautify it using a beautiful cover(style.css file). You have added the cover.
Here how it is
NoteBook |>>Cover 1.
Later or sooner the cover got old and dirty but there is risk removing it so what you have done is added a new cover to the book.
Now how it is
NoteBook |>> Cover 1 >>Cover 2
Again, after some days the cover 2 seems to be bad you want to change the cover. Still, there is a risk and so you have added 3rd cover on the Book.
NoteBook |>> Cover 1 >>Cover 2 >> Cover 3
Now, you want to show it to your friend, which cover he/she will see? It is 3rd one. Why? because the 3rd cover overwrote the old 2 covers.
Here I replace the Cover with the stylesheet.
Cover1 <link rel="old stylesheet" href="path/to/style.css" /> Cover 2 <link rel="newer stylesheet" href="path/to/style.css" /> Cover 3 <link rel="newest stylesheet" href="path/to/style.css" />
Cascading and inheritance also play a role as w3.org explains:
The cascading mechanism is used when a number of style rules all apply directly to an element. The mechanism allows the user agent to sort the rules by specificity, to determine which rule to apply. If no rule can be found, the next step depends on whether the style property can be inherited or not. Not all properties can be inherited. For these properties, the style sheet language provides default values for use when there are no explicit rules for a particular element.
Okay, Got it. How to load my stylesheet at last?
Before answering that, we need to know how Genesis Loads stylesheet.
Genesis renders a page using action ‘genesis_meta‘. Framework executes the genesis_meta action in header.php and function executed is
genesis_load_stylesheet() — Echo reference to the style sheet which enqueue genesis_enqueue_main_stylesheet with a priority of 5.
The genesis_load_stylesheet() function is defined in genesis/lib/css/load-styles.php
It is recommended to make changes to the child theme and not parent theme i.e Genesis. we will leave Genesis without touching.
We will use functions.php of the child theme to increase the priority which will help the stylesheet to load at last.
Add this snippet to your child theme functions.php
//* Load main style sheet at the end //* Remove default style remove_action( 'genesis_meta', 'genesis_load_stylesheet' ); //* Add and Enqueue default style at end add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 20 ); // Load priority
and the result will be something like this.
I don’t use the default style.css of child theme so i manually create a custom.css file and add custom css on that and use the similar snippet to register and enqueue it.
//* Load custom style sheet
add_action( 'wp_enqueue_scripts', 'load_custom_style_sheet', 100 );
function load_custom_style_sheet() {
wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0.0', true );
}
and here is the result.
I recommend you to create a woocommerce-style.css file and use a higher priority to load this file using the above snippet in functions.php of your child theme.
//* Load custom style sheet
add_action( 'wp_enqueue_scripts', 'load_custom_woocommerce_style_sheet', 100 );
function load_custom_woocommerce_style_sheet() {
wp_enqueue_style( 'woocommerce-style', get_stylesheet_directory_uri() . '/woocommerce-style.css', array(), '1.0.0', true );
}
Here, I have given higher ‘100’ priority to custom.css and woocommerce-style.css means it will load after all files under ’99’ is loaded.
Priority
(int) (Optional) Used to specify the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action. – WordPress Codex
Still in rest mode? Wake up, Go and try this on your test site. 🙂
Aditional:-
Using this in functions.php
//* Load main style sheet after WooCommerce */
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 30 ); //change load priority
//* Load custom style sheet
add_action( 'wp_enqueue_scripts', 'load_custom_style_sheet', 80 );
function load_custom_style_sheet() {
wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0.0', true );
}
//* Load custom WooCommerce stylesheet
add_action( 'wp_enqueue_scripts', 'load_custom_woocommerce_style_sheet', 100 );
function load_custom_woocommerce_style_sheet() {
wp_enqueue_style( 'woocommerce-style', get_stylesheet_directory_uri() . '/woocommerce-style.css', array(), '1.0.0', true );
}
will give the result like this
<link rel='stylesheet' id='genesis-sample-css' href='https://genesis-sample.test/wp-content/themes/genesis-sample/style.css?ver=2.6.0' type='text/css' media='all' /> <link rel='stylesheet' id='custom-stylesheet-css' href='https://genesis-sample.test/wp-content/themes/genesis-sample/custom.css?ver=1.0.0' type='text/css' media='1' /> <link rel='stylesheet' id='woocommerce-style-css' href='https://genesis-sample.test/wp-content/themes/genesis-sample/woocommerce-style.css?ver=1.0.0' type='text/css' media='1' />
and default WooCommerce stylesheets will load before it so you have now full control over your CSS files.
Thank you very much! Nice explanation!