- This topic has 5 replies, 2 voices, and was last updated 2 years, 10 months ago by
.
-
Posts
-
Hi! I had my woocommerce edits working, but the found that part of GP pro has a woocommerce module. When I activated it something strange happened.
My css changes that I had in my child theme style.css were working before I activated the module, but now .woocommerce.min.css seems to have a higher priority and reverted a bunch of the changes I already made.
As an example, I had this in my style.css:
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--accent); font-size: 1.5rem; line-height: normal; font-family: lora; }Now that the Woocommerce module is activated these over-wrote my changes:
.woocommerce ul.products li.product .price, .woocommerce div.product p.price { color: #222222; } .woocommerce div.product p.price, .woocommerce ul.products li.product .price { font-weight: 700; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: inherit; }Is there a reason my style.css isn’t highest priority?
Customer Support
Hi Josh,
They have the same Specificity score but you style sheet is loaded prior to WooCommerce module CSS, thus WooCommerce module CSS is the one that takes “priority” per say.
Try adding another selector to your CSS rule to increase its Specificity score.
For instance,
.woocommerce .grid-container div.product p.price, .woocommerce .grid-container div.product span.price { color: var(--accent); font-size: 1.5rem; line-height: normal; font-family: lora; }For more details about Specificity, you can check this article: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hey Fernando. Thanks for getting back to me so quickly. I definitely understand what happened, I’m more wondering why? It didn’t change order until in installed the woocommerce module. It seems strange that it worked fine and now it doesn’t. Wouldn’t it make more sense to keep my style sheet as the top priority?
Are you referring to the Specificity or the loading position?
Specificity-wise, your CSS needs to have a greater score as mentioned to take priority.
By default stylesheets are loaded with a priority of
10. In essence, they have the same priority but CSS-wise, the one that’s loaded last wins if the specificity of the CSS are the same/equal.When you add custom CSS, it’s best practice to assure that you have a high specificity score so that no matter what position the stylesheet loads, your CSS takes priority.
Side note: This isn’t always the case however. Local CSS(if you browser/device for instance has CSS for specific Elements), and inline CSS take priority over CSS added through a stylesheet.
I understand style order and specificity. What I’m asking is why did stylesheet order change when I loaded the module. My stylesheet was overriding the exact woocommerce selectors (I was seeing the changes I wanted my editing my child theme stylesheet.) Nothing else changed except that I turned on the GeneratePress Pro woocommerce module. With that change Priority changed and the woocommerce stylesheet now overrides my child theme stylesheet. That seems counter intuitive and counter-productive. Now I have to go back and make all my selectors more specific because the priority changed.
So I have 2 questions.
1) Why is it coded to change priority order?
2) Is there any way to revert to pre-“woocomerce Module” where my stylesheet was a higher priorty? (Besides the obvious of turning the woocommerce module back off.)1. There’s no change in order. The specific CSS in question is added through
generate-woocommerce-inline-css<style>tags. This style is only added when you activate the WooCommerce Module and shouldn’t exist prior.2. There’s a way. We can increase the Priority of the Child theme style.css. Can you try adding this Snippets in your
functions.phpfile?add_action( 'wp_enqueue_scripts', 'cu_generate_remove_scripts', 9999 ); function cu_generate_remove_scripts() { wp_dequeue_style( 'generate-child' ); } add_action( 'wp_enqueue_scripts', 'cu_generate_move_scripts', 10000 ); function cu_generate_move_scripts() { if ( is_child_theme() ) : wp_enqueue_style( 'generate-child', get_stylesheet_uri(), true, filemtime( get_stylesheet_directory() . '/style.css' ), 'all' ); endif; }
- You must be logged in to reply to this topic.
