How can I alter the 'add to cart' button for out of stock items?

Store Design
1

I have a buy now / add to cart button on my collections page, but when a product is out of stock it still says buy now and allows the customer to add the item to their cart. How can I change this please? It changes on the product page.

I have searched and read various threads but still can’t find the answer.

I’m using the classic theme.

link to show what I mean

I’m assuming its this bit of code that needs an if else statement adding, I just don’t know how to write that code

 <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <input type="submit" value="Buy now" class="btn" />
  </form>
2

ok, i can fix this issue for free.
-add me as a staff in your store.

email: candisoft100@gmail.com
-you can trust me as i am one of the top 5 authers of shopify which you can confirm in this page at the bottom ,where you can find my name candiSoft

Give me a like and mark as accepted solution.

Thank You

1 Like
3

Try this out:

<form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <input type="submit" value="{% if product.variants.first.available%}Buy now{% else %}Sold Out{% endif%}" class="btn" {% unless product.variants.first.available %}disabled{% endunless %} />
  </form>
5 Likes
4

done that

5

Looks like it worked : D

6

Thank you so much, that worked perfectly.

I was replying to the other post with my previous post, and hadn’t seen your reply.

7

Hello Ninthony,

I am new in Shopify and I am having this issue in my collection page.

Would you please tell me where can I add this code?

8

Solved!

9

Hi Ninthony,

We use the Prestige theme… How do we change the “ADD TO CART” text and change to “PRE-ORDER” when product is out of stock?

Thanks!

10

Hey, I’ve got the same issue with a new theme can you help?

11

Hey there I am having this issue and tried a few ways but still couldn’t resolve it. Any chance you can give me a hand on this? Many thanks.

12

Hi Zee5, Could you please tell me where you entered the code for change add to cart button when sold out?

Kind regards, MBO

13

@My_Baby_Organic I am using an app named Add to cart button - Nice it has the built-in feature.

14

It´s great! please, could you tell me how to change his button properties? color, size, position… thanks in advance.

15

All these features are available in an app that I am using named “Add to Cart Button - Nice”

16

What file does this code belong in? Thanks for any help you can provide.

17

Hello,

I’ve tried your exact code but it did not work. It shows the Sold Out button for all products.
Here are the codes. Could you advise how to fix?

18

product-card.liquid

I followed the instruction here: https://community.shopify.com/c/technical-q-a/add-to-cart-button-on-collection-pages-dawn-theme/td-p/1334844

19

Hello - how can this solution work when some variants are still in stock?