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

Solved
neeravmakwana
Shopify Partner
164 29 32

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?

0 Likes
neeravmakwana
Shopify Partner
164 29 32

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.

0 Likes
janiecolbaugh
Excursionist
14 1 3

Hello, just following up

0 Likes
neeravmakwana
Shopify Partner
164 29 32

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

0 Likes
janiecolbaugh
Excursionist
14 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

0 Likes
neeravmakwana
Shopify Partner
164 29 32

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

0 Likes
janiecolbaugh
Excursionist
14 1 3

thanks. just sent. 

0 Likes
janiecolbaugh
Excursionist
14 1 3

This is an accepted solution.

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

0 Likes
neeravmakwana
Shopify Partner
164 29 32
Thanks, good luck with your store!
0 Likes