How to Add Quantity Increase/Decrease Buttons Above All WooCommerce Add-to-Cart Buttons | Add Global Quantity Selector to WooCommerce Product Grids (Works with AJAX)

 If you are running a WooCommerce store, you may have noticed that the default product grid (shop page, category pages, Elementor grids, Essential Addons product grids, etc.) does not show a quantity selector. Customers must click the product page first just to change quantity — which hurts conversions.

In this tutorial, I’ll show you how to add a global quantity input field (with increase/decrease support) above every Add to Cart button, automatically inserted on all product grids, including:

• WooCommerce shop & category pages

• Elementor Pro product widgets

• Essential Addons product grids

• Royal Elementor Addons product grids

• AJAX-loaded product lists, filters, and load-more pagination

No template editing. No theme modification. Just pure jQuery + PHP hook.

Let’s get started!

---

Why Add a Quantity Selector on Product Grids?

Adding a quantity selector above your Add to Cart button improves:

✔ Faster shopping experience

Users can choose how many items they need without opening the product page.

✔ Higher conversions

Customers tend to purchase more when quantity selection is visible.

✔ Better user experience for wholesale stores

If you sell in bulk (10, 20, 50 units), this feature is essential.

✔ Works across all product grids

Because the script attaches automatically to any .add_to_cart_button, it works with all builders.

---

The Complete Working Code (Copy–Paste)

This code should be placed in one of these locations:

• Your child theme’s functions.php, or

• Code Snippets plugin → Add New Snippet, or

• custom plugin

It is 100% safe and does not modify your theme.

// Add quantity input above Add to Cart for all WooCommerce product grids (incl. AJAX-loaded)

add_action( 'wp_footer', 'aw_global_qty_for_all_products', 99 );

function aw_global_qty_for_all_products() {

    if ( is_admin() ) {

        return;

    }

    ?>

    <script>

    jQuery(function($){

        // Function that adds quantity fields to product cards

        function awAttachQty(context) {

            context = context || document;

            $(context).find('a.add_to_cart_button').each(function () {

                var $btn = $(this);

                // Find the product container (li.product or any .product wrapper)

                var $product = $btn.closest('li.product, .product');

                if (!$product.length) return;

                // Avoid adding twice

                if ($product.find('.aw-grid-qty-input').length) return;

                // Create quantity input

                var $qty = $('<input>', {

                    type: 'number',

                    class: 'aw-grid-qty-input qty',

                    min: 1,

                    step: 1,

                    value: 1

                });

                // Insert ABOVE the existing Add to Cart button

                $qty.insertBefore($btn);

                // Update data-quantity when user changes value

                function updateQty() {

                    var q = parseInt($qty.val(), 10);

                    if (isNaN(q) || q < 1) q = 1;

                    $qty.val(q);

                    $btn.attr('data-quantity', q);

                    $btn.data('quantity', q);

                }

                $qty.on('change keyup', updateQty);

                // Also make sure it’s set right before click

                $btn.on('click', function() {

                    updateQty();

                });

            });

        }

        // 1) Run once on initial page load

        awAttachQty(document);

        // 2) Watch the page for any new products added via AJAX / Load More / filters / etc.

        if (window.MutationObserver) {

            var observer = new MutationObserver(function(mutations){

                mutations.forEach(function(mutation){

                    // For each changed subtree, re-attach qty to any new add_to_cart_button

                    awAttachQty(mutation.target);

                });

            });

            observer.observe(document.body, {

                childList: true,

                subtree: true

            });

        }

    });

    </script>

    <?php

}

How This Code Works

1. Detects all Add to Cart buttons

The script looks for:

a.add_to_cart_button

This includes buttons created by WooCommerce AND by all Elementor widgets.

2. Automatically inserts a quantity box

Right above the Add to Cart button, a numeric quantity field is added:

1   ▾▴

3. Updates the correct quantity on click

Before WooCommerce sends the AJAX request, the script modifies the button’s:

• data-quantity attribute

• .data('quantity') jQuery value

So customers always add the correct amount.

4. Works with AJAX-loaded product lists

Thanks to MutationObserver, the script also attaches quantity inputs when:

• Filters load new products (JetSmartFilters, FacetWP, etc.)

• Load More button loads new products

• Infinite scroll loads new products

---

Add Optional CSS for Better Styling (Recommended)

Paste this into Appearance → Customize → Additional CSS:

.aw-grid-qty-input {
    width: 70px !important;
    margin-bottom: 8px;
    padding: 6px 10px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

If you want +/- buttons instead of only numbers, I can generate that version too.

---

Frequently Asked Questions

✔ Will this work with Elementor?

Yes — Elementor Pro, Essential Addons, and Royal Elementor product grids.

✔ Will this work on Category / Shop pages?

Yes, it automatically inserts the quantity selector everywhere.

✔ Does this affect my theme files?

No. It runs from the footer and adds quantity fields dynamically.

✔ Does it work with variable products?

It works with simple products.
If you want it for variations too, tell me — I can add that code.

---

Conclusion

Adding a quantity selector above the Add to Cart button is one of the quickest ways to improve your WooCommerce store’s usability and sales. With this lightweight script, you get:

• Fully automatic quantity fields

• AJAX compatibility

• No theme editing

• Support for Elementor & plugin-based product grids

If you need help customizing the styling, adding +/- buttons, or enabling this for specific product categories, feel free to ask!

---

Would you like:

✅ A downloadable ZIP plugin version?
✅ A Blogspot-ready HTML version?
✅ Screenshots / graphics for your article?