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 %}
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024