0

I'm using a woocommerce template on my site, when i add some additional CSS it doesn't show but when i put the same code into the customizer - additional css within wordpress it works fine.

I've tested this on the original theme and also made a child theme but still does not work.

Does anybody know whats going on?

Regards, Billy

2
  • Are you maybe adding your markup to style.css so that it gets overridden? If there is other code further down the file that negates your earlier changes, you don't see any effect on your site. You can check this with your browser developer tools. Let me know if any of this is unclear.
    – WSU
    Commented Aug 6, 2019 at 13:37
  • thanks WSU, yes seems code is being overridden but cant see where, can i force my child theme style.css to load last? Commented Aug 7, 2019 at 15:26

1 Answer 1

1

There's nothing special about CSS in WordPress. It follows the same rules of specificity that apply everywhere else. This means that the order of rules are can affect how they're applied.

In WordPress the styles from plugins are typically output after the styles from themes, and styles from Additional CSS are output last. So if you have a CSS selector with the exact same specificity in your theme, a plugin, and the customiser, then the customiser will take precedence over the plugin, which will take precedence over the theme.

So if you need to overwrite some CSS in a plugin from your theme, you need to make the rule more specific.

2
  • Thanks for the reply Jacob that's very handy to know, I cant quite determine where the original css is that's overriding it, seems to work ok if i use '!important'. Commented Aug 7, 2019 at 15:24
  • Would you know if there is anyway where i can force my child theme style.css to output last? Commented Aug 7, 2019 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.