I’m currently using the standard ‘variant picker’ block on my product pages (Dawn v15 theme). I’m facing a couple of challenges and I’m hoping someone in the community might have a working solution they’d be willing to share.
Specifically, I’m looking to implement two key pieces of functionality:
- Disable the default auto-selection of the first available variant. I want the variant picker to initially show no selection, requiring the customer to make an explicit choice.
- Ensure the “Add to Cart” button is disabled until a valid variant is selected. The button should remain unclickable until a customer has made a selection that corresponds to an available product variant.
I’ve explored a few avenues but haven’t found a working solution for Dawn version 15 and the variant picker block.
Does anyone have a working solution for this? Any guidance, code snippets, or pointers to relevant resources would be appreciated!
Hello @NZ_Trinkets ,
I applied the same concept in the prestige theme.
If you want I can share my javascript code. But in order to make it work you need to make multiple changes in the product template.
Here you can check this example
Regards
Guleria
Hi @Guleria
That would be really great, thank you so much!
document.addEventListener("DOMContentLoaded", function () {
let radios = document.querySelectorAll('input[name="option2"]');
let button = document.querySelector(".buy-buttons .button"); // Selecting button by class
let sizeCustom = document.querySelector(".Size-custom");
let span = document.createElement("span");
span.className = "button w-full intial-button";
span.textContent = "Select size";
// Insert after the button
button.insertAdjacentElement("afterend", span);
let Ibutton = document.querySelector(".buy-buttons .button.w-full.intial-button");
radios.forEach(radio => radio.checked = false);
function updateButton() {
let isChecked = Array.from(radios).some(radio => radio.checked);
if (isChecked) {
button.disabled = false;
sizeCustom.classList.remove("alert-highlight");
button.style.display = "block";
Ibutton.style.display = "none";
} else {
button.disabled = true;
button.style.display = "none";
}
}
// Add event listener to each radio button
radios.forEach(radio => radio.addEventListener("change", updateButton));
// Initial check when the page loads
setTimeout(function(){
updateButton();
}, 100);
Ibutton.addEventListener("click", function () {
sizeCustom.classList.add("alert-highlight");
});
let radioButtons = document.querySelectorAll('input[name="option1"]');
// radioButtons.forEach(radioinner => {
//radioinner.addEventListener("change", function () {
document.addEventListener("change", function (e) {
if (e.target.matches('input[name="option2"]')) {
let element = document.querySelector("html .intial-button");
let ltbutton = document.querySelector("html .buy-buttons .button");
let ltsizeCustom = document.querySelector("html .Size-custom");
element.style.display = "none";
ltbutton.style.display = "block";
// ltsizeCustom.classList.add("alert-highlight");
const theValue = e.target.value;
// Remove existing is-selected class from all labels
document.querySelectorAll('.block-swatch').forEach(label => {
label.classList.remove('is-selected');
});
// Find the matching label using the input's id
const matchingLabel = document.querySelector(`label[for="${e.target.id}"]`);
if (matchingLabel) {
matchingLabel.classList.add('is-selected');
}
}
if (e.target.matches('input[name="option12"]')) {
let ltbutton = document.querySelector("html .buy-buttons .button");
let span = document.createElement("span");
span.className = "button w-full intial-button";
span.textContent = "Select size";
//alert('hi')
// Insert after the button
ltbutton.insertAdjacentElement("afterend", span);
ltbutton.classList.add("hide-intial");
let checkedRadio = document.querySelector('html input[name="option2"]:checked');
let ltradios = document.querySelectorAll('html input[name="option2"]');
let button = document.querySelector("html .buy-buttons .button");
let ltisChecked = Array.from(ltradios).some(ltradios => ltradios.checked);
let ltIbutton = document.querySelector(".buy-buttons .button.w-full.intial-button");
if (checkedRadio) {
checkedRadio.checked = true;
} else if (ltradios.length > 0) {
ltradios[0].checked = true; // If none are checked, check the first one
ltradios.forEach(ltradios => ltradios.checked = true);
}
setTimeout(function(){
let element = document.querySelector("html .intial-button");
if (element) {
let displayStyle = window.getComputedStyle(element).display;
//alert(displayStyle);
if (displayStyle === "none") {
}else{
ltradios.forEach(ltradios => ltradios.checked = false);
button.style.display = "none";
//button.disabled = true;
}
}
}, 400);
}
});
Thanks @Guleria . This has been helpful. Unfortunately I haven’t been able to adjust the code to work for my store. Do you happen to have an example where just one variant is used (such as color)?
Hi @NZ_Trinkets combined no variant-auto-select and disabled-addToCart are an advanced theme customization.
If you need this customization then contact me for services.
Contact info in forum signature below 
.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.