Buy Button Disabled After Variant Change on Customized PDP – Prestige 10.6.0 Theme

Online Store and Theme Development
,
1

Hi everyone,

I’ve built my store using the Prestige 10.6.0 theme and have heavily customized the Product Detail Page (PDP) to match my requirements.

However, I’m currently facing an issue where the Buy/Add to Cart button gets disabled whenever I change the product variant. I’ve tried several approaches to resolve this, but unfortunately, I’m stuck and unable to find a fix.

Has anyone experienced a similar issue or can guide me on how to ensure the Buy button stays enabled when switching between variants?

Any help from the community would be greatly appreciated!

Thanks in advance.

1
11920×1080 148 KB

2
21920×1080 148 KB

<form method="post" action="/cart/add">
                    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

                    <div
                      class="ProductForm__BuyButtons"
                      {{ block.shopify_attributes }}
                      style="margin-bottom: 12px;"
                    >
                      {% if block.settings.show_payment_button
                        and product.selected_or_first_available_variant.available == false
                      %}
                        <style>
                          #shopify-section-{{ section.id }} .shopify-payment-button {
                            display: none;
                          }
                        </style>
                      {% endif %}

                      <button
                        type="submit"
                        data-use-primary-button="{% if use_primary_button %}true{% else %}false{% endif %}"
                        class="ProductForm__AddToCart Button {% if product.selected_or_first_available_variant.available and use_primary_button %}Button--primary{% else %} Button--primary{% endif %} Button--full"
                        {% if product.selected_or_first_available_variant.available %}
                          data-action="add-to-cart"
                        {% else %}
                          disabled="disabled"
                        {% endif %}
                      >
                        {% if product.selected_or_first_available_variant.available %}
                          <span>
                            {% if product.template_suffix == 'pre-order' %}
                              {{ 'product.form.pre_order' | t }}
                            {% else %}
                              {{ 'product.form.add_to_cart' | t }}
                            {% endif %}
                          </span>

                          {% if block.settings.show_price_in_button %}
                            <span class="Button__SeparatorDot"></span>
                            <span>{{ product.selected_or_first_available_variant.price | money }}</span>
                          {% endif %}
                        {% else %}
                          {{ 'product.form.sold_out' | t }}
                        {% endif %}
                      </button>

                      {% if block.settings.show_payment_button and product.template_suffix != 'pre-order' %}
                        {{ form | payment_button }}
                      {% endif %}
                    </div>
                  </form>
2

Hey Yash, are there any errors in your console when you change the variant?

3

Hi @Yash_Kheni - did you figure this out?