Re: Display Price Of Available Variants, Not Lowest Price

Solved

Display Price Of Available Variants, Not Lowest Price

Dclootbox
Excursionist
42 0 8

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>

Accepted Solution (1)

ZestardTech
Shopify Partner
5895 1064 1409

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 11 (11)

ZestardTech
Shopify Partner
5895 1064 1409

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Dclootbox
Excursionist
42 0 8

worked like a charm 🙂

 

Thanks a lot.

ZestardTech
Shopify Partner
5895 1064 1409

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Trondur_Skaalum
Shopify Partner
1 0 0

What file to edtit?

MrFoxmox
New Member
4 0 0

Where can i modify this, i have MOTION Theme?

MrFoxmox
New Member
4 0 0

Where can i modify this, i have MOTION Theme?

Cheese_Claire
Visitor
3 0 0

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
Excursionist
42 0 8

Hello.

 

The code dont work anymore ..

Cheese_Claire
Visitor
3 0 0

Oh, sad. Thanks for letting me know.

Dclootbox
Excursionist
42 0 8

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
Excursionist
42 0 8

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