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.
<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>