Custom + / – Quantity Buttons on Funnelish Checkout

1

Hey Funnelish community :waving_hand:

This post shows how to build a custom quantity increaser / decreaser UI (– 1 +) on a Funnelish checkout page, like a modern product card layout.

Product (1)
Product (1)556×168 66.2 KB

This approach works great when you want:

  • A clean, branded quantity selector
  • Custom UI instead of Funnelish’s default quantity dropdown
  • Quantity changes to correctly update price, total, and order bumps

What we’re building

A custom quantity UI like this:

[ – ]   1   [ + ]

Where:

  • Clicking + increases quantity
  • Clicking – decreases quantity (minimum 1)
  • Funnelish recalculates the price automatically

Step 1: Quantity UI Markup

<div class="qty-control">
    <button type="button" onclick="decreaseQuantity()">−</button>
    <span id="qntCount">1</span>
    <button type="button" onclick="increaseQuantity()">+</button>
</div>

You can style this however you want to match your checkout design.

Step 2: JavaScript Logic

<script>
function decreaseQuantity() {
    const qntElement = document.getElementById("qntCount");
    let qntCount = parseInt(qntElement.innerText, 10) || 1;

    if (qntCount > 1) {
        const qtyField = document.getElementsByName("product-qty")[0];
        const newQty = qntCount - 1;

        qtyField.value = newQty;
        qtyField.dispatchEvent(new Event('change', { bubbles: true }));
        qtyField.dispatchEvent(new Event('input', { bubbles: true }));

        qntElement.innerText = newQty;
    }
}

function increaseQuantity() {
    const qntElement = document.getElementById("qntCount");
    let qntCount = parseInt(qntElement.innerText, 10) || 1;

    if (qntCount < 10) {
        const qtyField = document.getElementsByName("product-qty")[0];
        const newQty = qntCount + 1;

        qtyField.value = newQty;
        qtyField.dispatchEvent(new Event('change', { bubbles: true }));
        qtyField.dispatchEvent(new Event('input', { bubbles: true }));

        qntElement.innerText = newQty;
    }
}
</script>

Step 3: How Funnelish Handles This

  • Funnelish listens to changes on the product-qty field

  • When the quantity changes, it recalculates:

    • Product price
    • Order total
    • Order bumps

  • By triggering change and input events, your custom UI behaves exactly like a native Funnelish control

Notes & Best Practices

  • Keep product-qty in the page (can be hidden)
  • Use it as the source of truth
  • Your UI should only sync values, not replace Funnelish logic
  • You can adjust max quantity (< 10) as needed

This pattern works well for:

  • One-product checkouts
  • Custom-designed templates
  • Free and premium Funnelish themes

Hope this helps anyone designing custom checkout layouts :raising_hands: