Hide prices on unavailable products on Shopify store

 In this article you'll learn, Hide prices on unavailable products on Shopify store

Differentiate between online and offline items by showing no price and replacing Add to Cart with a contact link.

This modification adds the ability for some of the products in your store to show no price on the Home page, Collection pages, Search results page or any other product areas that you can think of.

The item will not have an Add to Cart button. We can also add a custom contact link that will appear on your product page in place of the price and add to cart buttons for customers to request those details from you.

Editing your theme code to add this feature

In the Snippets directory, find the product-price.liquid file and add the following code at the top of the file:

{%- assign hide_price = false -%}

{% for tag in product.tags %}

  {% if tag == 'hide-price' %}

    {%- assign hide_price = true -%}

    {%- assign hide_price_confirm = 'price not available' -%}

 

  {% endif %}

{% endfor %}




In the same file locate the <dl> tag and add this code to the top of the <dl> tag {% unless hide_price %}. Now locate the ending </dl> tag and add this code after the </dl> tag {% endunless %}
In the Template directory, create a new file called product-requires-contact.liquid and copy the product.liquid from the same directory. Now replace {% section 'product-template' %} with {% section 'product-template-requires-contact' %}
In the Section directory, create a new file called product-template-requires-contact.liquid and copy the product-template.liquid from the same directory. Now locate {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %} and {% endform %}. Now delete all the code inside the form and form tags also. Now add the following code in the place of form tag which you’ve deleted:




<h4> <a style="color:blue; text-transform:uppercase; text-decoration:underline" href="mailto:{{ shop.email }}">ask for price</a> </h4>




In the Theme admin, go to product details and set the template to product.requires-contact, it’ll enable ask for price contact link on the product page. Now add a tag named ‘hide-price’, it’ll hide the price from all the pages