hide add to cart buttons when sold out / zero stock

[INFRA]

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 %}
<style>
quantity-input.quantity {
    display: flex;
}
.shopify-payment-button {
    display: block;
}
</style>
{% else %}
<style>
quantity-input.quantity {
    display: none;
}
.shopify-payment-button {
    display: none;
}
</style>
{% endif %}

 

website (or any t-shirt from 'merch' collection)

password: chaos

is there anything else I can try?

Thanks!

[DaisyVo]

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

[INFRA]

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!

[INFRA]

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!

[DaisyVo]

Hi @INFRA 

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

Best,

Daisy