HELP! On my website price doesn't change with product variant

New Member
2 0 0

When a customer selects a new variant, the price doesn't change for them. It stays at the same price. But then when in cart the correct price is shown!

Here's some of my product template.liquid, any help would be much appreciated (:

<style>
  {% if section.settings.variant_swacth == 'two'  %} 
  .selector-wrapper {
    display:none;
  }
  {% endif %}
  .product-description {
    margin-bottom: 12px;
  }
</style>
<script>
  {% if section.settings.buy_it_now_action == 'direct_to_cart' %}var buyitnowaction = true;{% else %}var buyitnowaction = false;{% endif %}{% if section.settings.enable_related_upsell %}var relatedupsellenable = true;{% else %}var relatedupsellenable = false;{% endif %}{% if section.settings.buy_it_now_action == 'thank_you_message' %}var thankmsg = true;{% else %}var thankmsg = false;{% endif %}{% if section.settings.buy_it_now_action == 'direct_to_checkout' %}var drchkout = true;{% else %}var drchkout = false;{% endif %}
  {% if section.settings.enable_sticky %}var eblstcky = true;{% else %}var eblstcky = false;{% endif %}{% if section.settings.enable_payment_button %}var ebl_pay_but = true;var addToCartBtnLabel_1 = "{{ 'products.dynamic_checkout_buttons.add_to_cart_text_when_dynamic_checkout_buttons_enable' | t }}";{% else %}var ebl_pay_but = false;var addToCartBtnLabel_1 = "{{ 'products.product.add_to_cart' | t }}";{% endif %}{% if section.settings.visitor_counter_enable %}var visitorcountr = true;{% else %}var visitorcountr = false;{% endif %}
</script>
<div class="product-template__container product-{{ product.id }} page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
{% if product.metafields.loox.num_reviews %}
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="{{ product.metafields.loox.avg_rating }}"/>
<meta itemprop="ratingCount" content="{{ product.metafields.loox.num_reviews }}"/>
</div>
{% endif %}
  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">
 
  {% comment %}
  Get first variant, or deep linked one
  {% endcomment %}
  {%- assign current_variant = product.selected_or_first_available_variant -%}
 
  {%- assign product_image_zoom_size = '1024x1024' -%}
  {%- assign product_image_scale = '2' -%}
  {%- assign enable_zoom = section.settings.enable_zoom -%}
 
  <div class="grid product-single">
    <div class="grid__item product-single__photos medium-up--one-half">
      {%- assign featured_image = product.featured_image -%}
      {% for image in product.images %}
      {% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
      {% capture img_class %}product-featured-img{% endcapture %}
      {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
      {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
      {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
 
      {% include 'image-style' with small_style: true, width: 530, height: 530, wrapper_id: img_wrapper_id, img_id: img_id %}
 
      <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper small--hide js">
        <div id="{{ zoom_img_id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;" class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}" data-image-id="{{ image.id }}"{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
          <img id="{{ img_id }}"
               class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
               src="{{ image | img_url: '300x300' }}"
               data-src="{{ img_url }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ image.aspect_ratio }}"
               data-sizes="auto"
               alt="{{ image.alt | escape }}">
        </div>
      </div>
      {% endfor %}
 
      <noscript>
        {% capture product_image_size %}530x{% endcapture %}
        <img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: 530px;">
      </noscript>
 
 
      {% if product.images.size > 1 %}
      {%- assign enable_thumbnail_slides = true -%}
      {% endif %}
 
      <div class="thumbnails-wrapper {% if product.images.size == 1 %}medium-up--hide{% endif %}{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
        {% if enable_thumbnail_slides == true %}
        <button type="button" class="btn btn--link small--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
          {% include 'icon-chevron-left' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
        </button>
        {% endif %}
        <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
          {% for image in product.images %}
          <li class="grid__item {% unless enable_thumbnail_slides == true %}{{ product_thumbnail_width }} {% endunless %}{% if product.images.size > 1 %}product-single__thumbnails-item{% endif %} js">
            <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
               class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
               data-thumbnail-id="{{ image.id }}"
               {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
              <img class="product-single__thumbnail-image medium-up--hide" src="{{ image.src | img_url: '480x480', scale: 2 }}" alt="{{ image.alt | escape }}">
              <img class="product-single__thumbnail-image small--hide" src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
            </a>
          </li>
          {% endfor %}
        </ul>
        {% if enable_thumbnail_slides == true %}
        <button type="button" class="btn btn--link small--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
          {% include 'icon-chevron-right' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
        </button>
        {% endif %}
      </div>
 
      <form style="display: none;" method="post" action="/cart">
 
        <input  type="submit" class="custome_checkout" value="checkout" name="checkout"/>
 
      </form>
    </div>
    <div class="grid__item medium-up--one-half">
      <div class="product-single__meta">
 
        <h1 itemprop="name" class="product-single__title heading">{{ product.title }}</h1>
 
        {% if section.settings.show_vendor %}
        <p itemprop="brand" class="product-single__vendor">{{ product.vendor }}</p>
        {% endif %}
 
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="priceCurrency" content="{{ shop.currency }}">
 
          <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
 
           <p class="product-single__price product-single__price-{{ section.id }}{% unless current_variant.available %} product-price--sold-out{% endunless %}">
            {% if current_variant.compare_at_price > current_variant.price %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <s id="ComparePrice-{{ section.id }}">{{ current_variant.compare_at_price | money }}</s>
            <span class="product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single">
              <span id="ProductPrice-{{ section.id }}"
                    itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | money }}
              </span>
              {% if section.settings.show_saved_amount %}
              <!-- Dscount price in percentage  -->
              <span class="save_discount_pro">
              {% if current_variant.compare_at_price > current_variant.price %}
                {% if settings.show_discount_amount == 'percent_save' %}
                <span class="per_discount">
                  {% comment %}
                    {% endcomment %}
                  {% assign money_pro_format = shop.money_format | strip_html | json %}
             
                  {% if money_pro_format contains "${{amount_no_decimals}}" or money_pro_format contains "${{amount_no_decimals_with_comma_separator}}" %}
                  {{ current_variant.compare_at_price  | minus: current_variant.price  | times: 100.0 | divided_by: current_variant.compare_at_price | times: 100 | money_without_currency | replace:",","." | replace: '.0', '' }}{{ 'products.product.on_save' | t }}
                  {% elsif money_pro_format contains "${{amount_with_comma_separator}}" %}
                  {{ current_variant.compare_at_price  | minus: current_variant.price  | times: 100.0 | divided_by: current_variant.compare_at_price | money_without_currency | replace:",","."  | times: 100 | replace: '.0', '' }}{{ 'products.product.on_save' | t }}
  {% else %}                  
                  {{ current_variant.compare_at_price  | minus: current_variant.price  | times: 100.0 | divided_by: current_variant.compare_at_price  | money_without_currency | times: 100 | replace: '.0', ''}}{{ 'products.product.on_save' | t }}
                  {% endif %}
                  </span>
                <!-- Dscount price in percentage  -->
                {% else %}
                <span class="sale-tag salePrice large"> 
                  {% assign sale = current_variant.compare_at_price | minus:  current_variant.price |  money %}
                  {{ 'products.product.on_save_like_price' | t }} {{sale}}
                </span>
                {% endif %}
              {% endif %}
              </span>
              {% endif %}
            </span>
            {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <s id="ComparePrice-{{ section.id }}" class="hide">{{ current_variant.compare_at_price | money }}</s>
            <span class="product-price__price product-price__price-{{ section.id }}">
              <span id="ProductPrice-{{ section.id }}"
                    itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | money }}
              </span>
              {% if section.settings.show_saved_amount %}
              <span class="save_discount_pro hide">
              </span>
              {% endif %}
              
            </span>
            {% endif %}
          </p>
          {% comment %}
          {% if current_variant.price != 0 %}
          {% else %}
          <p class="free_itm">
            {{ 'collections.tag.free_text' | t }}</p>
          {% endif %}
          {% endcomment %}
          {% if section.settings.product_review  %}
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          {% endif %}
          {% if section.settings.product_description == 'under_the_price'%}
          <div class="product-single__description rte" itemprop="description">
            <ul class="tabs">
              <li><a href="#tab-1">{{ 'products.product_tab.product_tab_1' | t }}</a></li>
 
            </ul>
            <div id="tab-1">
              <div class="product-description">
                {{ product.description }}
              </div>
            </div>
 
          </div>
          {% endif %}
          
          {%- capture "form_classes" -%}
          product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
          {%- endcapture %}
 
      {% form 'product', product, id: "AddToCartForm", class:form_classes, data-product-id: "{{ product.id }}", data-section: "{{ section.id }}", data-product: "{{ product | json | escape }}" %}
      
            {% if section.settings.show_quantity_selector %}
            <div class="product-form__item one-whole medium-up--hide product-form__item--quantity_1 prod_qty_mobile">
              <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
              <div class="qty_selector">
                <span class='qtyminus' field='quantity'>{% include 'icon-minus' %}</span>
                <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*">
                <span class='qtyplus' field='quantity'>{% include 'icon-plus' %}</span>
              </div>            
            </div>
            {% else %}
            <input type="hidden" id="Quantity" name="quantity" value="1" class="product-form__input prod_qty_mobile">
            {% endif %}
         
            {% unless product.has_only_default_variant %}
            {% if section.settings.show_tags %}
            <div class="prod_tags">
              <h5>{{ 'products.product.tags' | t }} : </h5>
              {% for tag in product.tags %}
              <span>{{ tag }}</span>
              {% endfor %}
            </div>
            {% endif %}
            {% for option in product.options_with_values %}
 
            <div class="selector-wrapper small--one-whole js product-form__item">
              <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                {{ option.name }}
              </label>
              <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                {% for value in option.values %}
                <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                {% endfor %}
              </select>
            </div>
            {% endfor %}
            {% endunless %}
 
            <select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
              {% if variant.available %}
              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
                {{ variant.title }}
              </option>
              {% else %}
              <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
              {% endif %}
              {% endfor %}
            </select>
 
            <!-- PRODUCT SWATCH CODE IF ENABLE -->
            {% if section.settings.variant_swacth == 'two'  %}  
            {% if product.variants.size > 1 %}
            <div class="swatch_options">
            {% for option in product.options %}
            {% include 'swatch' with option %}
            {% endfor %} 
            </div>
            {% endif %}
            {% endif %} 
            <!-- END PRODUCT SWATCH CODE IF ENABLE -->
            {% include 'product-page-features' %}
            <input required type="hidden" id="upsellcheckquantity" name="properties[upsellcheckquantity]">
         {% endform %}
 
          {% if section.settings.enable_sticky %}
 
          <style>
 
            @media(max-width:749px) {
              /*               .counter_box.show{display:none !important;} */
              /*
              div#progressBar{ 
              display:none !important;
            }
              .counter_box.show {
              display: none !important;
            } */
 
              .product-form__item.product-form__item--quantity,  
              .product-form__item.product-form__item--quantity + div {
                display : none !important;
              }
            
              .only_desktop{
                display:none !important;
              }
              #AddToCartForm .cst-small-crtbtn button#AddToCart,
              #AddToCartForm .qty_stickyfor button#AddToCart,
              #AddToCartForm .qty_stickyfor button#AddToCartZero {
                display:none;
              }
              #AddToCartForm .qty_stickyfor .ajaxified-cart-feedback{
                display:none!important;
              }
              .stiky_form div#mst-stiky-box {
                left: 0 !important;
                width: 100%;
                right:0;
              }
              .price-lable {
                font-size: 16px !important;
                font-weight: 500 !important;
                text-align: center;
                margin-bottom: 12px;
              }
              .mst-stiky-div.fix-search {
                position: fixed;
                top: 8px;
                z-index: 999;
                width: 310px;
                right: 0;
                display: block!important;
              }
              {% if section.settings.enable_payment_button %}
              .stiky_form div#mst-stiky-box {
                padding-bottom: 70px;
              }
              .shopify-payment-button {
                position: fixed;
                bottom: -20px;
                width: 100%;
                z-index: 1000;
                left: auto;
                right: 0;
                padding-left: 10px;
                padding-right: 10px;
              }
              {% endif %}
            }
 
            @media(min-width:750px){
 
 
 
              button#AddToCart {
                visibility: visible !important;
              }
 
            }
          </style>
 
          {% if section.settings.enable_buy_it_stiky_qty %}
          <style> 
            @media screen and (max-width:749px) {
              #mst-stiky-box div#sticky_btnn.product-form__item--quantity{ display:none !important; } 
              #AddToCartForm1.stiky_form button#AddToCart{ width:100% !important; } 
              #progress_bar1,#progressBar{ display: none !important; } 
            }
            {% if section.settings.enable_buy_it_stiky_qty and section.settings.sticky_button == 'show_progress_bar' %}
            #progress_bar2,#progressBar1{ display: block !important; }
            #AddToCartForm1.stiky_form .product-form__item.product-form__item--quantity input#Quantity {
              padding: 9px;
            }
            {% endif %}
 
          </style>
          {% else %}
 
          <style> 
            @media screen and (max-width:749px) {
              #mst-stiky-box div#sticky_btnn.product-form__item--quantity{ display:block !important;float: left;width: 25% !important;padding-right: 0 !important; } 
            }
          </style>
 
          {% endif  %}
 
0 Likes