The reason for experiencing this issue might be as a result of the validation logic preventing addition of the product to cart without selecting a variant pill, being likely not well executed.
To fix this, search for main-product.js inside the assets or sections folder handling the JavaScript file product options.
Then look for the code that handles the “Add To Cart” condition for the checkbox tick.
Modify it to also select a variant that will enable the button look similar to this;
document.addEventListener(“DOMContentLoaded”, function () {
const variantPills = document.querySelectorAll(“.variant-pill”); // Adjust if necessary
const checkbox = document.querySelector(“#confirm-checkbox”); // Adjust to match your actual checkbox ID
const addToCartButton = document.querySelector(“#add-to-cart”); // Adjust to match the button ID
function updateButtonState() {
let variantSelected = false;
// Check if at least one variant is selected
variantPills.forEach((pill) => {
if (pill.classList.contains(“selected”)) { // Modify if using checkboxes or radio buttons
variantSelected = true;
}
});
// Enable only if a variant is selected AND the checkbox is checked
if (variantSelected && checkbox.checked) {
addToCartButton.removeAttribute(“disabled”);
} else {
addToCartButton.setAttribute(“disabled”, “true”);
}
}
// Listen for variant selection changes
variantPills.forEach((pill) => {
pill.addEventListener(“click”, function () {
variantPills.forEach((p) => p.classList.remove(“selected”)); // Ensure only one selection
this.classList.add(“selected”);
updateButtonState();
});
});
// Listen for checkbox changes
checkbox.addEventListener(“change”, updateButtonState);
// Initial check on page load
updateButtonState();
});
After saving the changes in the Shopify code editor, refresh the live website as well.
See if you can add a product to the cart without selecting a variant, it should be blocked.
However, try selecting a product, variant and ticking the checkbox, this should work properly, allowing the product to add to cart.
