hide add to cart buttons when sold out / zero stock

Store Design
1

HI there,

I would like to only show my ‘back in stock’ button when the stock is at zero, and hide the other two.

I tried below code but it only hides the button on the right:

{% if product.available %}

{% else %}

{% endif %}

Screenshot 2024-12-05 at 10.25.24.png
Screenshot 2024-12-05 at 10.25.24.png616×449 22.1 KB

website (or any t-shirt from ‘merch’ collection)

password: chaos

is there anything else I can try?

Thanks!

2

Hi @INFRA

Please kindly add this code

button.add-to-cart-btn {
    display: none !important;
}

in this position

https://img001.prntscr.com/file/img001/3zwb2uqcQsWxB325ZsB89g.png

I hope this helps

Best,

Daisy

3

HI daisy,

I tried this but now the buttons aren’t showing when the stock is 1+. Is there something else I can try?

example of 1 available without buttons

Thank you!

4

hi @DaisyVo

HI daisy,

I tried that but now the buttons aren’t showing when the stock is 1+. Is there something else I can try?

example of 1 available without buttons

Thank you!

5

Hi @INFRA

Please share with me the screenshot of the code you added?

Best,

Daisy