How can I alter the color of the out of stock button?

Store Design
, ,
1

Hi there,

I want to change the color of the button that switches from add to cart to out of stock (Ausverkauft) here:

https://taneraskin.com/products/orange-oat-peeling

How can I display the button as grey as soon as a product is out of stock?

Best,

Isa

2

On line 1457 of base.css add a background-color: gray so that instead of this:

.button:disabled, .button[aria-disabled=true], .button.disabled, .customer button:disabled, .customer button[aria-disabled=true], .customer button.disabled, .quantity__button.disabled {
    cursor: not-allowed;
    opacity: 1;
}

It becomes:

.button:disabled, .button[aria-disabled=true], .button.disabled, .customer button:disabled, .customer button[aria-disabled=true], .customer button.disabled, .quantity__button.disabled {
    cursor: not-allowed;
    opacity: 1;
    background-color: gray;
}
3

Hi again! It worked but I have a problem now because it also affects the - sign of the quantity input field: https://taneraskin.com/products/orange-oat-peeling

How can I make that it doesnt change color when I hover over it and that the - sign is not affected?

4

The minus sign of the quantity input is grayed out because you can’t add a quantity of lower than 1 to your cart. Add 1 to the quantity so that it becomes 2 or more and the minus sign will not be grayed out anymore

5

That’s not what I meant, there is a whole border around the minus sign https://taneraskin.com/products/orange-oat-peeling

6

Look’s like you added a border possibly to that selector:

.button:disabled, .button[aria-disabled=true], .button.disabled, .customer button:disabled, .customer button[aria-disabled=true], .customer button.disabled, .quantity__button.disabled {
    cursor: not-allowed;
    opacity: 1;
    background-color: #fff;
    color: gray;
    border: 1px solid;
}

You can remove the quantity button selector from that list or add a new one that explicitly removes the border just for the quantity button:

.button:disabled, .button[aria-disabled=true], .button.disabled, .customer button:disabled, .customer button[aria-disabled=true], .customer button.disabled, .quantity__button.disabled {
    cursor: not-allowed;
    opacity: 1;
    background-color: #fff;
    color: gray;
    border: 1px solid;
}
button.quantity__button.disabled {
    border: none;
}
1 Like
7

I added the second code thank you!!

Do you also know how the button stays the same when you hover over it?

https://taneraskin.com/products/orange-oat-peeling

8

Remove the !importants from this line:

.button:hover {
    background: #111111!important;
    color: #fff!important;
    border: 1px solid #111111!important;
}

So that it becomes:

.button:hover {
    background: #111111;
    color: #fff;
    border: 1px solid #111111;
}

Make sure to use !important sparingly so it doesn’t cause unforeseen things