WooCommerce css changes

[candacegodwin]

Hi,

I'm fairly new at customizing css, but have been successful to this point. I am working with the Jessica Pro Theme with WooCommerce fully installed. I've made several changes to the css, but am stumped by not being able to find the css to change the color of the text for "In Stock."

When I inspect with Google, I am able to see the code and the hex color - however, when I try to find this in the css editor, it's nowhere to be found.

Below is the code. I've even searched the css for the color #77a464 and that color doesn't come up in the search of the entire style sheet. Where is this code residing? Is there a separate woocommerce css editor?

Any insight or shove in the right direction would be greatly appreciated!

element.style {
}
woocommerce.css?ver=3.1.2:1
.woocommerce div.product p.stock {
font-size: .92em;
}
woocommerce.css?ver=3.1.2:1
.woocommerce div.product .stock {
color: #77a464;

https://livingearthnaturals.com

[Erika]

Hi Candace,

Put that code somewhere inside your CSS where you can easily find it and make the changes you want. Then, follow up the changes with an !important designation, like so:

.woocommerce div.product .stock {
color: #fff !important;
}

Change the hex value accordingly. Let me know if this helps!

[candacegodwin]

Thank you! It worked like a charm. Appreciate your quick response. Still confused as to why this code appears "hidden" but adding it to the css worked. So much more to learn and understand! Thank you again for your help. Candace

[Erika]

You can find the original code in the Woocommerce plugin in files, but doing it this way allows for easy access and editing 🙂

[candacegodwin]

Thank you! I really appreciated your help and follow up. Best to you, Candace

[Author]

Posts