Liquid, JavaScript, themes, sales channels
Hello, I need to remove the price from being displayed when the product price is set to zero. I have attempted to edit the html code by trying to find the correct snippet. I am using the Express theme. I would greatly appreciate your assistance. Many thanks!
My site is The Finery House (myshopify.com)
Solved! Go to the solution
This is an accepted solution.
It worked, it worked, it worked! You are the BEST! Thank you so very much!! Wahooo!
Hi, can you please check if this works for you:
In product-price.liquid file, please search for <div class="price__pricing-group"> (just after line 50) and paste {% if current_variant.price >0 %} in a new line above it.
The last line of this file is </dl>. Please paste {% endif %} in a new line above that line.
Thank you. I did that but it still shows the 0.00. Any other suggestions?
OK, the change you made should make the price disappear from individual product cards. But you are looking at product prices in featured collections.
Can you please replace product-price-listing.liquid and product-card-list.liquid files with the attached. Please replace just 1 file first and check if that solves the problem. Replace the other only if you need to. Please let me know.
product-price-listing-liquid
{% comment %}
Renders a list of product's price (regular, sale, unit)
Accompanies product listings (collection page, search result) and not updated dynamically
Accepts:
- variant: {Object} Variant Liquid object (optional)
- product: {Object} Product Liquid object (optional)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
Usage:
{% include 'product-price-listing', product: product %}
{% endcomment %}
{%- liquid
if product != empty
assign compare_at_price = product.compare_at_price
assign price = product.price
assign available = product.available
assign variant = product.variants.first
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif
assign money_price = price | money
-%}
<dl class="price price--listing
{%- if available == false %} price--sold-out {% endif -%}
{%- if compare_at_price > price %} price--on-sale {% endif -%}
{%- if product.price_varies == false and product.compare_at_price_varies %} price--compare-price-hidden {% endif -%}
{%- if variant.unit_price_measurement %} price--unit-available {% endif -%}"
>
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is a sale
- div.price__unit: Displayed when the first variant has a unit price
- div.price__availability: Displayed when the product is sold out
{%- endcomment -%}
{% if current_variant.price >0 %}
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--regular">
{%- if product.price_varies -%}
{{ 'products.product.from_text_html' | t: price: money_price }}
{%- else -%}
{{ money_price }}
{%- endif -%}
</span>
</dd>
</div>
<div class="price__sale">
<div class="price__compare">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s class="price-item price-item--regular">
{{ compare_at_price | money }}
</s>
</dd>
</div>
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale">
{%- if product.price_varies -%}
{{ 'products.product.from_text_html' | t: price: money_price }}
{%- else -%}
{{ money_price }}
{%- endif -%}
</span>
</dd>
</div>
<div class="price__badges">
<span class="price__badge price__badge--sale" aria-hidden="true">
<span>{{ 'products.product.on_sale' | t }}</span>
</span>
<span class="price__badge price__badge--sold-out">
<span>{{ 'products.product.sold_out' | t }}</span>
</span>
</div>
<div class="price__unit">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</dd>
</div>
{% endif %}
</dl>
product-card-list.liquid
{% comment %}
Renders a product card using "List" style
Accepts:
- product: {Object} Product Liquid object (optional)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
- show_form: {Boolean} Show the product form (optional)
Usage:
{% render 'product-card-list' %}
{% render 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- liquid
if product.title
assign product_title = product.title
assign product_desc = product.description
assign product_vendor = product.vendor
else
assign product_title = 'homepage.onboarding.product_title' | t
assign product_desc = 'homepage.onboarding.product_description' | t
assign product_vendor = 'products.product.vendor' | t
assign onboarding = true
endif
-%}
{%- capture product_img -%}
{%- if product.featured_media or onboarding -%}
<div class="product-card__image-wrapper">
{% if product.featured_media %}
{%- if show_form -%}
<a href="{{ product.url | within: collection }}" tabindex="-1" data-product-card-link>
{%- endif -%}
<img srcset="{% if product.featured_media.width >= 90 %}{{ product.featured_media | img_url: '90x' }} 90w,{% endif %}
{% if product.featured_media.width >= 180 %}{{ product.featured_media | img_url: '180x' }} 180w,{% endif %}
{% if product.featured_media.width >= 110 %}{{ product.featured_media | img_url: '110x' }} 110w,{% endif %}
{% if product.featured_media.width >= 220 %}{{ product.featured_media | img_url: '220x' }} 220w,{% endif %}"
sizes="(min-width: 750px) 110px, 90px"
src="{{ product.featured_media | img_url: '110x110' }}"
width="{{ product.featured_media.width }}"
height="{{ product.featured_media.height }}"
loading="lazy"
class="product-card__image"
alt="{{ product.featured_media.alt | escape }}"
data-product-card-image>
{%- if show_form -%}
</a>
{%- endif -%}
{%- endif -%}
{%- if onboarding -%}
{%- capture current -%}{% cycle 1, 2, 3, 4 %}{%- endcapture -%}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg placeholder-svg--small product-card__image' }}
{%- endif -%}
</div>
{%- endif -%}
{%- endcapture -%}
<div class="product-card product-card--list{% if show_form %} product-card--quick-add{% if product.has_only_default_variant %} product-card--has-variants{% endif %}{% endif %}"{% unless onboarding %} data-product-card data-product-id="{{ product.id }}"{% endunless %}{% if show_form %} data-show-quantity-selector="true"{% endif %} tabindex="-1">
{%- unless show_form -%}
<a class="full-width-link" href="{{ product.url | within: collection }}" data-product-card-link>
<span class="visually-hidden">{{ product_title }}</span>
</a>
{%- else -%}
<div class="full-width-link">
<span class="visually-hidden">{{ product_title }}</span>
</div>
{%- endunless -%}
<div class="product-card__quantity"
data-label-single="{{ 'products.product.quantity_indicator.single' | t: title: product_title }}"
data-label-multi="{{ 'products.product.quantity_indicator.multi' | t: quantity: '[quantity]', title: product_title }}"
data-quantity-indicator="{{ product.id }}">
<span aria-hidden="true" data-quantity-number></span>
<span class="visually-hidden" data-quantity-label></span>
</div>
<div class="product-card__link">
{{ product_img }}
<div class="product-card__content">
<div class="product-card__title-wrapper" aria-hidden="true">
{%- unless show_form -%}
<span class="product-card__title">{{ product_title }}</span>
{%- else -%}
<a class="product-card__title" href="{{ product.url | within: collection }}" data-product-card-link>{{ product_title }}</a>
{%- endunless -%}
{{ product_img }}
</div>
{%- if show_vendor -%}
<div class="product-card__vendor">{{ product_vendor }}</div>
{% endif %}
{% if current_variant.price >0 %}
<div class="product-card__price-wrapper">
{% render 'product-price-listing', product: product %}
{% render 'product-price', variant: product.selected_or_first_available_variant, product: product, wrapper_class: 'price--listing price--variants' %}
<a href="{{ product.url | within: collection }}" class="rte product-card__view-details" data-product-card-link>
{{ 'products.product.view_details' | t }}
</a>
</div>
{% endif %}
<div class="product-card__description-wrapper" aria-hidden="true">
<p class="product-card__description">{{ product_desc | strip_html | truncate: 120 }}</p>
</div>
{%- if show_form -%}
<div class="product-card__quick-add">
{%- unless product.has_only_default_variant -%}
<div class="product-form__buttons product-form__buttons--show-options">
<button
name="add"
class="product-form__add-to-cart"
data-show-options-button>
{{ 'products.product.show_options' | t }}
</button>
</div>
{%- endunless -%}
{% render 'product-form',
section_id: section.id,
product: product,
current_variant: product.selected_or_first_available_variant,
show_instant_quantity: true
%}
</div>
{%- endif -%}
</div>
</div>
</div>
Ok, thank you. I will do that now. What about the cart? I assumed it would leave once the 0.00 price was removed. How do I remove the cart?
If an item as a zero price, I do not want a price to be reflected nor a cart viewable on that particular item detail. Viewable below you will see, we have removed he 0.00 price from being shown however, the cart is still there. I would like to remove the cart.
When you say you would like to remove the cart, do you mean you would like to remove the "Add to cart" button for items with 0 price?
I think I know the requirement reasonably well:
1. Hide price from collections as well as individual products when the price is 0
2. Hide "Add to cart", "buy now" etc. buttons when the price is 0
For doing 1, please make modify product-price.liquid and product-card-list.liquid files as below (I'm assuming that you have not made any changes whatsoever to these files from the ones in the default express theme):
product-price.liquid
{% comment %}
Renders a list of product's price (regular, sale, unit)
Accompanies product forms and meant to be updated dynamically
Accepts:
- variant: {Object} Variant Liquid object (optional)
- product: {Object} Product Liquid object (optional)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
- wrapper_class: {String} Adds a class for the wrapper (optional)
Usage:
{% include 'product-price', variant: current_variant, product: product %}
{% endcomment %}
{%- liquid
if variant.title
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif
assign money_price = price | money
-%}
<dl class="price
{% if available == false %} price--sold-out {% endif %}
{% if compare_at_price > price %} price--on-sale {% endif %}
{% if variant.unit_price_measurement %} price--unit-available {% endif %}
{% if wrapper_class %} {{ wrapper_class }}{% endif %}"
data-price
>
{% if show_vendor and product %}
<div class="price__vendor">
<dt>
<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
</dt>
<dd>
{{ product.vendor }}
</dd>
</div>
{% endif %}
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is a sale
- div.price__unit: Displayed when the first variant has a unit price
- div.price__availability: Displayed when the product is sold out
{%- endcomment -%}
{% if variant.price >0 %}
<div class="price__pricing-group">
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--regular" data-regular-price>
{{ money_price }}
</span>
</dd>
</div>
<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s class="price-item price-item--regular" data-regular-price>
{{ compare_at_price | money }}
</s>
</dd>
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale" data-sale-price>
{{ money_price }}
</span>
</dd>
</div>
<div class="price__badges">
<span class="price__badge price__badge--sale" aria-hidden="true">
<span>{{ 'products.product.on_sale' | t }}</span>
</span>
<span class="price__badge price__badge--sold-out">
<span>{{ 'products.product.sold_out' | t }}</span>
</span>
</div>
</div>
<div class="price__unit">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</dd>
</div>
{% endif %}
</dl>
product-card-list.liquid
{% comment %}
Renders a product card using "List" style
Accepts:
- product: {Object} Product Liquid object (optional)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
- show_form: {Boolean} Show the product form (optional)
Usage:
{% render 'product-card-list' %}
{% render 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- liquid
if product.title
assign product_title = product.title
assign product_desc = product.description
assign product_vendor = product.vendor
else
assign product_title = 'homepage.onboarding.product_title' | t
assign product_desc = 'homepage.onboarding.product_description' | t
assign product_vendor = 'products.product.vendor' | t
assign onboarding = true
endif
-%}
{%- capture product_img -%}
{%- if product.featured_media or onboarding -%}
<div class="product-card__image-wrapper">
{% if product.featured_media %}
{%- if show_form -%}
<a href="{{ product.url | within: collection }}" tabindex="-1" data-product-card-link>
{%- endif -%}
<img srcset="{% if product.featured_media.width >= 90 %}{{ product.featured_media | img_url: '90x' }} 90w,{% endif %}
{% if product.featured_media.width >= 180 %}{{ product.featured_media | img_url: '180x' }} 180w,{% endif %}
{% if product.featured_media.width >= 110 %}{{ product.featured_media | img_url: '110x' }} 110w,{% endif %}
{% if product.featured_media.width >= 220 %}{{ product.featured_media | img_url: '220x' }} 220w,{% endif %}"
sizes="(min-width: 750px) 110px, 90px"
src="{{ product.featured_media | img_url: '110x110' }}"
width="{{ product.featured_media.width }}"
height="{{ product.featured_media.height }}"
loading="lazy"
class="product-card__image"
alt="{{ product.featured_media.alt | escape }}"
data-product-card-image>
{%- if show_form -%}
</a>
{%- endif -%}
{%- endif -%}
{%- if onboarding -%}
{%- capture current -%}{% cycle 1, 2, 3, 4 %}{%- endcapture -%}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg placeholder-svg--small product-card__image' }}
{%- endif -%}
</div>
{%- endif -%}
{%- endcapture -%}
<div class="product-card product-card--list{% if show_form %} product-card--quick-add{% if product.has_only_default_variant %} product-card--has-variants{% endif %}{% endif %}"{% unless onboarding %} data-product-card data-product-id="{{ product.id }}"{% endunless %}{% if show_form %} data-show-quantity-selector="true"{% endif %} tabindex="-1">
{%- unless show_form -%}
<a class="full-width-link" href="{{ product.url | within: collection }}" data-product-card-link>
<span class="visually-hidden">{{ product_title }}</span>
</a>
{%- else -%}
<div class="full-width-link">
<span class="visually-hidden">{{ product_title }}</span>
</div>
{%- endunless -%}
<div class="product-card__quantity"
data-label-single="{{ 'products.product.quantity_indicator.single' | t: title: product_title }}"
data-label-multi="{{ 'products.product.quantity_indicator.multi' | t: quantity: '[quantity]', title: product_title }}"
data-quantity-indicator="{{ product.id }}">
<span aria-hidden="true" data-quantity-number></span>
<span class="visually-hidden" data-quantity-label></span>
</div>
<div class="product-card__link">
{{ product_img }}
<div class="product-card__content">
<div class="product-card__title-wrapper" aria-hidden="true">
{%- unless show_form -%}
<span class="product-card__title">{{ product_title }}</span>
{%- else -%}
<a class="product-card__title" href="{{ product.url | within: collection }}" data-product-card-link>{{ product_title }}</a>
{%- endunless -%}
{{ product_img }}
</div>
{%- if show_vendor -%}
<div class="product-card__vendor">{{ product_vendor }}</div>
{%- endif -%}
<div class="product-card__price-wrapper">
{% if product.price >0 %}
{% render 'product-price-listing', product: product %}
{% endif %}
{% render 'product-price', variant: product.selected_or_first_available_variant, product: product, wrapper_class: 'price--listing price--variants' %}
<a href="{{ product.url | within: collection }}" class="rte product-card__view-details" data-product-card-link>
{{ 'products.product.view_details' | t }}
</a>
</div>
<div class="product-card__description-wrapper" aria-hidden="true">
<p class="product-card__description">{{ product_desc | strip_html | truncate: 120 }}</p>
</div>
{%- if show_form -%}
<div class="product-card__quick-add">
{%- unless product.has_only_default_variant -%}
<div class="product-form__buttons product-form__buttons--show-options">
<button
name="add"
class="product-form__add-to-cart"
data-show-options-button>
{{ 'products.product.show_options' | t }}
</button>
</div>
{%- endunless -%}
{% render 'product-form',
section_id: section.id,
product: product,
current_variant: product.selected_or_first_available_variant,
show_instant_quantity: true
%}
</div>
{%- endif -%}
</div>
</div>
</div>
For removing add to cart (and other buttons) when the price is 0, please search for <div class="product-form__buttons"> in product-form.liquid and add {% if product.price >0 %} in a new line just above it.
Then, search for Live region for announcing updated price and availability to screen readers and add {% endif %} 2 lines above it (i.e. just above the comment line).
Please let me know if this worked. Thanks.
Eeek! So that did remove the zero price but it also removed the price that wasn't zero. Now all prices are gone.
The Finery House (myshopify.com)
To clarify, I would like for the products with a zero price to not have a price shown nor a cart. I would like this to be the case on the individual product cards as well as the featured collections. on the products with a price, I would like for the price to be viewable on both the individual product cards and featured collections.
I apologize for the confusion and appreciate your help.
I did. 🙂
Hello, just following up
Hi, were you able to implement the changes I mentioned in my last post?
Good morning. I did have some success but still not all the way correct.
Goals:
1. Hide price from collections as well as individual products when the price is 0- COMPLETE
2. Hide "Add to cart", "buy now" etc. buttons when the price is 0- not complete
I tried to make the change your suggested but see the attached. I could not save.
That's strange. Can you please share your email address in a private message.
thanks. just sent.
This is an accepted solution.
It worked, it worked, it worked! You are the BEST! Thank you so very much!! Wahooo!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024