How to Force Customers to Choose a Variant Before Checkout (No Default Size Selected)

Technical
1

Hey Funnelish fam :waving_hand:

Sometimes customers don’t notice that “S” (Small) is selected by default in your product variants — and they end up ordering the wrong size :weary_face:.

This can lead to returns and refund requests… which nobody likes!

So in this tutorial, we’ll fix that by making sure:

  • No variant is pre-selected (so nothing like “S” is checked by default).
  • Customers must select a variant manually before they can click “Complete My Order.”

:bullseye: What this fix does

:white_check_mark: Removes all default selected sizes (or colors, etc.).
:white_check_mark: Stops checkout until a variant is chosen.
:white_check_mark: Works perfectly inside your Funnelish checkout step.

:brain: Example

Let’s say your product list looks like this:

1x Foot Sleeve – Size S, M, L, XL, 2XL, 3XL

Normally, “S” might already be selected when the page loads.

After adding this code :backhand_index_pointing_down:
:right_arrow: all sizes will be unselected by default,
and your buyer must click their size before completing checkout.

:gear: How to Add This to Your Funnelish Checkout Step

  1. Go to your Funnelish Editor
  2. Click on your Checkout Step
  3. From the left panel, scroll down to:
    :gear: Custom Code → Custom CSS/JS → Body HTML
  4. Paste the code below :down_arrow:
  5. Click Save & Publish

:laptop: The Full Code

<script>
document.addEventListener("DOMContentLoaded", function() {
  // 1️⃣ Remove all default selected variants properly
  document.querySelectorAll(".pl-variant-option.selected").forEach(opt => {
    opt.classList.remove("selected"); // remove visual highlight
    const input = opt.querySelector("input[type='radio']");
    if (input) {
      input.checked = false; // uncheck the radio
      // dispatch change event so Funnelish updates the order summary
      input.dispatchEvent(new Event("change", { bubbles: true }));
    }
  });

  // 2️⃣ Intercept the "COMPLETE MY ORDER" button
  const orderBtn = document.querySelector('a.btn[href="#submit-step"]');
  if (orderBtn) {
    orderBtn.addEventListener("click", function(e) {
      const selectedProduct = document.querySelector(".pl-item.selected");
      if (selectedProduct) {
        const variantGroups = selectedProduct.querySelectorAll(".pl-variant-options");
        let allPicked = true;
        variantGroups.forEach(group => {
          if (!group.querySelector("input[type='radio']:checked")) {
            allPicked = false;
          }
        });
        if (!allPicked) {
          e.preventDefault(); // stop navigation
          alert("Please select your size before completing your order.");
        }
      }
    });
  }
});
</script>

:light_bulb: Bonus Tip:

You can change the alert text to match your product.
For example:

alert("Please select your color and size before checkout!");

:test_tube: Tested On

:white_check_mark: Funnelish v2 Product List (.pl-item)
:white_check_mark: Works for single product checkouts
:white_check_mark: Compatible with size, color, and style variants

:heart: Final Words

That’s it! :tada:
Now your customers can’t skip variant selection — saving you from unnecessary returns and making your checkout process more professional.

1 Like