Blocking "buy it now" button when I choose the variants

[dinottom8]

I made some changes in my code to show swatches if the variant option is colors and dropdown if its sizes. I removed the render tag for "product-variant-options" and wrote the entire code on the "product-variant-picker.liquid".

{% comment %}
  Renders product variant-picker

  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} Id of the product form to which the variant picker is associated.
  - update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
  Usage:
  {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}

{%- liquid
  assign variants_available_arr = product.variants | map: 'available'
  assign variants_option1_arr = product.variants | map: 'option1'
  assign variants_option2_arr = product.variants | map: 'option2'
  assign variants_option3_arr = product.variants | map: 'option3'

  assign product_form_id = 'product-form-' | append: section.id
-%}

{% unless has_only_default_variant %}

  {% for option in product.options_with_values %}
    {% if option.name == 'Color' %}
      <variant-radios id="variant-radios-{{ section.id }}" class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {% if update_url == false %}data-update-url="false"{% endif %} {{ block.shopify_attributes }}>
        <fieldset class="js product-form__input">
          <legend class="form__label">{{ option.name }}</legend>
            {% for value in option.values %}
              {%- liquid
              assign option_disabled = true
          
              for option1_name in variants_option1_arr
                case option.position
                  when 1
                    if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                      assign option_disabled = false
                    endif
                  when 2
                    if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                      assign option_disabled = false
                    endif
                  when 3
                    if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                      assign option_disabled = false
                    endif
                endcase
              endfor
            -%}
            <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" name="{{ option.name }}" form="{{ product_form_id }}" {% if option.selected_value == value %} checked {% endif %} {% if option_disabled %} class="disabled" {% endif %}>
            <label for="{{ section.id }}-{{option.position}}-{{forloop.index0}}">
              {{ value -}}
              <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
            </label>
            {% endfor %}
        </fieldset>
        <script type="application/json">
          {{ product.variants | json }}
        </script>
      </variant-radios>
    {% else %}
      <variant-selects id="variant-selects-{{ section.id }}" class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {% if update_url == false %}data-update-url="false"{% endif %} {{ block.shopify_attributes }}>
          <div class="product-form__input product-form__input--dropdown">
            <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
              {{ option.name }}
            </label>
            <div class="select">
              <select id="Option-{{ section.id }}-{{ forloop.index0 }}" class="select__select" name="options[{{ option.name | escape }}]" form="{{ product_form_id }}">
                {% for value in option.values %}
                  {%- liquid
                    assign option_disabled = true

                    for option1_name in variants_option1_arr
                      case option.position
                        when 1
                          if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                            assign option_disabled = false
                          endif
                        when 2
                          if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                            assign option_disabled = false
                          endif
                        when 3
                          if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                            assign option_disabled = false
                          endif
                      endcase
                    endfor
                  -%}
                  <option
                  value="{{ value | escape }}"
                  {% if option.selected_value == value %}
                    selected="selected"
                  {% endif %}
                  >
                  {% if option_disabled -%}
                    {{- 'products.product.value_unavailable' | t: option_value: value -}}
                  {%- else -%}
                    {{- value -}}
                  {%- endif %}
                </option>
                {% endfor %}
              </select>
              {% render 'icon-caret' %}
            </div>
        </div>
        <script type="application/json">
        {{ product.variants | json }}
        </script>
      </variant-selects>
    {% endif %}
  {% endfor %}
  
{% endunless %}

<noscript class="product-form__noscript-wrapper-{{ section.id }}">
  <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
    <label class="form__label" for="Variants-{{ section.id }}">
      {{- 'products.product.product_variants' | t -}}
    </label>
    <div class="select">
      <select
        name="id"
        id="Variants-{{ section.id }}"
        class="select__select"
        form="{{ product_form_id }}"
      >
        {%- for variant in product.variants -%}
          <option
            {% if variant == product.selected_or_first_available_variant %}
              selected="selected"
            {% endif %}
            {% if variant.available == false %}
              disabled
            {% endif %}
            value="{{ variant.id }}"
          >
            {%- liquid
              echo variant.title
              echo variant.price | money | strip_html | prepend: ' - '
              if variant.available == false
                echo 'products.product.sold_out' | t | prepend: ' - '
              endif
              if variant.quantity_rule.increment > 1
                echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
              endif
              if variant.quantity_rule.min > 1
                echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
              endif
              if variant.quantity_rule.max != null
                echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
              endif
              # TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
              # theme-check-disable
              assign cart_quantity = cart | item_count_for_variant: variant.id
              # theme-check-enable
              if cart_quantity > 0
                echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
              endif
            -%}
          </option>
        {%- endfor -%}
      </select>
      {% render 'icon-caret' %}
    </div>
  </div>
</noscript>