Brod Solutions Logo

BigCommerce Product Catalog Select Quanties of 6

Some products must be purchased in certain quantities, such as groups of 6. This code will change the user options for specific products.

Problem

We sell products in quantities of multiples of 6, but we need to exclude some products in a way that allows a dropdown starting from 1 in ascending order using the Minimum purchase quantity on admin side.

Before

After

Solution

If the Minimum Purchase in your product catalog is set to 6, then the select option appears; otherwise, it shows the native input.

bigcommerce-quantity-purchases_catalog-minimum-quantity.png

BigCommerce Theme File: templates/components/products/add-to-cart.html

<div class="qtyAndPrice">
        <div class="form-field form-field--increments">
            <label class="form-label form-label--alternate"
                   for="qty[]">{{lang 'products.quantity'}}</label>
                   {{#if product.min_purchase_quantity '!=' '6' }}
                
                   <div class="form-increment" data-quantity-change>
                    <span class="button button--icon" data-action="dec">
                        <span class="is-srOnly">{{lang 'products.quantity_decrease' name=product.title}}</span>
                        <span>&minus;</span>
                    </span>
                    <input class="form-input form-input--incrementTotal"
                           id="qty[]"
                           name="qty[]"
                           type="tel"
                           value="{{#if product.min_purchase_quantity}}{{product.min_purchase_quantity}}{{else}}1{{/if}}"
                           data-quantity-min="{{product.min_purchase_quantity}}"
                           data-quantity-max="{{product.max_purchase_quantity}}"
                           min="1"
                           pattern="[0-9]*"
                           aria-live="polite">
                    
                    <span class="button button--icon" data-action="inc">
                        <span class="is-srOnly">{{lang 'products.quantity_increase' name=product.title}}</span>
                        <span>&plus;</span>
                    </span>
                    {{else}}
                    <select class="form-select" id="qty[]" name="qty[]" aria-live="polite">
                        {{#for 1 100}}
                            <option value="{{multiply $index 6}}">{{multiply $index 6}}</option>
                        {{/for}}
                    </select>
                    {{/if}}
                </div>
        </div>

 

Tags

BigCommerce

Dated

Created: Feb 06, 2025

Updated: Feb 06, 2025

Brod Solutions Logo
We are not just building websites; we are forging long-term partnerships.
Made in America

© 2012-2025 Brod Solutions, All rights reserved.