Wrong product variant added to cart

Shopify Partner
12 0 0

Hi there,

On one of my webshops there's a problem with the product variants. Whenever I try to add the (for instance) second variant, it always adds the first available variant. I can't seem to figure out what causes this problem. I would really appreciate some help.

My product.liquid (yes there's some leftover Bold app stuff I don't dare to touch)
 

{%- include 'bold-product' with product, hide_action: 'break', output: 'none' -%}
<div class="product-page" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" itemscope itemtype="http://schema.org/Product">

  {%- assign current_variant = bold_selected_or_first_available_variant -%}

  <meta itemprop="name" content="{{ product.title }}{% unless product.has_only_default_variant %} - {{ current_variant.title }}{% endunless %}">
  <meta itemprop="url" content="{{ shop.url }}{{ current_variant.url }}">
  <meta itemprop="brand" content="{{ product.vendor }}">
  <meta itemprop="image" content="{{ image.src | img_url: '600x600' }}">
  <meta itemprop="description" content="{{ product.description | strip_html | escape }}">

  <div class="col-head-wrap">
    <header class="collection-header" role="banner">
      <div class="grid page-width">
        <div class="grid__item">
          {% include 'breadcrumbs' %}
        </div>
      </div>
    </header>
  </div>

  <div class="grid">
    <div class="page-width">
      <div class="grid__item large-up--three-fifths">
        {% if product.images.size >= 1 %}
        <div class="carousel-wrap">
          <div class="owl-thumbs" data-slider-id="1">
            {% for image in product.images %}
              <button class="owl-thumb-item">
                <img src="{{ image.src | img_url: 'large' }}" alt="{{ image.alt | escape }}">
              </button>
            {% endfor %}
          </div>
          <div class="owl-carousel owl-theme" data-slider-id="1">
            {% for image in product.images %}
              <img class="product-image" src="{{ image.src | img_url: '618x773' }}" alt="{{ image.alt | escape }}">
            {% endfor %}
          </div>
        </div>
        {% endif %}
      </div>

      <div class="grid__item large-up--two-fifths">
        <h1>{{ product.title }}</h1>

        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="priceCurrency" content="{{ shop.currency }}">
          <meta itemprop="price" content="{{ bold_variant_price | divided_by: 100.00 }}">
          <link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">

            <div class="price-wrapper" data-price-wrapper>
              <span data-product-price>
                {{ bold_variant_price | money }}
              </span>

              {% if bold_compare_at_price_max > bold_price %}
                <span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
                <s data-compare-price>
                  {% if current_variant.compare_at_price > bold_variant_price %}
                    {{ current_variant.compare_at_price | money }}
                  {% endif %}
                </s>
              {% endif %}
            </div>

            <div class="rte">
              {{ product.description }}
            </div>
            
            <form class="product-form shapp_qb_prod" action="/cart/add" method="post" data-cart-submit>
            <script data-app="esc-out-of-stock" type="text/json">{{ product.variants | json }}</script>
            {% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                <div class="selector-wrapper js">
                  <label style="font-weight:bold;" for="SingleOptionSelector-{{ forloop.index0 }}">
                    {{ option.name }}
                  </label>

                  <select
	                style="width:100%;padding:8px 12px 8px 12px;margin-top:8px;"
                    id="SingleOptionSelector-{{ forloop.index0 }}"
                    data-single-option-selector
                    data-index="option{{ option.position }}">
{%- assign optName = 'options' | append: forloop.index -%}
{%- assign option_values = [optName] | default: option.values -%}
{%- 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" class="no-js" data-product-select>
              {% for variant in product.variants %}
{%- include 'bold-variant' with variant, hide_action: 'skip' -%}
                <option
                  {% if variant == current_variant %}selected="selected"{% endif %}
                  {% unless variant.available %}disabled="disabled"{% endunless %}
                  value="{{ variant.id }}">
                    {{ variant.title }}
                </option>
              {% endfor %}
              </select>


            <button
              class="btn-black-full"
              type="submit"
              name="add"
              data-add-to-cart
              {% unless current_variant.available %}disabled="disabled"{% endunless %}>
                <span data-add-to-cart-text>
                  {% if current_variant.available %}
                    {{ 'products.product.add_to_cart' | t }}
                  {% else %}
                    {{ 'products.product.sold_out' | t }}
                  {% endif %}
                </span>
            </button>
            <div id="esc-oos-form"></div>

          </form>

        </div>

        <div class="product-usps">
        	<ul>
              <li>&#9733; Voor 16.00 uur besteld, dezelfde dag verzonden</li>
              <li>&#9733; Gratis verzending vanaf €30,-</li>
              <li>&#9733; Niet tevreden? Geld terug</li>
          	</ul>
        </div>
        <div class="product-information">
          <h4>Productinformatie</h4>
          {% for tag in product.tags %}
            {% if tag contains 'kleur-' %}
              {% assign tagName = tag | remove: 'kleur-' %}
              <span class="info-tag">Kleur: {{ tagName }}</span>
            {% elsif tag contains 'materiaal-' %}
              {% assign tagName = tag | remove: 'materiaal-' %}
              <span class="info-tag">Materiaal: {{ tagName }}</span>
            {% elsif tag contains 'maat-' %}
              {% assign tagName = tag | remove: 'maat-' %}
              <span class="info-tag">Maat: {{ tagName }}</span>
            {% endif %}
          {% endfor %}
        </div>
        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
      </div>
    </div>
  </div>

  {% unless product == empty %}
    <script type="application/json" data-product-json>
      {%- include 'bold-product', output: 'json' -%}
    </script>
  {% endunless %}
</div>

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons",
        "default": true
      }
    ]
  }
{% endschema %}


0 Likes
Shopify Staff
Shopify Staff
259 2 42

Hi Chris, 

Lisa here from the Shopify Support Team.

Would love to help you out here. It would be most helpful if you could reply with a link for the product page with the variant problem.  This will allow us to better understand what is going on with your variant issue. It is likely a simple fix for the way it is configured which we can hopefully pick up on straight away from looking at the product page. 

Looking forward to your reply!

- Lisa 

Lisa | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Shopify Partner
12 0 0
Shopify Partner
12 0 0

Okay, I found the problem. Did some hacky stuff to fix it. Not in the most beautiful way, but it works.

0 Likes
Shopify Staff
Shopify Staff
259 2 42

Hi Chris,

Glad you found a solution to this. The page dropdown variant appears to work great now.

Please let us know if you have any other issues with it. 

Best of luck, store is looking very cool!

- Lisa 

Lisa | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
3 0 0

Hi Chris, I'm having the exact same issue. Do you rememeber what the fix was? Any help would be greatly appreciated!

0 Likes