How to add a quantity/QTY selector for products in an order form.

Offering your customers a quantity selection for your products is a great way to increase sales and to provide a great buying experience. In this guide, you will learn a simple way to add this feature to your order pages by pasting a simple snippet of code in the page editor. 

Watch Video: https://www.loom.com/share/a82978604b5c4aa9bc9479609670e4ba

Video Recap: 
To add this feature to your Order Page, copy the snippet of code below. 

<script>
$(function () {
    var start = 0; 
    var stop = 10; 
        
    $('[data-de-type="orpo"] .elOrderProductOptinLabel .elOrderProductOptinItem').before('<div class="pull-left qty-head">Qty</div>');
    
    $('[data-de-type="orpo"] .elOrderProductOptinProducts:not(".hide") [name="purchase[product_id]"]').each(function () {
        var id = $(this).id;
        var val = $(this).val();
        
        var selector = $(this).after(
            $('<select/>', {
                id: val+"_qty",
                name: val+"_qty",
                class: "qty_select",
                "data-product-id":val
            })    
        );
        
        for (i = start; i <= stop; i++) {
            $('#'+val+"_qty").append($('<option/>',{value: i,text: i}));
        }

        $(this).attr("checked",false).addClass("hide");
    });
    
    $('[href="#submit-form"], [href="#submit-form-2step-order"]').click(function (ev) {
        $('.qty_select').each(function () {
            var qty = $(this).val();
            var cartProd = $('<input/>',{type: "checkbox", name: "purchase[product_ids][]", "data-storage":false, checked: true});
            var prodId = this.id.split('_')[0];
            
            $('[name="purchase[product_ids][]"][value="'+prodId+'"]').remove();
            
            cartProd = $(cartProd).val(prodId).attr("checked",true);
            
            for (var i = 0; i < qty; i++) {
                $('#cfAR').append($(cartProd).clone());
            }
        });
    });
});
</script>

Note: If you copy the above code and it appears to not function after adding it to the page, please click HERE and copy it from the document and use it instead. 

Adding code to Order Page: 
To paste the code in your Order Page, access the page editor and go to Settings>Tracking Code, and paste the code in the footer area. Once done, remember to click Save. 



After saving the code on your page, it will display a qty dropdown next to each product as seen here: 

Notes: 

• This QTY feature will not work with a two-step order form. 
• In order for it to work, you must already have existing products created. You can learn more about creating products HERE. 
• ClickFunnels does offer a built-in method to offer variations and quantities of products. Click HERE to learn more. 

Warning! 
An "Order Select W/ Inventory" element will not work with this code. 



Warning!
The "Order Summary" element will not reflect the selected quantities. It is advised to not use this element when using this custom code. 



Important: Due to the custom and varying nature of custom code, our support team is unable to provide assistance with any custom code added to your page. If you experience troubles while setting up your custom code, please consult a qualified developer to assist you.