How to hide prices of sold out items within the 'Boundless' Theme

[old_jewelry]

Hello, looking for a solution to hide prices for sold out items in the 'Boundless' theme.
All of my sold out items are located in a collection named 'archive' which is visible to shoppers but I would like to hide the prices. 

Thanks in advance for any help! 

[KetanKumar]

Hello, @old_jewelry 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[old_jewelry]

thank you!

oldjewelry.net

[Diamond_Team]

Hello,

1. In your Shopify Admin go to online store > themes > actions > edit code

2- Go to Sections folder > product-template.liquid

3- press ctrl + f and type assign price to search for it

4- add this line of code just above it

          {% if product.available %}

5- add this line just under the </p>

          {% endif %}

6- click save

The final code should look like that:

Best regards,

Diamond team

[old_jewelry]

Hello,

This hides the price on each individual product page (if sold out)
But does not hide the prices on the archive page, where all sold out items
are displayed.
Please see attached screenshot....
[image: Screen Shot 2020-12-06 at 10.49.59 AM.png]

[Diamond_Team · Accepted solution]

Hello,

To hide the price of sold out items from collection pages:

1. In your Shopify Admin go to online store > themes > actions > edit code

2- Go to Snippets folder > product-grid-item.liquid

3- press ctrl + f and search for product-item__price-wrapper

4- add this line of code just above it

          {% if product.available %}

5- add this line just under the </p>

   {% endif %}

6- click save

The final code should look like that:

Best regards,

Diamond Team

[old_jewelry]

Thank you so much! 
This worked!

[xdreamineer]

Hi,

I am using Them Simple.

Can you help showing me how it works for my store?

Url: planet.deluxe-myshopify

Thanks

[Diamond_Team]

Hello xdreamineer,

For hiding the price of soldout items from product page:

1. In your Shopify Admin go to online store > themes > actions > edit code

2- Go to Sections folder >product-template.liquid

3- press ctrl + f and search for product-single__prices

4- add this line of code just above it

 {% if product.available %}

5- add this line just under the </p>

          {% endif %}

6- click save

The final code should look like that:

[Diamond_Team]

To hide the price of sold out items from collection pages:

1. In your Shopify Admin go to online store > themes > actions > edit code

2- Go to Snippets folder >product-grid-item.liquid

3- replace all the code inside this folder with this code:

{% unless grid_item_width %}
  {% assign grid_item_width = 'medium-up--one-third small--one-half' %}
{% endunless %}

{% unless current_collection == blank %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}

{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

<div class="product grid__item {{ grid_item_width }} slide-up-animation animated" role="listitem">
  {% unless product.featured_image == blank %}
    <div class="supports-js" style="max-width: {{ 600 | times: product.featured_image.aspect_ratio | round }}px; margin: 0 auto;">
      <a href="{{ product.url | within: collection }}" class="product__image-wrapper product__image-wrapper--loading" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%;" title="{{ product.title | escape }}" data-image-link>
        <img class="product__image lazyload"
             alt="{{ product.featured_image.alt | escape }}"
             style="max-width: {{ 600 | times: product.featured_image.aspect_ratio | round }}px; max-height: 600px;"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ product.featured_image.aspect_ratio }}"
             data-sizes="auto"
             data-image>
      </a>
    </div>
  {% else %}
    <a href="{{ product.url | within: collection }}" class=" supports-js product__image-wrapper" title="{{ product.title | escape }}">
      <img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
  {% endunless %}

  <noscript>
    <a href="{{ product.url | within: collection }}" class="product__image-wrapper" title="{{ product.title | escape }}">
      <img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
  </noscript>

  <div class="product__title product__title--card text-center">
    <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
  </div>

  {% if section.settings.vendor_show %}
    <div class="product__vendor text-center">
      {{ product.vendor }}
    </div>
  {% endif %}

  <div class="product__prices text-center">
   {% if product.available %}
    {% if product.compare_at_price > product.price %}
      <span class="product__price--on-sale">
        {% if product.price_varies %}
          {% assign sale_price = product.price | money %}
          {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
        {% else %}
          <strong class="visually-hidden">{{ 'products.product.sale_price' | t }}</strong>
          {{ product.price | money }}
        {% endif %}
      </span>

    {% else %}

      <span class="product__price">
        {% if product.price_varies %}
          {% assign price = product.price | money %}
          {{ 'products.product.from_text_html' | t: price: price }}
        {% else %}
          <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
          {{ product.price | money }}
        {% endif %}
    </span>
     {% endif %}


    {% if product.compare_at_price > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s>{{ product.compare_at_price | money }}</s>
    {% endif %}
   {% endif %}
    {% if on_sale %}
      <span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
    {% endif %}

    {% comment %}
    {% if sold_out %}
      <span class="badge badge--sold-out"><span>{{ 'products.product.sold_out' | t }}</span></span>
    {% endif %}
    {% endcomment %}

    {% if sold_out %}
      — <strong class="sold-out-text">{{ 'products.product.sold_out' | t }}</strong>
    {% endif %}

    {% if product.price_varies == false %}
      {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
    {% endif %}
  </div>
</div>

Copy

4- click save

Best regards,

Diamond team

[xdreamineer]

OMG!!!

Dear Diamond Team, you are my life saver!!!! I am not kidding!!!

[tahoematt]

How would I do this on my theme? https://y48pjmffat8az3sk-53048311980.shopifypreview.com/products_preview?preview_key=feec90f9bf7d62f...

Debuitify 3.0.0

<!-- /snippets/product-template.liquid -->
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
{%- assign stacked = false -%}
{%- if section.settings.media_layout == "stacked" -%}
{%- assign stacked = true -%}
{%- endif -%}

{%- assign first_media = true -%}

{%- if product.media.size > 1 -%}
{%- assign carousel = true -%}
{%- else -%}
{%- assign carousel = false -%}
{%- endif -%}

{%- if emptyState -%}
{%- assign vendor = 'home_page.onboarding.product_vendor' | t -%}
{%- assign sku = '12345' -%}
{%- assign title = 'home_page.onboarding.product_title' | t -%}
{%- assign compare_at_price = 2999 -%}
{%- assign price = 1999 -%}
{%- else -%}
{%- assign vendor = product.vendor -%}
{%- assign sku = current_variant.sku -%}
{%- assign title = product.title -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}
{%- endif -%}

{%- if compare_at_price > price -%}
{%- assign on_sale = true -%}
{%- else -%}
{%- assign on_sale = false -%}
{%- endif -%}

{%- if current_variant.available -%}
{%- assign sold_out = false -%}
{%- else -%}
{%- assign sold_out = true -%}
{%- endif -%}

[aart2000]

I'm using Supply theme. I added these codes above <div class="product-item--price"> and it worked just fine but now the grid is not aligned. Each item that was sold is now on a separate line pushing everything out alignment. The screen shots below are when I added the code. I'm removing the code for now to get the images back in the proper alignment.