Hide price if sold out in Impulse Theme

SZ317
Visitor
1 0 1

Hello Guys,

We have a site utilizing impulse theme.  We are looking to hide price of the product if the product is sold out.  Anyways to do this?

Thank you so much,

Sam

Replies 20 (20)

JHKCreate
Shopify Expert
3571 639 916

Hi There!

Pretty straightforward to do, would you mind sharing the Product-template.liquid code so that I can amend it as it should be? Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Dylan1998
Visitor
1 0 0

Hi, Could you please make the same adjustment to my store. 

 

Just Need to hide all the prices.

Thanks. 

robertkeek
Visitor
1 0 0

Hi! I would like to make the same change and hide prices when item is sold out on the collection page as well as the product page.

Here is my product-template.liquid

{%- unless thumbnail_position -%}
{%- assign thumbnail_position = 'beside' -%}
{%- endunless -%}

{%- unless description_style -%}
{%- assign description_style = 'full' -%}
{%- endunless -%}

{%- assign product_img_structure = product.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="ProductSection-{{ section_id }}"
class="product-section"
data-section-id="{{ section_id }}"
data-section-type="product-template"
data-product-handle="{{ product.handle }}"
data-product-url="{{ product.url | within: collection }}"
data-aspect-ratio="{{ 100 | divided_by: product.featured_media.aspect_ratio }}"
data-img-url="{{ product_img_structure }}"
{% if settings.product_zoom_enable %}
data-image-zoom="true"
{% endif %}
{% if settings.inventory_enable %}
data-inventory="true"
{% endif %}
{% if settings.inventory_transfers_enable %}
data-incoming-inventory="true"
{% endif %}
{% unless isModal %}
data-enable-history-state="true"
{% endunless %}>

{%- include 'product-template-variables' -%}

<div class="page-content page-content--product">
<div class="page-width">

<div class="grid{% unless image_position == 'left' %} grid--product-images-right{% endunless %}">
{%- if image_position == 'left' -%}
<div class="grid__item {{ product_image_width }}">
{% include 'product-images',
section_id: section_id,
isModal: isModal,
thumbnail_arrows: thumbnail_arrows,
thumbnail_position: thumbnail_position,
video_looping: video_looping,
video_style: video_style
%}
</div>
{%- endif -%}

<div class="grid__item {{ product_description_width }}">

<div class="product-single__meta">
{%- if settings.show_breadcrumbs and isModal != true -%}
{%- include 'breadcrumbs' -%}
{%- endif -%}

{%- if settings.vendor_enable -%}
<div class="product-single__vendor">
{%- assign vendor_handle = product.vendor | handleize -%}
{%- if collections[vendor_handle] != empty -%}
<a href="{{ routes.collections_url }}/{{ collections[vendor_handle].handle }}">
{{ collections[vendor_handle].title }}
</a>
{%- else -%}
{{ product.vendor | link_to_vendor }}
{%- endif -%}
</div>
{%- endif -%}

{%- if isModal -%}
<p class="h2 product-single__title">
{{ product.title }}
</p>
{% else %}
<h1 class="h2 product-single__title">
{{ product.title }}
</h1>
{%- endif -%}

{%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
{%- if isModal -%}
{%- assign review_link = product.url | within: collection | append: '#Reviews-' | append: product.id -%}
{% else %}
{%- assign review_link = '#Reviews-' | append: product.id -%}
{%- endif -%}
<a href="{{ review_link }}" class="product-single__review-link">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</a>
{%- endif -%}

{%- if settings.sku_enable -%}
<p id="Sku-{{ section_id }}" class="product-single__sku">
{%- if current_variant.sku -%}
{{ current_variant.sku }}
{%- endif -%}
</p>
{%- endif -%}

{%- assign hide_sale_price = true -%}
{%- if product.compare_at_price_max > product.price -%}
{%- if current_variant.compare_at_price > current_variant.price -%}
{%- assign hide_sale_price = false -%}
{%- endif -%}
<span
id="PriceA11y-{{ section_id }}"
class="visually-hidden"
aria-hidden="{{ hide_sale_price }}">
{{ 'products.general.regular_price' | t }}
</span>
<span class="product__price-wrap-{{ section_id }}{% if hide_sale_price %} hide{% endif %}">
<span id="ComparePrice-{{ section_id }}" class="product__price product__price--compare">
{%- if current_variant.compare_at_price > current_variant.price -%}
{{ current_variant.compare_at_price | money }}
{%- endif -%}
</span>
</span>
<span id="ComparePriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{%- endif -%}

<span id="ProductPrice-{{ section_id }}"
class="product__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}">
{{ current_variant.price | money }}
</span>

{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == 'dollar' -%}
{% capture saved_amount %}{{ current_variant.compare_at_price | minus: current_variant.price | money }}{% endcapture %}
{%- else -%}
{% capture saved_amount %}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{% endcapture %}
{%- endif -%}
<span id="SavePrice-{{ section_id }}" class="product__price-savings{% if hide_sale_price %} hide{% endif %}">
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
</span>
{%- endif -%}

<div class="product__unit-price product__unit-price--spacing product__unit-price-wrapper--{{ section_id }}{% unless current_variant.unit_price_measurement %} hide{% endunless %}">
{%- capture unit_price_base_unit -%}
<span class="product__unit-base--{{ section_id }}">
{%- if current_variant.unit_price_measurement -%}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{ current_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}

<span class="product__unit-price--{{ section_id }}">{{ current_variant.unit_price | money }}</span>/{{ unit_price_base_unit }}
</div>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte small--text-center">
<small>
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</small>
</div>
{%- endif -%}

{%- if settings.inventory_enable or settings.inventory_transfers_enable -%}
{%- assign variants_with_inventory_tracking = product.variants | where: 'inventory_management', 'shopify' -%}

<script>
// Store inventory quantities in JS because they're no longer
// available directly in JS when a variant changes.
// Have an object that holds all potential products so it works
// with quick view or with multiple featured products.
window.inventories = window.inventories || {};
window.inventories['{{section_id}}'] = {};
{% for variant in variants_with_inventory_tracking %}
window.inventories['{{section_id}}'][{{variant.id}}] = {
'quantity': {{ variant.inventory_quantity | default: 0 }},
'incoming': {{ variant.incoming | default: false | json }},
'next_incoming_date': {{ variant.next_incoming_date | date: format: 'date' | json }}
};
{% endfor %}
</script>

{% comment %}
If loaded in quick view, it might be from a JS-loaded function
that loads recommended products. If that's the case, the above
JS will not set the variant inventory. Add it to an accessible
data div to read later instead.
{% endcomment %}
{%- if isModal -%}
<div
data-section-id="{{ section_id }}"
class="hide js-product-inventory-data"
aria-hidden="true"
>
{%- for variant in variants_with_inventory_tracking -%}
<div
class="js-variant-inventory-data"
data-id="{{ variant.id }}"
data-quantity="{{ variant.inventory_quantity | default: 0 }}"
data-incoming="{{ variant.incoming | default: false | json }}"
data-date="{{ variant.next_incoming_date | date: format: 'date' | json }}"
>
</div>
{%- endfor -%}
</div>
{%- endif -%}
{%- endif -%}

<hr class="hr--medium">

{%- unless isModal -%}
{% comment %}
Shopify's product form attaches a number of tracking
scripts that cause slower load times and false statistics.
Quick view modals request these on-demand.
{% endcomment %}
{% include 'product-form', section_id: section_id %}
{%- else -%}
<div
id="ProductFormHolder-{{ section_id }}"
class="product-form-holder"
data-url="{{ product.url }}"
data-template="{{ product.template_suffix }}"></div>
{%- endunless -%}

{%- if settings.trust_image != blank -%}
<div class="aos-animate trust-image" style="max-width: {{ settings.trust_image.width }}px;">
<div class="image-wrap " style="height: 0; padding-bottom: {{ 100 | divided_by: settings.trust_image.aspect_ratio }}%;">
{%- assign img_url = settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540]"
data-aspectratio="{{ settings.trust_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ settings.trust_image.alt }}">
<noscript>
<img class="lazyloaded" src="{{ settings.trust_image | img_url: '540x' }}" alt="{{ settings.trust_image.alt }}">
</noscript>
</div>
</div>
{%- endif -%}

{%- unless description_style == 'full' -%}
<div class="product-single__description rte " style="display:none">
{{ product.description }}
</div>


<div class=""> {% include 'product-additional-content', section_id: section_id %}</div>
{%- endunless -%}

{%- if social -%}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{%- endif -%}
</div>
</div>

{%- unless image_position == 'left' -%}
<div class="grid__item {{ product_image_width }}">
{% include 'product-images', section_id: section_id, isModal: isModal, thumbnail_position: thumbnail_position, thumbnail_arrows: thumbnail_arrows %}
</div>
{%- endunless -%}
</div>

{%- if description_style == 'full' -%}
<div class="product-single__description-full rte test">
{{ product.description }}
</div>

<div class="dasfs">{% include 'product-additional-content', section_id: section_id %}</div>
{%- endif -%}
</div>
</div>
</div>

LW_
Tourist
10 0 49

I need to do the same on Impulse. Can you share the code change we need to make?

JHKCreate
Shopify Expert
3571 639 916

Hello @LW_ 

 

The solution is to find the code used to render the price and wrap it between the following

 

{% if product.available %}

 

Money Code

 

{%endif%}

 

This should work on most themes! Let me know if this works

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Kitycraftmaker2
Visitor
1 0 0

Hi @JHKCreate we have the Impulse theme and need to hide ALL prices from category pages / featured product listings - not just if they have a zero value- is there an easy way for me to do this I'm a novice! Huge thanks in advance. 

achetezdelart
Excursionist
14 0 2

Hi,
Same question, for our shop using impulse theme:
https://achetezdelart.shop
We offer a premium print to the one who will help us resolve this issue! 😊
Cheers

JHKCreate
Shopify Expert
3571 639 916

Hi @achetezdelart ,

 

Should be pretty straightforward, let us know if we can request store access and implement the change, we'll let you know where this is activated.

 

Thanks!

 

 

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
achetezdelart
Excursionist
14 0 2

Hi,
I'm actually preparing my pages for an upgrade of our Impulse theme from version 4 to 7.
Can you request access on the theme not yet published?
Thank you for your help!
Regards

JHKCreate
Shopify Expert
3571 639 916

Yes not a problem, fixes need to be done on unpublished themes before deploying this in all cases. You shall receive a request soon!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
achetezdelart
Excursionist
14 0 2

Thank you, approved!

JHKCreate
Shopify Expert
3571 639 916

Well received, are we looking at hiding all prices for sold out items only then? Just so we're aligned, thanks!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
achetezdelart
Excursionist
14 0 2

TYSM 🙏 Actually I have also a topic with the collections list limited to 50, which I'd like to increase on the collections list page: https://community.shopify.com/c/shopify-design/increase-collections-list-limit-of-50-on-impulse-them... 😅

JHKCreate
Shopify Expert
3571 639 916

C'est bon pour les prix 😉 Collections & Page Produit.

 

As for the 50 Limit, this is a hardcoded limit, we can extend this by adding another 50 collection list, but we would advise to no go over the limit to be honest.

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
achetezdelart
Excursionist
14 0 2

You are amazing! TYSM you for the hidden prices of sold products, it's exactly what we needed and it works perfectly.

JHKCreate
Shopify Expert
3571 639 916

Our pleasure!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
achetezdelart
Excursionist
14 0 2

For the 50 limit I'll follow your no go advice. Can you add another collections list to the page?
I will also DM you for the print I'm offering you for your help 😊

JHKCreate
Shopify Expert
3571 639 916

Do you mean this page? Collections – Achetez de l'Art (achetezdelart.shop)

 

I can see you can add more collections there, just let me know

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
achetezdelart
Excursionist
14 0 2

Yes, this is the page showing all of our artists; we can organize them differently with another collections list within the page.

JHKCreate
Shopify Expert
3571 639 916

Clear, why not use the "Collection List" section as per the below? 

JHKCreate_1-1682967487005.png

 

 

You still maintain control of collection and they show in the same way as the section above. Let us know!

 

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com