Variant price not updating...on pages with multiple variants only

SproutTherapy
Shopify Partner
37 0 4

I am having an issue with the price not updating on the GIFT CARD page—the rest of my product pages work fine.

My gift card has 4 variants—the rest of my product pages have only 2.

I am using a purchased theme, and I have the Bold Subscriptions app installed.

I found a (possibly) relevant Shopify Discussion post here, though this code speak is far beyond my understanding.

Could anyone help? Relevant code attached.

<div
  itemscope itemtype="http://schema.org/Product"
  data-wetheme-section-type="template--product" data-wetheme-section-id="{{ section.id }}"
>
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="https:{{ product.featured_media.preview_image | img_url: 'grande' }}">
  <meta itemprop="brand" content="{{ product.vendor }}">
  <meta itemprop="sku" content="{{ product.selected_or_first_available_variant.sku }}">

  {% comment %}
  Pick an option only makes sense together with dropdowns - we currently doesn't have pick_an_option
  {% if section.settings.product_variant_style == 'dropdowns' and section.settings.pick_an_option %}
    {% assign pick_an_option = true %}
  {% else %}
  {% endif %}
  {% endcomment %}
  {% assign pick_an_option = false %}

  {% if pick_an_option %}
    {%- assign current_variant = product.selected_variant -%}
  {% else %}
    {%- assign current_variant = product.selected_or_first_available_variant -%}
  {% endif %}

  {% assign on_sale = false %}
  {% if current_variant.compare_at_price > current_variant.price %}
    {% assign on_sale = true %}
  {% endif %}

  {%- assign product_description_width = '' -%}
  {%- assign product_image_width = '' -%}
  {% case section.settings.image_size %}
    {% when 'small' %}
      {%- assign product_description_width = 'large--seven-twelfths' -%}
      {%- assign product_image_width = 'large--five-twelfths' -%}
    {% when 'medium' %}
      {%- assign product_description_width = 'large--six-twelfths' -%}
      {%- assign product_image_width = 'large--six-twelfths' -%}
    {% when 'large' %}
      {%- assign product_description_width = 'large--five-twelfths' -%}
      {%- assign product_image_width = 'large--seven-twelfths' -%}
  {% endcase %}

  <div class="product-media-templates">
    {% assign featured_media = current_variant.featured_media | default: product.featured_media %}
    {% render 'product-media-templates', product: product, section_id: section.id, featured_media_id: featured_media.id, enable_image_zoom: section.settings.enable_image_zoom, enable_video_loop: section.settings.enable_video_loop %}
  </div>

  {% assign style = 'full_width' %}
  {% if section.settings.image-display == 'thumbnails' %}
    {% assign style = section.settings.thumbnail_position %}
  {% endif %}
  {% if product.media.size <= 1 %}
    {% comment %}No thumbnails when there's just one (or none) media{% endcomment %}
    {% assign style = 'full_width' %}
  {% endif %}

  <div class="product-form-vue">
    <wetheme-product-form
      inline-template
      v-bind:initial-variant-id="{{ current_variant.id }}"
      v-bind:product="product"
      v-bind:product-section="productSection"
      v-bind:theme="theme"
      v-bind:slides-per-view="slidesPerView"
      v-bind:is-featured-product="isFeaturedProduct"
      v-bind:section-id="'{{ section.id }}'"
      v-bind:thumbnail-changes-variant="{{ section.settings.thumbnail_changes_variant }}"
      v-bind:has-thumbnails="{% if style != 'full_width' %}true{% else %}false{% endif %}"
      v-bind:image-zoom-enabled="{{ section.settings.enable_image_zoom }}"
      v-bind:video-loop-enabled="{{ section.settings.enable_video_loop }}"
      v-bind:cart-method="'{{ settings.ajax_cart_method }}'"
    >
      <div>
        <div class="grid product-single product-sticky-wrapper{% if section.settings.product_variant_style == 'dropdowns' %} variant-dropdown-enabled{% else %} variant-swatches-enabled{% endif %}" data-section-id="{{ section.id }}">
          <div class="grid__item {{ product_image_width }} context mobile--no-top-margin">
            {% render 'product-media', product: product, style: style, enable_image_zoom: section.settings.enable_image_zoom, hide_soldout_variants: section.settings.hide_soldout_variants %}
          </div>

          <div class="grid__item {{ product_description_width }}{% if section.settings.enable_sticky %} product-sticky{% endif %}">

            <div>

              {% if settings.enable-sale-badge %}
                <div
                  class="product-page--sale-badge{% unless current_variant.compare_at_price > current_variant.price %} js{% endunless %}"
                  v-if="isSale"
                >
                  {{ 'products.product.on_sale' | t }}
                </div>
              {% endif %}

              <div class="product-details-wrapper" {% if section.settings.show_sku %}data-show-sku="true"{% else %}data-show-sku="false"{% endif %}>
                <div class="grid product-meta-header">
                  {% if section.settings.show_vendor and product.vendor != "" %}
                    <div class="grid__item product__meta--vendor large--one-half">
                      <h4>{{ product.vendor | link_to_vendor }}</h4>
                    </div>
                  {% endif %}

                  {% if section.settings.show_sku %}
                    <div
                      class="grid__item product__meta--sku large--one-half{% unless section.settings.show_vendor and product.vendor != "" %} push--large--one-half{% endunless %}{% if current_variant.sku == "" %} js{% endif %}"
                      v-if="variant && variant.sku !== ''"
                    >
                      <h4>{{ 'customer.order.sku' | t }}: <span class="js__currentVariantSKU" v-text="variant.sku">{{ current_variant.sku }}</span></h4>
                    </div>
                  {% endif %}
                </div>

                <h1 itemprop="name" class="product-details-product-title">{{ product.title }}</h1>

                {% if section.settings.description_position == 'inline_top' %}
                  <div class="product-description product-details--form-wrapper---below rte{% if section.settings.enable_readmore %} readmore closed{% endif %}" itemprop="description">
                    {{ product.description }}
                  </div>
                {% endif %}

                <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="product-details--form-wrapper{% if product.available %} product-details--form-wrapper---in-stock{% else %} product-details--form-wrapper---out-of-stock{% endif %}">
                  <meta itemprop="priceCurrency" content="{{ shop.currency }}">
                  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">

                  <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

                  <div class="form-vertical">
                    {% form 'product', product, data-productid: product.id, id: "AddToCartForm" %}



                      {% render 'product-options', product: product, variant_style: section.settings.product_variant_style, section_id: section.id, current_variant: current_variant, hide_soldout_variants: section.settings.hide_soldout_variants %}

                      

                      <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
                      <p id="ComparePrice" class="{% unless on_sale %}js{% endunless %}" v-if="isSale" v-money="variant.compare_at_price">
                        <span class="money">{{ current_variant.compare_at_price | money }}</span>
                      </p>

                      {% case section.settings.show_discount %}

                        {% when 'percentage' %}

                          <li class="product-page--pricing--discount">
                            <span
                              class="variant-percentage-wrapper{% unless on_sale %} js{% endunless %}"
                              v-if="isSale"
                            >
                              -<span class="variant-percentage"
                                v-text="((variant.compare_at_price - variant.price) / variant.compare_at_price * 100).toFixed(0) + '%'"
                              >
                                {{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}%
                              </span>
                            </span>
                          </li>

                        {% when 'value' %}

                          <li class="product-page--pricing--discount">
                            <span
                              class="variant-value-wrapper{% unless on_sale %} js{% endunless %}"
                              v-if="isSale"
                            >
                              -<span class="variant-value" v-money="variant.compare_at_price - variant.price">
                                <span class="money">
                                  {{ current_variant.compare_at_price | minus: current_variant.price | money }}
                                </span>
                              </span>
                            </span>
                          </li>
                      {% endcase %}

                      <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
                      <span id="ProductPrice" class="h2" itemprop="price"
                        content="{{ current_variant.price | divided_by: 100 }}"
                        v-bind:content="variant ? variant.price / 100 : null"
                        v-html="variant ? money(variant.price) : '{{ 'products.product.unavailable' | t }}'"
                      >
                        <span class="money">{{ current_variant.price | money }}</span>
                      </span>

                      {% render 'unit-price-measurement-variant', variant: current_variant %}

                      {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
                        <div class="product-page__policies rte">
                          {%- if shop.taxes_included and section.settings.tax_included -%}
                            {{ 'products.product.include_taxes' | t }}
                          {%- endif -%}
                          {%- if shop.shipping_policy.body != blank and section.settings.shipping_policy -%}
                            {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                          {%- endif -%}
                        </div>
                      {%- endif -%}
                    
                    <!--This is the QUANTITY SELECTOR. It used to be before the price.-->
                    {% comment %}
                    {% if section.settings.show_quantity_selector %}

                        <div class="{% if section.settings.product_variant_style == 'dropdowns' %}selector-wrapper{% else %}swatches-wrapper{% endif %} {% if section.settings.image_size == 'large' %}col-md-12{% else %}col-md-6{% endif %} col-sm-12 col-xs-12">
                          <label for="Quantity" class="quantity-selector product-sub-label">{{ 'products.product.quantity' | t }}</label>

                          <div class="js-qty">
                            <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" v-on:click="decreaseQuantity">
                              <i class="fa fa-minus" aria-hidden="true"></i>
                              <span class="fallback-text">−</span>
                            </button>
                            <input v-model="quantity" type="text" class="js-qty__num" value="1" min="1" aria-label="quantity" pattern="[0-9]*" name="quantity" id="Quantity">
                            <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" v-on:click="increaseQuantity">
                              <i class="fa fa-plus" aria-hidden="true"></i>
                              <span class="fallback-text">+</span>
                            </button>
                          </div>
                        </div>
                      {% endif %}
                    {% endcomment %}
                    
<!-- Begin Bold Subscriptions code -->
                    {% include 'bsub-widget' %}
<!-- Begin Bold Subscriptions code -->
						<!-- Begin John Newgard Custom code -->
						{% if template contains 'custom-1' %}
							<p></p>
							<p class="line-item-property__field">
							<label class="ep_heading">Choose Your Flavours
                    		<p></p>
							<input type="checkbox" id="Elderflower" name="properties[Elderflower Ginger]"><label class="ep_inline_block" for="Feature-A">Elderflower Ginger</label><br>
							<input type="checkbox" id="Ginger" name="properties[Ginger]"><label class="ep_inline_block" for="Feature-B">Ginger</label><br>
							<input type="checkbox" id="Hop" name="properties[Hop Cardamom]"><label class="ep_inline_block" for="Feature-C">Hop Cardamom</label><br>
							<input type="checkbox" id="Lavender" name="properties[Lavender Sage]"><label class="ep_inline_block" for="Feature-D">Lavender Sage</label><br>
							<input type="checkbox" id="Mint" name="properties[Mint Chamomile]"><label class="ep_inline_block" for="Feature-E">Mint Chamomile</label><br>
							<input type="checkbox" id="Rooibos" name="properties[Rooibos Rose]"><label class="ep_inline_block" for="Feature-F">Rooibos Rose</label><br>
							<input type="checkbox" id="Rosehip" name="properties[Rosehip Hibiscus]"><label class="ep_inline_block" for="Feature-G">Rosehip Hibiscus</label>
							</p>

							<style>
								.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
								.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
							</style>

						{% endif %}
						<!-- End John's code -->
                    
                    
                      <div class="paymentButtonsWrapper">
                        <button type="submit" name="add" id="AddToCart" class="btn{% if section.settings.show_smart_checkout %} add-to-cart--secondary{% endif %}"
                          v-bind:class="{ disabled: addToCartDisabled }"
                          v-bind:disabled="addToCartDisabled"
                        >
                          <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw js" v-if="state === 'adding'"></i><span class="sr-only">{{ 'collections.paginate.loading' | t }}</span>
                          <span class="{% if current_variant.available %}js{% endif %}" v-if="state === 'ready'">{{ 'products.product.add_to_cart' | t }}</span>
                          <span class="js" v-if="state === 'added'">{{ 'products.product.added' | t }}</span>
                          <span class="{% unless current_variant.available %}js{% endunless %}" v-if="state === 'soldOut'">{{ 'products.product.sold_out' | t }}</span>
                          <span class="js" v-if="state === 'unavailable'">{{ 'products.product.unavailable' | t }}</span>
                        </button>

                        {% if section.settings.show_smart_checkout %}
                          {{ form | payment_button }}
                        {% endif %}
                      </div>

                    {% endform %}

                    {% if section.settings.enable_out_of_stock_form %}
                      {% render 'out-of-stock-form' %}
                    {% endif %}

                    {% if section.settings.trust-badge %}
                      <span class="trust-badge-container">
                        {% capture styles %}width: {{ section.settings.trust-badge_max_width | escape }}px{% endcapture %}
                        {% render 'responsive-image' with section.settings.trust-badge, class:'trust-badge', alt: '', blur: false, styles: styles %}
                      </span>
                    {% endif %}
                  </div>
                </div>

                {% if section.settings.description_position == 'inline_bottom' %}
                  <div class="product-description rte{% if section.settings.enable_readmore %} readmore closed{% endif %}" itemprop="description">
                  {{ product.description }}
                  </div>
                {% endif %}

                <div class="grid product__meta">

                  {% if section.settings.show_tags and product.tags.size > 0 %}
                    <div class="grid__item product__meta--tags large--one-whole">
                      <span><strong>{{ 'products.product.tags' | t }}:</strong> </span>
                      {% for tag in product.tags %}
                        <a href="{{ routes.all_products_collection_url }}/{{ tag | handleize }}"><span>{{ tag }}</span></a>{% if forloop.last == false %}, {% endif %}
                      {% endfor %}
                    </div>
                  {% endif %}

                  {% if section.settings.show_collections and product.collections.size > 0 %}
                    <div class="grid__item product__meta--tags large--one-whole">
                      <span><strong>{{ 'products.product.category' | t }}:</strong> </span>
                      {% for collection in product.collections %}
                        <a href="{{ collection.url }}"><span>{{ collection.title }}</span></a>{% if forloop.last == false %}, {% endif %}
                      {% endfor %}
                    </div>
                  {% endif %}

                  {% if section.settings.show_type and product.type != "" %}
                    <div class="grid__item product__meta--type large--one-whole">
                      <span><strong>{{ 'products.product.type' | t }}: </strong></span>
                      <span>{{ product.type }}</span>
                    </div>
                  {% endif %}

                </div>

                {% if settings.social_sharing_product %}
                  {% render 'social-share' %}
                {% endif %}
              </div>
            </div>
          </div>
        </div>

        {% if section.settings.description_position == 'full_width' %}
          <div class="product-description-container">
            <div class="product-description product-description_full-width rte{% if section.settings.enable_readmore %} readmore closed{% endif %}" itemprop="description">
              {{ product.description }}
            </div>
          </div>
        {% endif %}

      </div>
    </wetheme-product-form>
  </div>

  {% if settings.show_reviews %}
    <div id="shopify-product-reviews--wrapper" v-if="!isFeaturedProduct">
      <div class="sitewide--title-wrapper">
        <h2 class="page--title">{{ 'products.general.product_reviews' | t }}</h2>
      </div>
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>
  {% endif %}

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

I DELETED THE SCHEMA FOR THIS POST

 

0 Likes