Compare at price does not change when changing variant

Solved
oclabs
New Member
4 0 0

Hello everyone, I am having an issue where my compare at price doesn't change when I select different variants. 

 

Here is a quick video: https://streamable.com/uza4i

 

Here is a picture of the prices in the backend.

compare at prices.PNG

 

This is the code

 {% if product.selected_or_first_available_variant.price < product.selected_or_first_available_variant.compare_at_price %}
    <li class="price">
      <span class="price-old" id="comparePrice" >{{ product.selected_or_first_available_variant.compare_at_price | money }}</span>
      <span class="price-new" id="productPrice">{{ product.selected_or_first_available_variant.price | money }}</span>
    </li>
    {% else %}
    <li class="price">
      <span id="productPrice">{{ product.selected_or_first_available_variant.price | money }}</span>
    </li>
    {% endif %}

Thanks for the help.

0 Likes
Qualitycheck
Shopify Expert
1404 114 225

Please share a store url to better assist.

0 Likes
Jasoliya
Shopify Expert
4299 569 1073

This is an accepted solution.

Hi @oclabs 

For that you have to check in your Variants select callback function because on variants selection its work base on Js code,

Check in Asset-.theme.js and find "if(variant)"

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
oclabs
New Member
4 0 0

Fixed! I don't know much JS but I took a look at it and managed to get it fixed, Thank You!

0 Likes
Micky_D
Tourist
5 0 1

Would you mind sharing the code you added? I just uploaded my sale prices for early black friday, and all my product with variants are showing the price and sale price the same (both sale price value).

Thank you for any insight!

0 Likes
Micky_D
Tourist
5 0 1

<span itemprop="price" content="{{ variant.price | money_without_currency | remove: "," }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
<span class="current_price {% if product.available == false %}hidden{% endif %}">
{% if variant.price > 0 %}
<span class="money">{{ variant.price | money }}</span>
{% else %}
<span class="money">{{ settings.free_price_text }}</span>
{% endif %}
</span>
</span>
<span class="was_price">
{% if variant.price < variant.compare_at_price and variant.available %}
<span class="money">{{ variant.compare_at_price | money }}</span>
{% endif %}
</span>

 

 

 

Would it be anything in this code?

0 Likes
oclabs
New Member
4 0 0

 

{% if settings.product_show_compare_at_price %}
      if (variant.compare_at_price > variant.price) {
        var a11yComparePrice = Shopify.formatMoney(variant.compare_at_price, Shopify.money_format);
        var customComparePriceFormat = ' <span class="visually-hidden">' + a11yComparePrice + '</span>';
        $comparePrice.html(customComparePriceFormat);
      }
      {% endif %}

So this is currently what the code looks like once i fixed it. I'm using a theme off of themeforest so I never originally made the code but I was able to figure out how they got the price to change and just copied it to work for the sale price. This if statement had some commented out lines originally and I thought maybe they if I uncommented them everything would work but that wasn't the case so I got rid of those lines. I only added these two lines at the bottom which I copied from the code thats used to get the regular price to change and tweaked it so it would work for the compare price. 

 

var customComparePriceFormat = ' <span class="visually-hidden">' + a11yComparePrice + '</span>';
$comparePrice.html(customComparePriceFormat);

 

The rest of the code is what was there from the start. I don't know how much of this is useful to you, but like I said in the other post I don't know much JS. Also I found this code is my product.liquid file.

 

 

 

0 Likes
Micky_D
Tourist
5 0 1

Thank you for taking the time to reply, I'll start a new topic and see if anyone can help with my theme

Cryssie101
Tourist
3 0 0

Hello @oclabs,

I seem to be having the same problem. On my website I have certain products that I would like to show the price per litre. However that shopify option is only available in Germany and France right now. I thought I had a work around for the code - I put the price per litre in the compare at field for the product and then change the code to include the compare at price if it is < (less than) the Variant price. I managed to get it working - https://www.onetabs.ca/collections/disinfectants/products/p2-disinfectant 

 

However, the "As low as $x.xx/litre does not change when a different size is selected. Only if you select the size and then refresh the page. 

Any help you can provide would be greatly appreciated.

Here is the code for the .liquid file that I am changing:

product-template-proline.liquid

{% comment %}-------------- made alot of changes to this template - if you need to revert open product-template.liquid and copy and paste the info back into this document and save---------------------{% endcomment %}

{% if section.settings.product_breadcrumb == false %}
  {% style %}
    .breadcrumb__wrapper {
      display: none !important;
    }
  {% endstyle %}
{% endif %}
{% style %}
h1.product_name {
margin-bottom: 0 !important;
}
{% endstyle %}







<div class="sixteen columns" data-initial-width="sixteen" data-sidebar-width="twelve">
  <div class="product-{{ product.id }}">
    <div class="section product_section js-product_section clearfix
    {% if product.images.size > 1 %} thumbnail_position--{{settings.thumbnail_position}} {% endif %} product_slideshow_animation--{{settings.product_slideshow_animation}}"
       data-thumbnail="{{settings.thumbnail_position}}"
       data-slideshow-animation="{{settings.product_slideshow_animation}}"
       data-slideshow-speed="{{settings.slideshow_speed}}"
       itemscope itemtype="http://schema.org/Product">

      <div class="nine columns {% if product-images == blank %}{% if section.settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %} {% if section.settings.product_images_position == 'right' %}mobile_only{% endif %}" data-initial-width="nine" data-sidebar-width="seven">
        {% include 'product-images' %}
      </div>
      
      <div class="seven columns {% if section.settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}" data-initial-width="seven" data-sidebar-width="five">

        {% assign collection_handles = product.collections | map: 'handle' %}
        {% assign variant = product.selected_or_first_available_variant %}




        
        <div class="proline_logo" style="text-align: center"><img src="https://cdn.shopify.com/s/files/1/0270/2652/2146/files/OneTab_Pro_Logo.png?v=1575507530" alt="OneTab Pro" style="width: 350px"></div> 
        <h1 class="product_name" itemprop="name">{{ product.title }}</h1>
        
        {% if section.settings.display_vendor %}
          <p class="vendor">
            <span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
          </p>
        {% endif %}

        {% if variant.sku != blank and section.settings.display_sku %}
          <p class="sku">
            <span itemprop="sku">{{ variant.sku }}</span>
          </p>
        {% endif %}

    
        
        
        
{% comment %}-------------- added this code to re-show prices ---------------------{% endcomment %}   
        {% unless collection_handles contains 'coming-soon' %}
          <p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
            <meta itemprop="seller" content="{{ shop.name | escape }}" />
            <link itemprop="availability" href="http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}">
            <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition"/>

            <span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
            <span itemprop="price" content="{{ variant.price | money_without_currency | remove: "," }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">   
              <span class="current_price {% if product.available == false %}hidden{% endif %}">
                {% if variant.price > 0 %}
                  <span class="money">{{ variant.price | money }}</span>
                {% else %}
                  {{ settings.free_price_text }}
                {% endif %}
              </span>
            </span>
            
            
            
            
            
            


            
{% comment %}-------------- changed this code to show price per litre - compare at price - for PRO products ---------------------{% endcomment %}               
            <span class="was_price">
              {% if variant.price > variant.compare_at_price and variant.available %}
              <p>     <span class="money">As Low as {{ variant.compare_at_price | money | escape}}/LITRE!</span></p>
              
              
              {% endif %}
            </span>
            
            
            
          </p>
        
        
          {% if settings.notify_me_form %}
            {% include 'product-notify-me' %}
          {% endif %}
        {% endunless %}

        
        
        {% if section.settings.product_description_position == "top" %}
          {% if product.description != blank %}
           <div class="description" itemprop="description">
             {% if product.description contains '<!-- split -->' %}{{ product.description | split: '<!-- split -->' | first  }}{% else %}{% include 'product-description-slider' %}{% endif %}
           </div>
         {% endif %}
        {% endif %}

        {% unless collection_handles contains 'coming-soon' %}
          {% include 'product-form' with 'product' %}
        {% endunless %}

        {% if section.settings.product_description_position == "bottom" %}
          {% if product.description != blank %}
           <div class="description" itemprop="description">
            {% if product.description contains '<!-- split -->' %}{{ product.description | split: '<!-- split -->' | first  }}{% else %}{% include 'product-description-slider' %}{% endif %}
           </div>
          {% endif %}
        {% endif %}
        
        
{% comment %}-------------- deleted code for reviews ---------------------{% endcomment %}



        
        
        {% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
         <hr />
        {% endif %}

        <div class="meta">

          {% include "social-buttons" with "product" %}

          {% if section.settings.display_collections %}
            <p>
              <span class="label">{{ 'products.product.collections' | t }}:</span>
              <span>
               {% for col in product.collections %}
                 <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
               {% endfor %}
             </span>
           </p>
          {% endif %}

          {% if section.settings.display_tags %}
             <p>
               {% for tag in product.tags %}
                 {% if forloop.first %}
                   <span class="label">{{ 'products.product.tags' | t }}:</span>
                 {% endif %}

                 {% unless tag contains 'meta-' %}
                   <span>
                     <a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
                   </span>
                 {% endunless %}
               {% endfor %}
             </p>
          {% endif %}

         {% if section.settings.display_type %}
            <p>
              <span class="label">{{ 'products.product.product_types' | t }}:</span>
              <span>{{ product.type | link_to_type }}</span>
            </p>
         {% endif %}
        </div>
      </div>

      {% if section.settings.product_images_position == 'right' %}
        <div class="nine columns {% if product-images == blank %}{% if section.settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %} mobile_hidden" data-initial-width="nine" data-sidebar-width="seven">
          {% include 'product-images' %}
        </div>
      {% endif %}
    </div>

    {% if product.description contains "<!-- split -->"  %}
      <br class="clear" />
      <div class="section clearfix">
        <div class="description">
          {% capture desctabs %}{{ product.description | split: '<!-- split -->' | last  }}{% endcapture %}{% include 'product-description-slider' with desctabs %}
        </div>
      </div>
    {% endif %}


    </div>
  </div>


<style>
  {% if section.settings.set_product_height %}
    .product_slider .slides img { max-width: {{ section.settings.product_height }}px; }
  {% endif %}
</style>

{% schema %}
{
  "name": "Product",
  "class": "product-template-section clearfix",
  "settings": [
    {
      "type": "checkbox",
      "id": "product_breadcrumb",
      "label": "Show breadcrumb links"
    },
    {
      "type": "checkbox",
      "id": "display_tags",
      "label": "Show tags"
    },
    {
      "type": "checkbox",
      "id": "display_type",
      "label": "Show type"
    },
    {
      "type": "checkbox",
      "id": "display_vendor",
      "label": "Show vendor"
    },
    {
      "type": "checkbox",
      "id": "display_sku",
      "label": "Show SKU"
    },
    {
      "type": "checkbox",
      "id": "display_social_buttons",
      "label": "Show social media share icons",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "display_collections",
      "label": "Show collections"
    },
    {
      "type": "radio",
      "id": "product_description_position",
      "label": "Description position",
      "options": [
        {
          "value": "top",
          "label": "Above 'add to cart'"
        },
        {
          "value": "bottom",
          "label": "Below 'add to cart'"
        }
      ]
    },
    {
      "type": "radio",
      "id": "product_images_position",
      "label": "Images position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "set_product_height",
      "label": "Set height of product images"
    },
    {
      "type": "range",
      "id": "product_height",
      "label": "Product image height",
      "min": 200,
      "max": 800,
      "step": 10,
      "default": 500,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Dynamic checkout button"
    },
    {
      "type": "checkbox",
      "id": "show_payment_button",
      "label": "Show dynamic checkout button",
      "default": true,
      "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
    }
  ]
}
{% endschema %}

 

0 Likes
JarineOMG
New Member
1 0 0

I have the same problem with my variants when selected prices are not changing.  Please help.  Here is the product URL:  https://jarineomg.com/products/jarineomg%E2%84%A2-multifunctional-kitchen-rolling-rack

0 Likes