Shopify themes, liquid, logos, and UX
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
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
Solved! Go to the solution
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 %}
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.
My theme (Warehouse) does not give the ability to edit these fields. I think I will need to add some code to accomplish this.
please share the code of main-product.liquid file
The product.liquid file points to the product.template file which points to the code I originally posted.
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 %}
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024