Selecting a variant before add to cart

[Pawansharma0007]

I want to show add to cart button after selecting the size before it should show select a size how c

[Akibhusen]

you can follow these steps:

• Locate the code in your Shopify theme where the size variant options are being rendered. This code is typically found in the product.liquid or product-template.liquid file.

• Look for the HTML element or Liquid code that generates the select dropdown for the size variants. It may look something like this:

<select name="id" id="product-select" class="product-form__input product-form__input--select">
  {% for variant in product.variants %}
    {% if variant.available %}
      <option value="{{ variant.id }}">{{ variant.title }}</option>
    {% else %}
      <option disabled="disabled">{{ variant.title }}</option>
    {% endif %}
  {% endfor %}
</select>

• Wrap the "Add to Cart" button in a container element, such as a <div>, and give it a class or ID to target it with JavaScript. For example:

<div id="add-to-cart-container">
  <button type="submit" name="add" id="add-to-cart-btn" class="btn btn--primary btn--add-to-cart" disabled>
    Add to Cart
  </button>
</div>

• Add JavaScript code to handle the selection change event and enable/disable the "Add to Cart" button based on the selected size. Place this code in a <script> tag or an external JavaScript file that is loaded on the product page. Here's an example using jQuery:

$(document).ready(function() {
  $('#product-select').on('change', function() {
    var selectedVariant = $(this).val();
    if (selectedVariant !== '') {
      $('#add-to-cart-btn').prop('disabled', false);
    } else {
      $('#add-to-cart-btn').prop('disabled', true);
    }
  });
});

• Save the changes to your Shopify theme's file and test the functionality on the product page. The "Add to Cart" button should be disabled initially, and it will become enabled after selecting a size variant from the dropdown.

[Pawansharma0007]

My code is different can i send you my theme code in that can you told me where to edit this code

[Akibhusen]

Yes sure, if possible give the access of your theme so I can check and update it accordingly.

[Pawansharma0007]

Here is my add-to-cart-form code.

{% assign variantCount = product.variants | size %}
{% assign downcased_option = product.options_with_values[0].name | downcase %}
{% assign option_color_swatch = settings.option_color_swatch | downcase %}

{%- liquid
assign sold_out = false
if product.available == false
assign sold_out = true
endif
-%}

<form action="{{ routes.cart_url }}/add" method="post" class="variants" id="{{id}}-{{ product.id }}-{{ sectionId }}" data-id="product-actions-{{ product.id }}" enctype="multipart/form-data">
{% if sold_out %}
<button class="btn add-to-cart-btn" type="submit" disabled="disabled" {% if settings.enable_multilang %}data-translate="products.product.unavailable"{% endif %}>
{{ 'products.product.unavailable' | t }}
</button>

{% else %}
{% if variantCount > 0 and product.variants.first.title != 'Default Title' %}

{% if product.options_with_values.size == 1 and option_color_swatch contains downcased_option and settings.use_color_swatch %}
{%- liquid
assign current_variant_grid = product.selected_or_first_available_variant
if current_variant_grid.available == false
assign sold_out = true
endif
-%}
<input type="hidden" name="id" value="{{ current_variant_grid.id }}" />
<input type="hidden" name="quantity" value="1" />

<button data-btn-addToCart class="btn add-to-cart-btn"{% if sold_out %} disabled="disabled"{% endif %} type="submit" data-form-id="#{{id}}-{{ product.id }}-{{ sectionId }}" {% if settings.enable_multilang %}data-translate="products.product.add_to_cart"{% endif %}>
{%- if sold_out -%}
{{ 'products.product.unavailable' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endif %}
</button>

{% else %}
{% if settings.enable_quick_shop %}
{% comment %}
<a class="btn" data-href="{{ product.url }}" title="{{ product.title }}" data-init-quickshop tabindex>
{{ 'products.product.add_to_cart' | t }}
</a>
{% endcomment %}
<a class="cart-btn" data-href="{{ product.url }}" title="{{ product.title }}" data-init-quickshop tabindex>
<i class="fa fa-cart-plus" aria-hidden="true"></i>
</a>
{% else %}
<a class="btn" href="{{ product.url }}" title="{{ product.title }}">
{{ 'products.product.select_options' | t }}
</a>
{% endif %}
{% endif %}
{% else %}
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
<input type="hidden" name="quantity" value="1" />
{%- assign current_variant_grid = product.selected_or_first_available_variant -%}
{% assign first_inventory_grid = current_variant_grid.inventory_quantity %}

{% if current_variant_grid.inventory_management %}
{% if first_inventory_grid > 0 %}
<button data-btn-addToCart class="btn add-to-cart-btn" type="submit" data-form-id="#{{id}}-{{ product.id }}-{{ sectionId }}" {% if settings.enable_multilang %}data-translate="products.product.add_to_cart"{% endif %}>
{{ 'products.product.add_to_cart' | t }}
</button>
{% else %}
<button data-btn-addToCart class="btn add-to-cart-btn" type="submit" data-form-id="#{{id}}-{{ product.id }}-{{ sectionId }}" {% if settings.enable_multilang %}data-translate="products.product.pre_order"{% endif %}>
{{ 'products.product.pre_order' | t }}
</button>
{% endif %}
{% else %}
<button data-btn-addToCart class="btn add-to-cart-btn" type="submit" data-form-id="#{{id}}-{{ product.id }}-{{ sectionId }}" {% if settings.enable_multilang %}data-translate="products.product.add_to_cart"{% endif %}>
{{ 'products.product.add_to_cart' | t }}
</button>
{% endif %}

{% endif %}
{% endif %}
</form>
{% if settings.enable_quick_shop %}
{% if product.available %}
{% if variantCount > 0 and product.variants.first.title != 'Default Title' %}
<div class="product-card__variant--popup">
{% render 'swatch-quick-shop', product: product, id: id, list: list, position: position, sectionId: sectionId %}
</div>
{% endif %}
{% endif %}
{% endif %}

[Akibhusen]

IF possible Can I get access to your store? I need to check theme files and based on that I can find out the possible solutions

[Pawansharma0007]

Sorry I cant give you access of store due to some privacy. Can you help me out with the above code

[kathychan]

Hi! I would like to use this logic in my shopify store. Can you help me out?

[visakhck]

hi, would like to use this logic in my shopify store. Can you help me out?