Docs

[eyedia]

I’m trying to over write some things in my child theme stylesheet, but I am not able to with woocommerce elements. I want it to use the woocommerce style first and then my custom styles to over write where needed. Please let me know what I’m missing to achieve this.

Thank you

[Rue Nel]

Hello There,

Thanks for writing in! Before anything else, please understand first the order of the styles being implemented in X.
– Global Stylesheet (X Stack style)
– Child theme’s style.css
– Customizer’s custom css
– Cornerstone’s custom css

And so if you want to place your customizations in the child theme, most probably, it is being overridden by the customizer’s custom css. To avoid this from happening, you must use css selector hierarchy. It looks like this:

.x-child-theme-active element {
  // your styling
}

By adding the x-child-theme-active class will make sure that your custom css will be followed and not the custom css you have in the customizer that has only this code:

element {
  // your styling
}

Hope this make sense.

[eyedia]

Perfect! Makes total sense! Thank you so much for your very clear explanation. I now have all my custom wooCommerce CSS loading with priority.

🙂

[Paul R]

You’re welcome! 🙂

[Author]

Posts