Display Price Of Available Variants, Not Lowest Price

[Dclootbox]

Hello.

I have fixed it so that it shows the first available variant instead of the lowest price.

If I then have offers for all variants, then it takes the price of the offer from the lowest price and not the first variant that is in stock.

Hope you can help.

Here is the code

PRODUCT CASE (used on card)
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if product.price_varies and product.compare_at_price -%}
{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}

{%- capture price_min -%}
{%- if settings.currency_code_enabled -%}
{{- cheapest_variant.price | money_with_currency -}}
{%- else -%}
{{ product.selected_or_first_available_variant.price | money }}
{%- endif -%}
{%- endcapture -%}

{%- if cheapest_variant.price < cheapest_variant.compare_at_price -%}
<sale-price class="{{ on_sale_price_classes }}">
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
{{- 'product.price.from_price_html' | t: price_min: price_min -}}
</sale-price>

<compare-at-price class="{{ compare_at_price_classes }}">
<span class="sr-only">{{ 'product.price.regular_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- cheapest_variant.compare_at_price | money_with_currency -}}
{%- else -%}
{{- cheapest_variant.compare_at_price | money -}}
{%- endif -%}
</compare-at-price>
{%- else -%}
<sale-price class="{{ regular_price_classes }}">
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
{{- 'product.price.from_price_html' | t: price_min: price_min -}}
</sale-price>
{%- endif -%}
{%- elsif product.price < product.compare_at_price -%}
<sale-price class="{{ on_sale_price_classes }}">
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}
</sale-price>

<compare-at-price class="{{ compare_at_price_classes }}">
<span class="sr-only">{{ 'product.price.regular_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- product.compare_at_price | money_with_currency -}}
{%- else -%}
{{- product.compare_at_price | money -}}
{%- endif -%}
</compare-at-price>
{%- elsif product.price_varies -%}
{%- capture price_min -%}
{%- if settings.currency_code_enabled -%}
{{ product.price_min | money_with_currency }}
{%- else -%}
{{ product.price_min | money }}
{%- endif -%}
{%- endcapture -%}

{%- capture price_max -%}
{%- if settings.currency_code_enabled -%}
{{- product.price_max | money_with_currency -}}
{%- else -%}
{{- product.price_max | money -}}
{%- endif -%}
{%- endcapture -%}

<sale-price class="{{ regular_price_classes }}">
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
{{- 'product.price.from_price_html' | t: price_min: price_min, price_max: price_max -}}
</sale-price>
{%- else -%}
<sale-price class="{{ regular_price_classes }}">
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}
</sale-price>
{%- endif -%}
{%- endif -%}

{%- unless hide_unit_price -%}
{%- assign unit_price_item = variant | default: line_item | default: product.selected_or_first_available_variant -%}

{%- if unit_price_item.unit_price or form_id != blank -%}
<unit-price {% if form_id %}form="{{ form_id }}"{% endif %} {% unless unit_price_item.unit_price %}hidden{% endunless %} class="{{ unit_price_classes }}">
{%- assign unit_price_measurement = unit_price_item.unit_price_measurement -%}

{%- if unit_price_measurement.reference_value != 1 -%}
{%- assign reference_value = unit_price_measurement.reference_value -%}
{%- endif -%}

({{ unit_price_item.unit_price | money }}/{{ reference_value }}{{ unit_price_measurement.reference_unit }})
</unit-price>
{%- endif -%}
{%- endunless -%}
</price-list>

[ZestardTech · Accepted solution]

Hello @Dclootbox 

Based on the provided code snippet, it appears that you are trying to display the prices for different variants of a product in your Shopify store. If I understand correctly, you want to modify the code to display the first available variant's price instead of the lowest price when all variants have offers.

To achieve this, you can make the following changes to your code:

Replace the following line:

{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}

with:

{%- assign cheapest_variant = product.variants | where: 'available', true | first -%}

This change will ensure that the cheapest_variant variable is assigned the first available variant instead of the one with the lowest price.

Please note that the modified code assumes that you have a available property for each variant that indicates whether the variant is available or not.

After making this change, test your product page to verify if the first available variant's price is displayed correctly when all variants have offers.

Remember to always backup your theme files before making any modifications and test the changes thoroughly to ensure they work as expected.

[Dclootbox]

worked like a charm 🙂

Thanks a lot.

[ZestardTech]

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

[Trondur_Skaalum]

What file to edtit?

[MrFoxmox]

Where can i modify this, i have MOTION Theme?

[MrFoxmox]

Where can i modify this, i have MOTION Theme?

[Cheese_Claire]

Hello @Dclootbox Is your code above to show the default variant in the catalog page rather than the cheapest?  If so this is exactly what I'm struggling to do.  Could you please let me know (in very basic terms) where your code goes/replaces?  If you could help I'd really appreciate it.

Thanks.

[Dclootbox]

Hello.

The code dont work anymore ..

[Cheese_Claire]

Oh, sad. Thanks for letting me know.

[Dclootbox]

PRODUCT CASE (used on card)
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if product.price_varies and product.compare_at_price -%}
{%- assign cheapest_variant = product.variants | where: 'available', true | first -%}

{%- capture price_min -%}
{%- if settings.currency_code_enabled -%}
{{- cheapest_variant.price | money_with_currency -}}
{%- else -%}
{{ product.selected_or_first_available_variant.price | money }}
{%- endif -%}
{%- endcapture -%}

{%- if cheapest_variant.price < cheapest_variant.compare_at_price -%}
<sale-price class="{{ on_sale_price_classes }}">
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
{{- 'product.price.from_price_html' | t: price_min: price_min -}}
</sale-price>

<compare-at-price class="{{ compare_at_price_classes }}">
<span class="sr-only">{{ 'product.price.regular_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- cheapest_variant.compare_at_price | money_with_currency -}}
{%- else -%}
{{- cheapest_variant.compare_at_price | money -}}
{%- endif -%}
</compare-at-price>
{%- else -%}
<sale-price class="{{ regular_price_classes }}">
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
{{- 'product.price.from_price_html' | t: price_min: price_min -}}
</sale-price>
{%- endif -%}
{%- elsif product.price < product.compare_at_price -%}
<sale-price class="{{ on_sale_price_classes }}">
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}
</sale-price>

<compare-at-price class="{{ compare_at_price_classes }}">
<span class="sr-only">{{ 'product.price.regular_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- product.compare_at_price | money_with_currency -}}
{%- else -%}
{{- product.compare_at_price | money -}}
{%- endif -%}
</compare-at-price>
{%- elsif product.price_varies -%}
{%- capture price_min -%}
{%- if settings.currency_code_enabled -%}
{{ product.price_min | money_with_currency }}
{%- else -%}
{{ product.selected_or_first_available_variant.price | money }}
{%- endif -%}
{%- endcapture -%}

{%- capture price_max -%}
{%- if settings.currency_code_enabled -%}
{{- product.price_max | money_with_currency -}}
{%- else -%}
{{- product.price_max | money -}}
{%- endif -%}
{%- endcapture -%}

<sale-price class="{{ regular_price_classes }}">
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
{{- 'product.price.from_price_html' | t: price_min: price_min, price_max: price_max -}}
</sale-price>
{%- else -%}
<sale-price class="{{ regular_price_classes }}">
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}
</sale-price>
{%- endif -%}
{%- endif -%}

{%- unless hide_unit_price -%}
{%- assign unit_price_item = variant | default: line_item | default: product.selected_or_first_available_variant -%}

{%- if unit_price_item.unit_price or form_id != blank -%}
<unit-price {% if form_id %}form="{{ form_id }}"{% endif %} {% unless unit_price_item.unit_price %}hidden{% endunless %} class="{{ unit_price_classes }}">
{%- assign unit_price_measurement = unit_price_item.unit_price_measurement -%}

{%- if unit_price_measurement.reference_value != 1 -%}
{%- assign reference_value = unit_price_measurement.reference_value -%}
{%- endif -%}

({{ unit_price_item.unit_price | money }}/{{ reference_value }}{{ unit_price_measurement.reference_unit }})
</unit-price>
{%- endif -%}
{%- endunless -%}
</price-list>

[Dclootbox]

im my theme (impact) i put it under snippet/price-list.liquid