Warehouse theme - How to hide price in search bar preview

Solved
thinkbot
Tourist
8 0 1

I'm using the Warehouse theme and I want to hide the price of certain products in my store. I have created a modified product template for these products and I have successfully replaced the price with "Contact us for price" on the product page and product list view. However, when using the search bar, the results are previewed with their price.

 

Which liquid file controls the preview bar of the search results?

 

Thanks!

 

0 Likes
Anonymous
Not applicable
1629 0 0

It sounds like this might be a theme-specific feature. Are you willing to share the name of your theme and/or your store URL?

 

If there isn't a user option to change this the code can always be changed to accommodate what you're asking for.

thinkbot
Tourist
8 0 1

Hi Paul, thanks for the quick response. The website is www.thinbotsolutions.com and I'm using the Warehouse theme by Maestrooo. The theme doesn't have a built-in way to hide the prices of certain products, so I've achieved everything by modifying the liquid code and pointing the specific products to a modified products template. You can see an example of a product where I've hidden the price here and another product with visible price here. If you type "ur3e" in the search bar, you will see three preview products where the price of $0 will show for the UR3e product.

 

I think I'll be able to hide the price if I know which liquid file is defining how the preview results are displayed. I just don't know which file it is. Or could it be somewhere in the CSS code?

 

Thanks again!

0 Likes
Anonymous
Not applicable
1629 0 0

You could try adding this to your theme.liquid file:

<style>
.search-bar__item-price {
    display: none;
}
</style>

This will just ensure the element doesn't appear on the page.

 

If you only want this to appear at times, you can use conditional statements to apply it appropriately.

0 Likes
thinkbot
Tourist
8 0 1

Thanks Paul! When I insert your snippet it removes all prices from the search bar preview so we're almost there. However, I've tried to condition the complete statement or just parts of it and it keeps showing the prices whatever I do. Here's an example:

 

<style> .search-bar__item-price {
  {% if template contains 'requires-contact' %}
  	display: none;
  {% else %}
  	display: all;
  {% endif %}
}
</style>
(The name of the template for the products with hidden prices is "product.requires-contact.liquid").
 

Any suggestions on how to wrap the conditional statement?

 

Thanks!

0 Likes
Anonymous
Not applicable
1629 0 0

This is an accepted solution.

@thinkbot Oh I see now, you only want it to appear with certain products.

 

The 'if template' content basically translate to "if the template being rendered is..." and since it's returning a product object, not rendering the product template, then it will return false.

 

Do these products have a tag in common?

 

Perhaps you could use something like this:

 

{% for tag in product.tags %}
    {% if tag contains 'wholesale' %}
        <!-- Search bar item price -->
{% break %} {% endif %} {% endfor %}

 

 

This will check the tags for the product returned, but the thing is if you wrap the style here it will apply to everything since you're targeting the CSS class that all of the item prices have - that's why the code takes all of them out (sorry if I misunderstood!).

 

I think in this instance it would be better to dynamically apply a class to these items by selecting a product tag and use a variation of the other code to let just those items be invisible.

 

To do this, you'll want to locate the file containing the elements to display search results and maybe add a class like this (this should work if the product object is being returned, otherwise you might let someone take a look at the theme code):

Before:

 

<span class="search-bar__item-price">
<!-- $ Price info --> </span>

After:

 

 

<span class="search-bar__item-price {% for tag in product.tags %}{% if tag contains 'my-wholesale-tag' %}hide-me{% break %}{% endif %}{% endfor %}">
    <!-- $ Price info -->
</span>

 

 

And then you can add the CSS to your theme.liquid file:

 

<style> 
.hide-me {
  	display: none;
}
</style>

 

 

And then this should take care of only hiding the wholesale item prices, if the product is being passed in there's a chance you might have to change the variable name but the rest should work.

thinkbot
Tourist
8 0 1

Hi Paul,

 

Thanks - your suggestion worked!!!

 

I searched my liquid files for the "search-bar__item-price" class and I finally found it used in "search.ajax.liquid". This is how it was used:

 

 

<span class="search-bar__item-price" data-money-convertible>{{ item.price | money_without_trailing_zeros }}</span>

I tried inserting your code, but it didn't work until I changed "product.tags" to "item.tags". This is how it ended up working:

 

<span class="search-bar__item-price {% for tag in item.tags %}{% if tag contains 'hide-price' %}hide-me{% break %}{% endif %}{% endfor %}" data-money-convertible>{{ item.price | money_without_trailing_zeros }}</span>

It would have been cool to have used the product template as the condition in the statement, but since that's not possible I might use my new "hide-price" tag in a conditional statement in the default product template instead of pointing the products to a different template.

 

Thanks again, Paul - you were very helpful!

 

EmpireDrone
New Member
9 0 0

Hi Thinkbot,

I'm trying to achieve the same thing but am getting hung up on what to add into the modified product template to hide the prices. Could you share how you did this?

Thanks!

0 Likes
thinkbot
Tourist
8 0 1

Hi EmpireDrone,

If you're not using the Warehouse theme, I'm not sure how much sense this makes, but here's how I did it.

First, make a copy of these three liquid files:

  1. product.liquid
  2. product-template.liquid
  3. product-info.liquid

Name the copies something meaningful - in my case I added "requires-contact" to each name so my three new files were named:

  1. product.requires-contact.liquid
  2. product-template-requires-contact.liquid
  3. product-info-requires-contact.liquid

Now, it's time to modify the three files to make them hide the price.

The only change you need to make to product.requires-contact.liquid is change {% section 'product-template' %} to {% section 'product-template-requires-contact' %}.

In product-template-requires-contact.liquid you need to change {% include 'product-info' %} to {% include 'product-info-requires-contact' %} on line 68 and 374.

Now, product-info-requires-contact.liquid is the file that determines how the price is shown on the product page, so the main change I did was change line 282-290 from

          <div class="product-form__info-content">
            <div class="price-list">
              {%- if selected_variant.compare_at_price > selected_variant.price -%}
                <span class="price price--highlight" data-money-convertible>{{ selected_variant.price | money_without_trailing_zeros }}</span>
                <span class="price price--compare" data-money-convertible>{{ selected_variant.compare_at_price | money_without_trailing_zeros }}</span>
              {%- else -%}
                <span class="price" data-money-convertible>{{ selected_variant.price | money_without_trailing_zeros }}</span>
              {%- endif -%}
            </div>

to

          <div class="product-form__info-content">
        
<strong>Contact us for price</strong>          

{% comment %}
            <div class="price-list">
            </div>           
{% endcomment %}

I also commented out the code for the product-form__payment-container (line line 378-396) and added the code for the contact form template.

To remove the price from the list and grid pages you will also have to modify the product-item.liquid file. What I did was add the following code below the <div class="product-item__price-list price-list"> line (it's starting at line 118 in my code):

{% assign hide_price = false %}          
{% for tag in product.tags %}{% if tag contains 'hide-price' %}{% assign hide_price = true %}{% break %}{% endif %}{% endfor %}          
         {%- if hide_price -%}
		  <strong>Contact us for price</strong>
      	 {%- else -%}

So inserted the section should look something like this:

        <div class="product-item__price-list price-list">
{% assign hide_price = false %}          
{% for tag in product.tags %}{% if tag contains 'hide-price' %}{% assign hide_price = true %}{% break %}{% endif %}{% endfor %}          
         {%- if hide_price -%}
		  <strong>Contact us for price</strong>
      	 {%- else -%}
          {%- if product.price < product.compare_at_price -%}

As you can see, I'm removing the price from products that use the "hide-price" tag that I created. There might be a way to look for the products that use the modified product template, but I wasn't able to make that work - so I went with creating the additional tag.

So, now you just need to make sure that all your products point to the modified product template and make sure to add the "hide-price" tag to each product too.

Good luck - let me know how it works!

- Philip

0 Likes
EmpireDrone
New Member
9 0 0

Thank you thinkbot!

Almost there! Everything is working except when I insert the code into the product-item.liquid file to hide the prices on the list and grid pages I am getting a syntax error; "Line 157 — Liquid syntax error: 'endcapture' is not a valid delimiter for if tags. use endif." The last two lines of code below are lines 156 and 157.

 
 <div class="product-item__price-list price-list">
          {% assign hide_price = false %}          
{% for tag in product.tags %}{% if tag contains 'hide-price' %}{% assign hide_price = true %}{% break %}{% endif %}{% endfor %}          
         {%- if hide_price -%}
  <strong>Contact us for price</strong>
      {%- else -%}
          {%- if product.price < product.compare_at_price -%}
            {%- if product.compare_at_price_varies -%}
              {%- capture price_min -%}<span>{{ product.price_min | money_without_trailing_zeros }}</span>{%- endcapture -%}
              {%- capture price_max -%}<span>{{ product.price_max | money_without_trailing_zeros }}</span>{%- endcapture -%}
              <span class="price price--highlight">{{ 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max }}</span>
              <span class="price price--compare">{{ product.compare_at_price_min | money_without_trailing_zeros }}</span>
            {%- else -%}
              <span class="price price--highlight">{{ product.price | money_without_trailing_zeros }}</span>
              <span class="price price--compare">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
            {%- endif -%}
          {%- elsif product.price_varies -%}
            {%- capture price_min -%}<span>{{ product.price_min | money_without_trailing_zeros }}</span>{%- endcapture -%}
            {%- capture price_max -%}<span>{{ product.price_max | money_without_trailing_zeros }}</span>{%- endcapture -%}
            <span class="price">{{ 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max }}</span>
          {%- else -%}
            <span class="price">{{ product.price | money_without_trailing_zeros }}</span>
          {%- endif -%}
        </div>

        {%- if product.selected_or_first_available_variant.unit_price_measurement -%}
          <div class="product-item__price-info">
            <div class="unit-price-measurement">
              <span class="unit-price-measurement__price">{{ product.selected_or_first_available_variant.unit_price | money_without_trailing_zeros }}</span>
              <span class="unit-price-measurement__separator">/ </span>

              {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
                <span class="unit-price-measurement__reference-value">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
              {%- endif -%}

              <span class="unit-price-measurement__reference-unit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
            </div>
          </div>
        {%- endif -%}
      {%- endcapture -%}
Also, how did you replace the add to cart with the contact form?
 
Thanks so much! This has saved me hours of searching for another solution for the Warehouse theme.
-Sean
0 Likes