Show and Hide Add to Cart Button in Shopify Store When Out of Stock

TAKE NOTE: I am not a Shopify Certified Guru by any means. I am not responsible for mistakes you may make while modifying your files. I was able to Show and Hide Add to Cart Button depending on inventory availability. In place of the Add to cart button “Out of Stock” will display.

Insert this code code in the product.liquid file.

NOTE: This may not work for all themes but it does work in the Classic theme.

Find the code in box 1. I found this code in the product.liquid file on about line 65 and replaced this code with the code in Box 2. Save and test.

Box 1

<button type="submit" name="add" id="AddToCart" class="btn">
                        <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
                      </button>

Box 2

{% if variant.available %}
 <button type="submit" name="add" id="AddToCart" class="btn">
   <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
 </button>
{% else %}
   {% comment %}
 <button type="submit" name="add" id="AddToCart" class="btn">
   <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
 </button>
   {% endcomment %}
  <div>Out of Stock</div>
{% endif %}

Change the <div>Out of stock</div>

You can change the div tag to say what ever you like. This also works if you have variants. If certain variants are out of stock they will show out of stock in the dropdown menu and the add to cart button will remain. If all variants are out of stock the “Add to Cart” button will go away and the “Out of Stock” will show in place of the “Add to Cart” button.

Show and Hide Add to Cart Button Example Website

I used it on this site HalloweenJoint.com. Take a look to see exactly how it works and if this is what you are trying to achieve. There are approximately 25,000 items so you may have to click on a few items to find examples. I can’t give you a direct link to any certain out of stock item. Just click around, you’ll find some.

Leave a Reply

Your email address will not be published. Required fields are marked *

one + 4 =