Force first product variant option

This is paid code. You need to pay me to use code (and get priority support & free install). Send me an email via this form if you have any problems.

Description

Force first variant option in default. You can set enable on:

all products, specific product, products belong specific tag/category, desktop only, mobile only)
for cart over XXX $

Send me an email to get corresponding options.

variant

Use code to Code Injection > Footer (or Shop Page Header Injection)

<!-- by @tuanphan - 04-07-2025 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Chờ Squarespace load xong
    var checkExist = setInterval(function() {
        var firstRadio = document.querySelector('input[name="variant-option-Qty"]');
        var addToCartBtn = document.querySelector('.sqs-add-to-cart-button');
        
        if (firstRadio && addToCartBtn) {
            clearInterval(checkExist);
            
            // Force select first option
            firstRadio.checked = true;
            firstRadio.setAttribute('checked', 'checked');
            
            // Trigger all possible events
            ['change', 'click', 'input'].forEach(function(eventType) {
                var evt = new Event(eventType, { bubbles: true, cancelable: true });
                firstRadio.dispatchEvent(evt);
            });
            
            // Click the label too
            var label = document.querySelector('label[for="' + firstRadio.id + '"]');
            if (label) {
                label.click();
            }
            
            // Force Squarespace to update
            if (window.Y && window.Y.one) {
                window.Y.one(firstRadio).simulate('change');
            }
        }
    }, 100);
});
</script>

Ask me a question, free