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:
3. Updates the correct quantity on click
Before WooCommerce sends the AJAX request, the script modifies the button’s:
-
data-quantityattribute -
.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:
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?
0 comments:
Post a Comment