Changing Colour of 'SOLD OUT' Button for Variants

Store Design
1

We have recently carried out a couple of coding changes on our site to disable our sold out button (previously we had this set to continue to sell when out of stock and used the sold out button to work as a pre order button but we have now set this back to just a simple unclickable sold out button). Everything seems to be back to normal now, green add to cart button and a red sold out button on single variant products. The problem is that when there is a product that has an instock variant it starts the add to cart button as green with the text ‘add to cart’ but when you change it to a sold out variant it changes the text to ‘sold out’ but doesn’t change the colour to red. Is this something that someone can help point us in the right direction of how to fix this? I can supply any coding that has been done and changes that have been made if required.

Thank you in advance!

2

@tomhorton

Thank you for reaching out and posting this question!
Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hey thank you for your quick reply. Here is a link to our site and a product that is affected:

https://4downdistribution.com/collections/sale/products/tsdo94?variant=39906646491273

If you select the white tee and switch between the different sizes you can see the button colour not changing when selecting a sold out product. Please let me know if this is something that is fixable, appreciate you taking the time to look in to this.

4

It might also be worth noting that when a sold out variant is selected starting from an in stock product the button itself is still clickable and same for starting with a sold out variant and switching to an in stock variant the button is no longer clickable.

5

Hi @tomhorton ,

As we checked your website there is an issue on the coding logics. We need to check the product page code.

6

Hey, thank you for your message. What do you need from us to check this?

7

@tomhorton

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.template-product .btn--sold-out {
    background-color: #9e9e9e!important;
}