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
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.
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>
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.
User | Count |
---|---|
25 | |
21 | |
20 | |
16 | |
15 |