Modify add to cart button for out of stock products

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

  • Avatar: AndreasSym
    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.

    3 Answers
    Avatar: Rose Tyler
    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

    Avatar: AndreasSym
    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

    Avatar: Rose Tyler
    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

  • 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

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.