Compare-at price doesn't show if varied across multiple variants

[LexMetcalfe]

Describe the current behavior

The compare-at price will just show "Sale", and omit the dollar value of the compare at price if it is varied across a product's variants.

Describe the expected behavior

Have the compare at price to always regardless of variation across variants.

Version information (Dawn, browsers and operating systems)

• Dawn Version: 2.2.0
• Chrome Version 95.0.4638.69
• macOS Version 12.01

Possible solution

Remove the price--no-compare class from the price <div> in price.liquid with a tickbox setting in the theme editor.

[Screenshot removed]

Additional context/screenshots

Before: [Screenshot removed]

After: [Screenshot removed]

[shawnr42]

I found a clean fix for this that still allows hiding the compare price on the collection page.

Replace this line of code

  {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}

And add target == product to the list of conditions. It should look like this in the end.

{%- if target == product and product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}

Do the same under

<div class="price__sale">

and you can find this code

{%- unless product.price_varies == false and product.compare_at_price_varies %}

Add the same target == product to the list of conditions like this.

{%- unless product.price_varies == false and product.compare_at_price_varies %}

Then it will only show the compare at price on the product page if the compare price varies, but it won't show on the collection page, where the compare price is different for different variants.

[Roi-Arthur]

Adding a video since I think the screenshots used originally might have been hosted through Monosnap and have been removed since https://user-images.githubusercontent.com/48017311/231120602-dba1d724-33d7-4903-850a-d78fa6a99a30.mp4

[randy-peterson]

Had a merchant today experiencing this issue on Sense 11.0. Applied Shawn's workaround above and that seemed to do the trick. Ticket: https://shopify.zendesk.com/agent/tickets/45560718

[shawnr42]

Related issue I found.

If a product has 2 variants. Let's say "single" or "case of 12".

Single is $10 - no compare at price. Case is $99 - Compare at $120.

In this situation, it will show

~$120~ From $10

[persephoneenee]

Hi there! I had a ticket today where the same logic applied as mentioned in the last comment from Shawn. I applied the changes as explained by Shawn, with a slight adjustment and that did the trick for me.

Replace this line of code {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}

And add target == product and to the list of conditions. It should look like this in the end.

{%- if target == product and product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}

Under <div class="price__sale"> you can find this code

{%- unless product.price_varies == false and product.compare_at_price_varies %}

Add the same target == product and to the list of conditions and change the condition product.price_varies == false to true. It should look like this:

{%- unless target == product and product.price_varies == true and product.compare_at_price_varies %}

Here is the ticket link and a screen recording.

Hope that helps!

[mpickett-shopify]

I've been testing out the different iterations of the code added above by both Shawn and Nini. They both work for the Product page on the ticket I've pulled with this issue, however Shawn's code doesn't affect the display of the pricing on the Collection grid and Nini's ends up removing compare at pricing from products that were previously displaying correctly on the collection page.

Tried to work out other solutions to allow for this to not affect products that were currently working properly on the collection grid but couldn't find a solution.

[shawnr42]

@mpickett-shopify the reason I didn't put it on the product grid is because if the compare price varies, the regular price varies and you can end up with some really bad compare prices.

Product has 3 variants, not all on sale.

Variant 1 - $150 Variant 2 - $150 compare at $200 Variant 3 - $200 compare at $250

You an end up with a product with a price ~$150~ $150 which can confuse customers. I figured leaving it was better than showing wrong information.

It's worth noting, handling varying compare prices has been an issue for quite some time, going back to this old issue from 9 years ago. https://github.com/Shopify/shopify-themes/issues/1668

[Roi-Arthur]

Price is still the bane of our existence… Would an approach like this work (to use less code)?

{% assign cheapest_var = product.variants | sort: 'price' | first | default: product %}
{% if cheapest_var.compare_at_price > cheapest_var.price %}
  <s>{{ cheapest_var.compare_at_price | money }}</s>
{% endif %}
{{ cheapest_var.price | money }}

The one case I can think of that might be ambiguous is if more than 1 variants have the same price equal to the lowest and have different compare_at_price. You'd then be returning the first variant with that price.

[shawnr42]

That works if the cheapest variant is on sale. In my example above where the first variant wasn't on sale, the product won't show a sale price.

Variant 1 - $150 Variant 2 - $150 compare at $200 Variant 3 - $200 compare at $250

But the product should still show on sale. In this scenario we're in the same situation. Showing as on sale, without showing the compare at price.

It's an ok solution, but still not perfect.

[Roi-Arthur]

Yeah I was trying to spin things some more but not really getting anywhere satisfying and not using several hugely loops/conditions. We'll hopefully take a stab at simplifying price in the medium term