add to card button different colour depending on if item is in stock

[rlpenluft]

Hi,

is there a way to change the colour of the add to card button depending on if the item is in or out of stock?

https://alpenluft.org/products/fernbedienung-fur-rauch-hitzemelder-funkvernetzt

https://alpenluft.org/products/rauchmelder-standalone-10-jahre-batterie

[Uhrick]

hi RIpenluft, what is your theme? there is a simple code that you can use, but the themes’ structure usually vary, so it’s nice if it’s a free one that I can check the structure to direct you properly

[rlpenluft]

We are using Refresh Theme.

[Dan-From-Ryviu]

Hi @rlpenluft

Yes, it can be

What color do you want to use for the out of stock so I can provide the code?

[Uhrick]

Go here:

And change this:

for this

background-color is for the background color of the button, and ‘color’ is for the font color. You can use color names, but, if that doesn’t work, you can use hexcodes (if you’re not familiar, try googling hexcode red for example)

[rlpenluft]

Great, that worked! can I edit the button style for when the product is available in the same liquid?

[Uhrick]

sure. Something like this

[rlpenluft]

Thank you so much!

Just one more thing, where do I find the css for these quick-add buttons? Couldn’t find them in the liquid:

Thank you!

[Uhrick]

it’s the same structure as the other place, but in this file that you can see the name on the screenshot

[rlpenluft]

Great thank you, I tried it, but somehow the style doesn’t change. Did I do something wrong?

[Uhrick]

hi @rlpenluft , actually, I’m sorry, the error was mine. You have to insert card_product.selected_or_first_available_variant.available == false, and not card_product.selected_or_first_available_variant == false