Re: Hide price when zero using liquid

Solved

How can I hide a product's price when it's set to zero using liquid?

TFT-MICRO
Tourist
4 1 1

Hi Everyone!

 

I have been back and forth trying to hide the price section when a product price is set to zero. I am using the Warehouse theme and have played around with different codes, but nothing seems to work. Here is a screenshot of what I would like to hide

 

priceprintscreen.png

I Under snippets, I have the following code:

 

<div class="product-item__info">
<div class="product-item__info-inner">
{%- capture price_list -%}
<div class="product-item__price-list price-list">
{%- if product.price < product.compare_at_price -%}
{%- if product.price_varies -%}
{%- capture price_min -%}<span>{{ product.price_min | money }}</span>{%- endcapture -%}
{%- capture price_max -%}<span>{{ product.price_max | money }}</span>{%- endcapture -%}
<span class="price price--highlight">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
</span>

<span class="price price--compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
{{- product.compare_at_price_min | money -}}
</span>
{%- else -%}
<span class="price price--highlight">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- product.price | money -}}
</span>

<span class="price price--compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
{{- product.compare_at_price | money -}}
</span>
{%- endif -%}
{%- elsif product.price_varies -%}
{%- capture price_min -%}<span>{{ product.price_min | money }}</span>{%- endcapture -%}
{%- capture price_max -%}<span>{{ product.price_max | money }}</span>{%- endcapture -%}

<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
</span>
{%- else -%}
<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- product.price | money -}}
</span>
{%- endif -%}
</div>

 

I have tried unless/if statements to hide the code when prices are "0" with no luck. Am I looking in the right snippet? Any help would be greatly appreciated!!!

 

-TFT

Accepted Solution (1)
TFT-MICRO
Tourist
4 1 1

This is an accepted solution.

I figured out a solution. I added these tags to the product-info.liquid file:

 

{%- unless product.price == 0 -%}
{% endunless %}

 

<div class="product-form__info-list">
        <div class="product-form__info-item">
      {%- unless product.price == 0 -%}
          <span class="product-form__info-title text--strong">{{ 'product.form.price' | t }}</span>
        {% endunless %}
          <div class="product-form__info-content" role="region" aria-live="polite">
            <div class="price-list">
      {%- unless product.price == 0 -%}
              {%- if selected_variant.compare_at_price > selected_variant.price -%}
                <span class="price price--highlight">
                  <span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
                  {{- selected_variant.price | money -}}
                </span>

                <span class="price price--compare">
                  <span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
                  {{- selected_variant.compare_at_price | money -}}
                </span>
              {%- else -%}
                <span class="price">
                  <span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
                  {{- selected_variant.price | money -}}
                </span>
              {%- endif -%}
        {% endunless %}
            </div>

            <div class="product-form__price-info" style="display: {% if selected_variant.unit_price_measurement %}block{% else %}none{% endif %}">
              <div class="unit-price-measurement">
                <span class="unit-price-measurement__price" {{ selected_variant.unit_price | money }}</span>
                <span class="unit-price-measurement__separator">/ </span>

                <span class="unit-price-measurement__reference-value" {%- if selected_variant.unit_price_measurement.reference_value == 1 -%}style="display: none"{% endif %}>
                  {{- selected_variant.unit_price_measurement.reference_value -}}
                </span>

                <span class="unit-price-measurement__reference-unit">{{ selected_variant.unit_price_measurement.reference_unit }}</span>
              </div>
            </div>

       {%- unless product.price == 0 -%}
            {{- form | payment_terms -}}
         {% endunless %}

 

View solution in original post

Replies 5 (5)

Ahsan_ANC
Shopify Partner
1394 253 324

Hi @TFT-MICRO in the following video guide I hide out the quantity and variant select, for your case delete the price block as shown in the video. Then go to every product which has zero price, from the right sidebar select this new template.

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
TFT-MICRO
Tourist
4 1 1

My theme (Warehouse) does not give the ability to edit these fields. I think I will need to add some code to accomplish this. 

Ahsan_ANC
Shopify Partner
1394 253 324

please share the code of main-product.liquid file

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
TFT-MICRO
Tourist
4 1 1

The product.liquid file points to the product.template file which points to the code I originally posted. 

TFT-MICRO
Tourist
4 1 1

This is an accepted solution.

I figured out a solution. I added these tags to the product-info.liquid file:

 

{%- unless product.price == 0 -%}
{% endunless %}

 

<div class="product-form__info-list">
        <div class="product-form__info-item">
      {%- unless product.price == 0 -%}
          <span class="product-form__info-title text--strong">{{ 'product.form.price' | t }}</span>
        {% endunless %}
          <div class="product-form__info-content" role="region" aria-live="polite">
            <div class="price-list">
      {%- unless product.price == 0 -%}
              {%- if selected_variant.compare_at_price > selected_variant.price -%}
                <span class="price price--highlight">
                  <span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
                  {{- selected_variant.price | money -}}
                </span>

                <span class="price price--compare">
                  <span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
                  {{- selected_variant.compare_at_price | money -}}
                </span>
              {%- else -%}
                <span class="price">
                  <span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
                  {{- selected_variant.price | money -}}
                </span>
              {%- endif -%}
        {% endunless %}
            </div>

            <div class="product-form__price-info" style="display: {% if selected_variant.unit_price_measurement %}block{% else %}none{% endif %}">
              <div class="unit-price-measurement">
                <span class="unit-price-measurement__price" {{ selected_variant.unit_price | money }}</span>
                <span class="unit-price-measurement__separator">/ </span>

                <span class="unit-price-measurement__reference-value" {%- if selected_variant.unit_price_measurement.reference_value == 1 -%}style="display: none"{% endif %}>
                  {{- selected_variant.unit_price_measurement.reference_value -}}
                </span>

                <span class="unit-price-measurement__reference-unit">{{ selected_variant.unit_price_measurement.reference_unit }}</span>
              </div>
            </div>

       {%- unless product.price == 0 -%}
            {{- form | payment_terms -}}
         {% endunless %}