Return to previous page

Modify add to cart button for out of stock products

This topic has 4 replies, 2 voices, and was last updated 3 years ago ago by Rose Tyler

AndreasSym

Participant

December 11, 2021 at 09:01

Hi,
I want to change the background color and the text of the add to cart button if the product is out of stock.
I used some filter hooks in order to change the text but they changed only the label.

#311561 Copied Theme version: 8.0.10

3 Answers

Rose Tyler

Support staff

December 11, 2021 at 09:52

Hello,

Thanks for using XStore.
Provide URL of your product with such a button, and we will help you using custom CSS code.

Regards

#311576 Copied

AndreasSym

Participant

December 12, 2021 at 19:08

Hi,

the first product on this page is out of stock. https://lacorcava.gr/product-category/%ce%b1%cf%80%ce%bf%cf%83%cf%84%ce%ac%ce%b3%ce%bc%ce%b1%cf%84%ce%b1/%cf%84%cf%83%ce%af%cf%80%ce%bf%cf%85%cf%81%ce%bf/

I want to change the background color and the text of the add to cart button.
Thanks in advance,
Andreas

#311683 Copied
Rose Tyler

Support staff

December 13, 2021 at 08:28
Hello,

Add the next code in Theme Options > Theme custom CSS:
```
.outofstock .button {
    background-color: red !important;
    border-color: red !important;
}
```
Do you use the Loco Translate plugin to translate the site? As we can see the button show not “Read more” text but the translation of it, so just change the translation text.

Regards
#311699 Copied
Tagged: button, cart, modify, out of stock, themes, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘Modify add to cart button for out of stock products’' has been successfully resolved, and the topic is now closed for further responses

Modify add to cart button for out of stock products

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection