Hide some product's price on my collection pages

[Tho1]

Hello,

I am facing a particular challenge :

My store sells some products available in low quantity and the customers have to make an appointement with my team before buying it.

A shopify expert already created a special product-template that displays a contact us button instead of a add to cart button or buy button. I managed to understand it's code and hide the price. The price is now hidden on product pages but now I have to hide it on my collection pages as well.

By looking at the code, I understood that in order to change the product section on collection pages, I have to modify the product-item.liquid file. I am using the theme Prestige.

At first I thought about adding a tag "Hide" to these products and added this code in product-item.liquid :

{% if product.tags contains "Hide" %}
<style>
  .Price {
  display: none;
}
</style>
{% endif %}

I checked on my collection page and noticed that it was hiding the price of all products instead of only the ones with the tag "Hide". When I check on another collection page with no product with this tag, the prices appear. Meaning that with this code : if the collection page has a single product with the tag "Hide", every price would be hidden without exception and that's not what I was looking for.

Another solution for me would be to separate all the limited products with the tag "Hide" from classical products and reunite them into one collection so this way their price would be hidden without impacting the other products.

I still want to ask if someone knows the good code for my problem so I won't have to reunite all the limited product into one collection?

The best case would be that every product with the tag "Hide" would display the text "Price on demands only" instead of the price on hover on collection pages.

[gina-gregory · Accepted solution]

Open the 'product-item.liquid' snippet and look for where the product price is output, and then wrap it with an 'unless' statement like this:

{% unless product.tags contains 'Hide' %}
  <div class="ProductItem__PriceList  Heading">
      ...
  </div>
{% endunless %}

[JHKCreate]

Hi @Tho1 

This "The best case would be that every product with the tag "Hide" would display the text "Price on demands only" instead of the price on hover on collection pages." would be easily implementable.

Let me know if we can request collaborator access so we adjust this for you switfly.

Cheers!

[gina-gregory · Accepted solution]

Open the 'product-item.liquid' snippet and look for where the product price is output, and then wrap it with an 'unless' statement like this:

{% unless product.tags contains 'Hide' %}
  <div class="ProductItem__PriceList  Heading">
      ...
  </div>
{% endunless %}

[Tho1]

Thank you very much gina-gregory, it did the trick pretty well! My collection pages are not displaying the prices of the product with the tag Hide anymore. And that's great.

Is there also a way to display the sentence "Price on demand only" to fill the blank? That would be a bonus.

When I put :

{% if Product.tag contains "Hide" %}
<div class="ProductItem__PriceList Heading">Price on demand only</div>
{%- endif -%}

or

{% if Product.tag contains "Hide" %}
<span class="ProductItem__PriceList Heading">Price on demand only</span>
{%- endif -%}

it doesn't work.

[gina-gregory · Accepted solution]

Try this:

{% if product.tags contains 'Hide' %}
  <div class="ProductItem__PriceList  Heading">
      Price on demand only
  </div>
{% else %}
  <div class="ProductItem__PriceList  Heading">
      ... code for price output
  </div>
{% endif %}

[Tho1]

It worked. You really know your stuff!

Again, thank you gina-gregory.

[claudiamss]

Hello! I'm facing quite the same problem on Narrative theme, do you think the code could work there? i have some products that can't have a fixed price, customers need to talk with us before the purchase. I'm trying to fix that but I'm not so good at that 

[HTHannah]

Hi there, I'm trying to create the same solution that Tho1 was aiming for but I'm not seeing the same success. 

I want to showcase on my site inventory that is "coming soon" along with inventory already available. I have successfully removed the "add to cart" feature from my "coming soon" items using another thread, but when browsing the grid pages of the store, my "coming soon" items still display a price below the title. I would like the price to disappear altogether if it is "coming soon" and cannot be added to cart on the product page so that customers can expect not to be able to purchase it as their browsing, not just when the ultimately click on the item. A couple ways I image this could work would be to 1.) $0.00 out the price and include code somewhere that removes the visible price in the browsing grids of collection pages if the price is zero 2.) include a tag on the listing like "coming soon" and have the price removed from the collection page grid if said tag is applied or 3.) using either conditions 1 or 2 but changing the 'price' below the title to the words "coming soon, please contact" instead of the dollar amount.

I've tried both solutions offered to Tho1 and included my own "coming soon" words, but can't get anything to work. I'm not sure if I'm plugging the code into the wrong spot or what. I can't find the product-item.liquid file or snippet, so I was trying to use the product-grid-item.liquid and product-unit-price.liquid snippets to no avail. I am using the Minimal theme 

Thoughts? 

I really appreciate the help, thank you. 

[obxac]

How can I do this on Dawn theme? I want to hide some of product's prices on my collection page I dont want to hide all of my products prices. 

[ambercherie]

Hi @obxac, I am also using the Dawn theme, did you find a solution?

[Vincent_LYTD]

Hello Gina, If found your solution and I have a similiar problem. I use the Impact Theme. I can not find the  'product-item.liquid' snippet but insted I think I have to edit the  'product-card.liquid' snippet. I've added your code there, buts not Working.

{% unless product.tags contains 'Hide' %}
<div class="ProductItem__PriceList Heading">
...
</div>
{% endunless %}

because now for every product the "..." are showen. I don't know how to find the position where the price is output. Hope you can help 

[Babu2021]

Hi @Tho1, 

Could you share how you managed to hide the product prices on the product pages? I am struggling to find a solution for this for 2.0 themes...