Variants price showing as "from" even when out of stock at that price

Highlighted
New Member
3 0 0

I've made it so the website automatically takes away the option to purchase out of stock variants, however the lowest price still shows as "from $x" even when that variant isn't available to purchase.

 

How do I make it hide price options that are not available? I have pasted my code below

 

{% unless grid_item_width %}
{% assign grid_item_width = 'large--one-quarter medium-down--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 %}

<div class="grid__item {{grid_item_width}}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
<a href="{{ product.url | within: collection }}" class="grid-link">
<span class="grid-link__image grid-link__image--product">
{% if on_sale %}
<span class="badge badge--sale">
<span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
</span>
{% endif %}
{% if sold_out %}
<span class="badge badge--sold-out">
<span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
</span>
{% endif %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
</span>
<p class="grid-link__title">{{ product.title }}</p>
<p class="grid-link__meta">
{% capture price %}<strong>{{ product.price | money }}</strong>{% endcapture %}
{% if product.price_varies %}{{ 'products.general.from_html' | t: price: price }}{% else %}{{ price }}{% endif %}
{% if product.options.size == 1 %}
<script>
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
{% for variant in product.variants %}
{% unless variant.available %}
jQuery('.single-option-selector option').filter(function() { return jQuery(this).text() === {{ variant.title | json }}; }).remove();
{% endunless %}
{% endfor %}
jQuery('.single-option-selector').trigger('change');
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
}
</script>
{% endif %}
{% if on_sale %}
<br><s class="grid-link__sale_price">{{ product.compare_at_price | money }}</s>
{% endif %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="Add to Cart" class="btn" />
</form>
{% if settings.product_reviews_enable %}
<br><span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
</p>
</a>
</div>

 

 

Any help would be appreciated! Not exactly a coder here

0 Likes
Highlighted
Shopify Partner
297 56 71

Hello @Chloe_Brown,

 

Replace this

{% capture price %}<strong>{{ product.price | money }}</strong>{% endcapture %}
{% if product.price_varies %}{{ 'products.general.from_html' | t: price: price }}{% else %}{{ price }}{% endif %}

 

with this

{% unless sold_out %}
     {% capture price %}<strong>{{ product.price | money }}</strong>{% endcapture %}
     {% if product.price_varies %}{{ 'products.general.from_html' | t: price: price }}{% else %}{{ price }}{% endif %}
{% endunless %}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

0 Likes
Highlighted
New Member
3 0 0

The other prices are still showing :( 

 

I'm not sure why it continues to show prices for variants that aren't showing. Is there something else it could be?

0 Likes
Highlighted
Shopify Partner
297 56 71

@Chloe_Brown, share store link 

0 Likes