Hide “Add to Wishlist” button for out-of-stock products on Shopify

Here’s how to hide the “Add to Wishlist” button of Smart Wishlist for out-of-stock products on Shopify

Assumptions:

• You are using Smart Wishlist app on your Shopify store.
• You are comfortable editing code in your theme files.

Steps:

1. Identify the Wishlist Button Code:
   • Open your Shopify admin and go to Online Store > Themes.
   • Click Actions > Edit code on your active theme.
   • Search for the file that contains the code for your Wishlist button. The file location will vary depending on your theme and the Wishlist app you are using. Look for files named product-template.liquid, product-form.liquid or similar in the “Sections” or “Templates” folder.
   • If the button code already exists in the theme, then locate the code block that generates the Wishlist button and replace it with the code snippet given below. Otherwise you simply need to add the code snippet below .
2. Add the Conditional Statement:
   • Wrap the Wishlist button code with a conditional statement that checks the product’s availability: Code snippet{% if product.available %} [... Wishlist button code ...] {% endif %}
   • This ensures the button is only shown if product.available is true (i.e., the product is in stock).
3. Save and Test:
   • Save the changes to your theme file.
   • Go to your online store and view a product page for an out-of-stock item. The “Add to Wishlist” button should no longer appear.

Code snippet

{% if product.available %}
<div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>
{% endif %}

Important Notes:

• Theme Variations: The exact code and file locations will vary depending on your theme and Wishlist implementation. Refer to your theme’s documentation for specific guidance.
• Smart Buttons: If you are using app’s Auto/Smart buttons to display the Add to Wishlist button, then you simply need to switch to manual button by adding the above code to the theme.