Price Not Updating When Changing Variants

Highlighted
Tourist
7 0 1

Hey guys, can somebody help me with this issue?

If I change the selected variant on the product's page, it just won't update.

 

I've found a lot of cases just like mine, but none of the solutions worked for me.

 

#helpmetim

 

Ex: https://shophysio.com/products/pmt-itens-full-kit-device-wireless-electrotherapy?variant=16836450648...

 

Here's the product-template.liquid, if you guys need any other template, please let me know.

 

<div class="product-template__container page-width container-product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" >
    {% 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 -%}
    {%- assign show_review_indicator = section.settings.show_review_indicator -%}
    {%- assign compare_at_price = current_variant.compare_at_price -%}
    {%- assign price = current_variant.price -%}
    {%- assign min_financing_price = section.settings.min_financing_price | plus: 0 | times: 100 -%}
    {%- assign cta_text = section.settings.cta_text -%}
    {%- assign financing_form_title = section.settings.financing_form_title -%}

    {% case section.settings.image_size %}
        {% when 'small' %}
          {%- assign product_image_width = 'medium-up--one-third' -%}
          {%- assign product_description_width = 'medium-up--two-thirds' -%}
          {%- assign product_thumbnail_width = 'medium-up--one-third' -%}
          {%- assign height = 345 -%}
        {% when 'medium' %}
          {%- assign product_image_width = 'medium-up--one-half' -%}
          {%- assign product_description_width = 'medium-up--one-half' -%}
          {%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
          {%- assign height = 530 -%}
        {% when 'large' %}
          {%- assign product_image_width = 'medium-up--two-thirds' -%}
          {%- assign product_description_width = 'medium-up--one-third' -%}
          {%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
          {%- assign height = 720 -%}
        {% when 'full' %}
          {%- assign product_image_width = '' -%}
          {%- assign product_description_width = '' -%}
          {%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
          {%- assign height = 1090 -%}
          {%- assign enable_zoom = false -%}
    {% endcase %}

    <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.image_size }}-image{% endif %}">
        <div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
        {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: 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: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}

        <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper 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" tabindex="-1" alt="{{ image.alt | escape }}">
            </div>
        </div>
        {% endfor %}

        <noscript>
            {% capture product_image_size %}{{ height }}x{% 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: {{ height }}px;">
        </noscript>     

            <div class="thumb-product">
                {% if product.images.size > 1 %}
                    {% if product.images.size > 3 %}
                    {%- assign enable_thumbnail_slides = true -%}
                {% endif %}

                <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %} relative">
                    <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }} grid-thumb">
                        {% for image in product.images %}
                        <li class="itens-thumb {{ product_thumbnail_width }} product-single__thumbnails-item js">
                        <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}" class="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" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
                        </a>
                    </li>
                    {% endfor %}
                    </ul>
                  
                    {% if enable_thumbnail_slides == true %}
                    <button type="button" class="btn btn--link medium-up--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 %}

                    {% if enable_thumbnail_slides == true %}
                        <button type="button" class="btn btn--link medium-up--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>
                {% endif %} 
            </div>
        </div>

        <div class="grid__item {{ product_description_width }}">
            <div class="product-single__meta relative">
                <h1>{{ product.title }}</h1>

                <span class="stamped-product-reviews-badge stamped-main-badge" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}" style="display: block;"></span>
                <a href="#looxReviews"><div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div></a>

                <div class="review-indicator" id="go-to-reviews-section" style="min-height: 100px; display: none; align-items: center; cursor: pointer;">
                    <a href="#stamped-main-widget">
                        <img src="{{ 'big_stars.png' | asset_img_url: '400x' }}" style="width: 100%;" alt="Product Reviews" />
                    </a>
                </div>

                <span class="vendor">by {{ product.vendor | link_to_vendor }}</span>
                
                <div id="variant-inventory">
                  
                  {% if product.vendor == "Ibramed" %}
                    {% assign remstock = product.variants.first.inventory_quantity | minus: 1 %}
                            {% if remstock < 0 %}
                          <p class="outstock"> Out of stock.</p>
                            {% elsif remstock <= 1  %}
                        <p class="inventory"> Last unit in stock - order now</p>
                        {% elsif remstock <= 8 %}
                        <p class="inventory"> Only {{ remstock }} left in stock - order now</p>
                        {% elsif remstock > 8 %}
                        <p> In Stock</p>
                        {%endif%}
     
                  {% else %}
                    {% if product.variants.first.inventory_management == "shopify" %}
                        <p>{% if product.variants.first.inventory_quantity > 0 %}
                        In stock.
                        {% else %}
                        Out of stock.
                        {% endif %}
                        {% else %}
                        This product is available</p>
                    {% endif %}
                  {% endif %}
                </div>


                <div class="short-description">
                  <p> {{ product.description | truncate: 200 | strip_html }} </p>
                </div>

              <div class="product__price relative">
                <span>Price:</span>
                {% include 'product-price', variant: current_variant | money %} 
              </div>
              
              
              {% comment %} <!-- Insert QuadPay Widget --> {% endcomment %}
              <div style="margin:-20px 0 20px 0; min-height:20px;color:#6d6d6d;">
                <quadpay-widget size="80%" amount="{{ current_variant.price | divided_by: 100.00 }}"></quadpay-widget>
              </div>
                <div class="sales-contact-form">
                    <div class="sales-contact-form-wrapper">
                    <h1 class="contact-form-title text-center">{{ financing_form_title }}</h1>
                    {% form 'contact' %}
                        
                        {% if form.posted_successfully? %}
                            <p class="note form-success">
                            {{ 'contact.form.post_success' | t }}
                            </p>
                        {% endif %}
                        
                        <input type="hidden" class="form-control" name="contact[product_title]" id="product_title_for_financing" value="{{ product.title }}" />
                        <div class="form-group">
                            <label>Name:</label>
                            <input type="text" class="form-control" name="contact[name]" id="customer_name_for_financing" required />
                        </div>
                        <div class="form-group">
                            <label>Email:</label>
                            <input type="email" class="form-control" name="contact[email]" id="customer_email_for_financing" required />
                        </div>
                        <div class="form-group">
                            <label>Phone Number:</label>
                            <input type="tel" class="form-control" name="contact[phone]" id="customer_phone_for_financing" pattern="[0-9\-]*" required />
                        </div>
                        <div class="form-group">
                            <label>Message:</label>
                            <textarea class="form-control" name="contact[message]" id="message_for_financing" required></textarea>
                        </div>
                        <div class="form-group-flex">
                            <button type="button" id="cta-cancel-btn" class="btn btn-info">Cancel</button>
                            <button type="submit" class="btn btn-primary">Send</button>
                        </div>

                    {% endform %}
                    </div>
                </div>

                {% if product.price > min_financing_price %}
                <div class="contact-sales-wrapper">
                    <button class="cta-btn btn btn--secondary-accent" id="cta-button" style="width: 100%;">{{ cta_text }}</button>
                </div>
                {% endif %}
              
             
  <!--------------------- preco ---->            
              
          {% 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, class:form_classes %}
            {% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                <div class="selector-wrapper 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 }}" 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>

            {% if section.settings.show_quantity_selector %}
              <div class="product-form__item product-form__item--quantity">
                <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
                <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
              </div>
            {% endif %}

            <div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
                <span id="AddToCartText-{{ section.id }}">
                  {% unless current_variant.available %}
                    {{ 'products.product.sold_out' | t }}
                  {% else %}
                    {{ 'products.product.add_to_cart' | t }}
                  {% endunless %}
                </span>
              </button>
              {% if section.settings.enable_payment_button %}
                {{ form | payment_button }}
              {% endif %}
              <div class="ultimate-badges"></div>
            </div>
          {% endform %}
          </div> </div> </div> 



<!--------------------------description------>


<div class="container-description">
    <div class="product-single__description rte">
        {{ product.description }}
    </div>
</div>

{% if collection %}
    <div class="text-center return-link-wrapper page-width">
        <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
            {% include 'icon-arrow-left' %}
            {{ 'products.product.back_to_collection' | t: title: collection.title }}
        </a>
    </div>
{% endif %}

{% unless product == empty %}
    <script type="application/json" id="ProductJson-{{ section.id }}">
        {{ product | json }}
    </script>
{% endunless %}



{% schema %}
{
  "name": {
    "de": "Produktseiten",
    "en": "Product pages",
    "es": "Páginas de productos",
    "fr": "Pages de produits",
    "it": "Pagine di prodotto",
    "ja": "商品ページ",
    "pt-BR": "Páginas de produtos"
  },
  "settings": [
    {
      "type": "select",
      "id": "image_size",
      "label": {
        "de": "Foto-Größe",
        "en": "Image size",
        "es": "Tamaño de la imagen",
        "fr": "Taille des images",
        "it": "Dimensione immagine",
        "ja": "画像のサイズ",
        "pt-BR": "Tamanho da imagem"
      },
      "options": [
        {
          "value": "small",
          "label": {
            "de": "Klein",
            "en": "Small",
            "es": "Pequeña",
            "fr": "Petite",
            "it": "Piccolo",
            "ja": "小",
            "pt-BR": "Pequeno"
          }
        },
        {
          "value": "medium",
          "label": {
            "de": "Mittel",
            "en": "Medium",
            "es": "Mediana",
            "fr": "Moyenne",
            "it": "Medio",
            "ja": "中",
            "pt-BR": "Médio"
          }
        },
        {
          "value": "large",
          "label": {
            "de": "Groß",
            "en": "Large",
            "es": "Grande",
            "fr": "Grande",
            "it": "Grande",
            "ja": "大",
            "pt-BR": "Grande"
          }
        },
        {
          "value": "full",
          "label": {
            "de": "Volle Breite",
            "en": "Full-width",
            "es": "Ancho completo",
            "fr": "Pleine largeur",
            "it": "Intera larghezza",
            "ja": "全幅",
            "pt-BR": "Largura completa"
          }
        }
      ],
      "default": "medium"
    },
    {
      "type": "text",
      "id": "min_financing_price",
      "label": {
        "de": "Mindestfinanzierungspreis",
        "en": "Minimum Financing Price",
        "es": "Precio Mínimo de Financiamiento",
        "fr": "Prix de financement minimum",
        "it": "Prezzo minimo di finanziamento",
        "ja": "最低融資価格",
        "pt-BR": "Preço Mínimo de Financiamento"
      },
      "default": "7000"
    },
    {
      "type": "text",
      "id": "cta_text",
      "label": {
        "de": "CTA Text",
        "en": "CTA Text",
        "es": "CTA Texto",
        "fr": "CTA Texte",
        "it": "CTA Testo",
        "ja": "CTA テキスト",
        "pt-BR": "CTA Texto"
      },
      "default": "Financing"
    },
    {
      "type": "text",
      "id": "financing_form_title",
      "label": {
        "de": "Titel des Finanzierungsformulars",
        "en": "Financing Form Title",
        "es": "Título del formulario de financiamiento",
        "fr": "Titre du formulaire de financement",
        "it": "Titolo del modulo di finanziamento",
        "ja": "資金調達フォームのタイトル",
        "pt-BR": "Título do formulário de financiamento"
      },
      "default": "Contact Sales"
    },
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": {
        "de": "Quantitäts-Auswahl anzeigen",
        "en": "Show quantity selector",
        "es": "Mostrar selector de cantidad",
        "fr": "Afficher le sélecteur de quantité",
        "it": "Mostra selettore quantità",
        "ja": "数量セレクターを表示する",
        "pt-BR": "Exibir seletor de quantidade"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_variant_labels",
      "label": {
        "de": "Varianten-Etiketten anzeigen",
        "en": "Show variant labels",
        "es": "Mostrar etiquetas de variantes",
        "fr": "Afficher le nom des variantes",
        "it": "Mostra etichette varianti",
        "ja": "バリエーションのラベルを表示する",
        "pt-BR": "Exibir etiquetas de variantes"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": {
        "de": "Lieferanten anzeigen",
        "en": "Show vendor",
        "es": "Mostrar proveedor",
        "fr": "Afficher les vendeurs",
        "it": "Mostra fornitore",
        "ja": "販売元を表示する",
        "pt-BR": "Exibir fornecedor"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "enable_zoom",
      "label": {
        "de": "Foto-Zoom zulassen",
        "en": "Enable image zoom",
        "es": "Habilitar zoom de imagen",
        "fr": "Activer le zoom d'image",
        "it": "Abilita lo zoom dell'immagine",
        "ja": "画像ズームを有効にする",
        "pt-BR": "Ativar o zoom da imagem"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_payment_button",
      "label": {
        "de": "Dynamischen Checkout Button anzeigen",
        "en": "Show dynamic checkout button",
        "es": "Mostrar botón de pago dinámico",
        "fr": "Afficher le bouton de passage à la caisse dynamique",
        "it": "Mostra pulsante di check-out dinamico",
        "ja": "動的チェックアウトボタンを表示する",
        "pt-BR": "Exibir botão dinâmico de finalização da compra"
      },
      "info": {
        "de": "Lässt Kunden direkt bezahlen mit bekannten Bezahlmethoden. [Mehr erfahren](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "en": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "es": "Permite a los clientes pagar directamente usando un método de pago familiar. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "fr": "Permettez à vos clients de passer à la caisse avec un moyen de paiement qui leur est familier. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "it": "Fai in modo che i clienti effettuino il check-out direttamente utilizzando un metodo di pagamento a loro conosciuto. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "ja": "使い慣れた決済方法を使用して、お客様に直接チェックアウトしてもらいましょう。[もっと詳しく](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "pt-BR": "Permite que os clientes finalizem os pedidos na hora usando uma forma de pagamento salva. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": {
        "de": "Buttons für Social Media anzeigen",
        "en": "Show social sharing buttons",
        "es": "Mostrar botones para compartir en redes sociales",
        "fr": "Affichez les boutons de partage sur les médias sociaux",
        "it": "Mostra i pulsanti per la condivisione sui social",
        "ja": "ソーシャル共有ボタンを表示する",
        "pt-BR": "Exibir botões de compartilhamento em redes sociais"
      },
      "default": true
    }
  ]
}
{% endschema %}
0 Likes
Highlighted

Hey Padro,

My experts can you help with this.

 

If you’re still interested, please suggest the next step.

 

Regards

Erica

Erica Sadler
Business Consultant
Galaxy Weblinks

------------------------------------------------------------------------------------------
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
0 Likes
Tourist
7 0 1

Thanks Erica, unfortunately our budget is very low right now :/

0 Likes