Solved

Remove a price from being displayed when product price is zero in the Express theme

janiecolbaugh
Shopify Partner
15 1 3

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)

Accepted Solution (1)
janiecolbaugh
Shopify Partner
15 1 3

This is an accepted solution.

It worked, it worked, it worked!  You are the BEST! Thank you so very much!! Wahooo! 

View solution in original post

Replies 18 (18)

neeravmakwana
Shopify Partner
164 30 39

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.

janiecolbaugh
Shopify Partner
15 1 3

shopify image of zeros.pngshopify code I.pngshopify code II.png

 

 

Thank you. I did that but it still shows the 0.00. Any other suggestions?

neeravmakwana
Shopify Partner
164 30 39

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 }}&nbsp;</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>
janiecolbaugh
Shopify Partner
15 1 3

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? 

neeravmakwana
Shopify Partner
164 30 39
Do you mean you want to remove the 0.0 label from the cart as well?
Irrespective of whether it is 0 with no items in the cart or 0 with one or
more items in the cart.

The code I shared with you relates to 0 price on products only, not the
cart.
janiecolbaugh
Shopify Partner
15 1 3

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. 

shopify IV.png

 

neeravmakwana
Shopify Partner
164 30 39

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?

neeravmakwana
Shopify Partner
164 30 39

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 }}&nbsp;</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.

janiecolbaugh
Shopify Partner
15 1 3

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. 

neeravmakwana
Shopify Partner
164 30 39
That's weird, I'll have a look and let you know shortly. Please undo the
change in the meantime.
janiecolbaugh
Shopify Partner
15 1 3

I did. 🙂

janiecolbaugh
Shopify Partner
15 1 3

Hello, just following up

neeravmakwana
Shopify Partner
164 30 39

Hi, were you able to implement the changes I mentioned in my last post?

janiecolbaugh
Shopify Partner
15 1 3

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.

 

 shopify V.pngShopify VI.png

neeravmakwana
Shopify Partner
164 30 39

That's strange. Can you please share your email address in a private message.

janiecolbaugh
Shopify Partner
15 1 3

thanks. just sent. 

janiecolbaugh
Shopify Partner
15 1 3

This is an accepted solution.

It worked, it worked, it worked!  You are the BEST! Thank you so very much!! Wahooo! 

neeravmakwana
Shopify Partner
164 30 39
Thanks, good luck with your store!