Changing the Text Colour for “In Stock” & “Only % available”

Hey there, @gkaralov! Thanks for contacting us. I’m happy to help you.

We can share the CSS code to change that ??

But to do that we would need the URL of a product that has the “in stock” message and another one that has the “only %s available” message so we can check the classes on it and make sure we share the correct code.

Can you please share both URLs with us so we can assist you further?

Looking forward to your reply.

Have a wonderful day!

Hi!

Here’s an example product url: https://pastebin.com/2Z5WmSEj

Thank you so much!

?? hey @gkaralov

Thank you for reaching back, with further details on this.

Feel free to target the paragraph element, showcased here, with CSS, for changing its text color.

Kindly note, for anything further, it is best to inquire with the theme’s support channel and/or any block/builder plugin(s) that might be in use.

I trust that points you in the right direction, but if you have more questions, let us know.

We’re happy to help.

Thank you!

The theme support helped me change the color but the problem is that it changed the color for all product statuses:

– In stock
– Only %s available

They said they have no clue how to target each of them to be different color.

Can you help with that?

Hi @gkaralov,

To target each product status separately and assign different colors, you need to use specific CSS classes associated with each status. If you inspect it, you should see a specific CSS class name to target it.

Unfortunately, without the exact details of your theme and your site URL, we can’t provide the precise CSS code. However, the CSS class and code could be something like this:

.stock.in-stock {
color: green;
}

.stock.only-available {
color: red;
}

I hope this provides some clarity. Please let us know if you have any other questions!

Hi,

I inspected the elements and there is only 1 class for both statuses: stock.in-stock

I tried with the CSS you provided but it didn’t work.

Here”s an url of the site to check: https://pastebin.com/S7Lcf8dE

Hi @gkaralov,

This seems to be the default and expected behavior. However, you can customize further by adding an extra class to the stock notice. Here is a resource that might help you further:

• https://stackoverflow.com/questions/49984490/add-an-extra-css-class-for-stock-notice-in-woocommerce-products

Please note that writing or providing custom code is not within the scope of our support policy. If you still need assistance, we recommend asking development questions on the #developers channel of the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question. You can also seek help from the following:

• A local web developer
• Codeable.io
• WooExperts

I wish I could help more, but hopefully, this gets you going in the right direction to get the job done.

Hello,

The Stackoverflow thread helped me! I managed to add an extra class for “only %s in stock”

I adjusted the CSS provided above but it didn’t work:

.stock.in-stock {
color: red;
}

.stock.in-stock.few-in-stock {
color: red;
}

It wasn’t working for the in-stock class even before adding the extra class.

Can you help with the CSS?

Hey, @gkaralov!

I checked your site and it seems there’s something overwriting the CSS code you added.

Can you please try this:

.stock.in-stock {
color: red !important;
}

.stock.in-stock.few-in-stock {
color: red !important;
}

But please note that on the code you shared both classes are set to red, so if you want them to be different colors, make sure to update this on the code ??

Have a wonderful day!

It worked! Thank you so much!
Yes, I adjusted the colors to my liking ??

Hi @gkaralov,

I’m glad we were able to help!

If you have a few minutes, we’d love if you could leave us a review:?https://www.ads-software.com/support/plugin/woocommerce/reviews/