Solved

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

old_jewelry
Tourist
6 0 2

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! 

Accepted Solution (1)
Diamond_Team
Shopify Partner
112 14 24

This is an 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:

code.PNG

Best regards,

Diamond Team

If the answer was helpful for you, then please Like and Accept the Solution.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com

View solution in original post

Replies 12 (12)

KetanKumar
Shopify Partner
36839 3635 11972

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
old_jewelry
Tourist
6 0 2
thank you!

oldjewelry.net

Diamond_Team
Shopify Partner
112 14 24

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:

code.PNG

Best regards,

Diamond team

 

If the answer was helpful for you, then please Like and Accept the Solution.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
old_jewelry
Tourist
6 0 2
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
Shopify Partner
112 14 24

This is an 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:

code.PNG

Best regards,

Diamond Team

If the answer was helpful for you, then please Like and Accept the Solution.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
old_jewelry
Tourist
6 0 2

Thank you so much! 
This worked!

xdreamineer
Excursionist
17 0 7

Hi,

I am using Them Simple.

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

Url: planet.deluxe-myshopify

 

Thanks

Diamond_Team
Shopify Partner
112 14 24

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:

product page code.PNG

 

If the answer was helpful for you, then please Like and Accept the Solution.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
Diamond_Team
Shopify Partner
112 14 24

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

 

If the answer was helpful for you, then please Like and Accept the Solution.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
xdreamineer
Excursionist
17 0 7

OMG!!!

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

tahoematt
Tourist
9 0 0

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
Excursionist
29 0 6

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.

aart2000_0-1642684702599.pngaart2000_1-1642684741076.png