WooCommerce Product Card Quantity Selector

WooCommerce Product Card Quantity Selector.

The WooCommerce Product Card Quantity Selector puts a quantity field right on your product cards, so customers can choose how many units they want and add them to the cart without ever opening the single product page. It works on your Shop page, Product Category pages and Product Tag pages — anywhere WooCommerce displays a product grid.

Why quantity on the product card matters

The standard WooCommerce shop page gives customers one option: add a single unit to the cart. If they want three, they either click through to the product page, or click Add to Cart three times, or add one unit and fix the quantity later in the cart. Every one of those paths adds friction, and friction costs you orders.

This is especially true for stores selling consumables, wholesale quantities, multipacks, spare parts or anything customers routinely buy in bulk. When someone is buying six of the same filter or a dozen of the same candle, forcing them through the single product page for each purchase is a genuine drag on your conversion rate and your average order value.

Simple products: inline selector

Switch on the quantity selector and it appears alongside the Add to Cart button on every product card. You choose the position — left, right, above or below the button — and set the margin around it, so it lines up cleanly with your theme’s grid without you writing a line of CSS. Different themes space their product cards differently, and these two settings are usually all you need to make the selector look native.

The selector works with WooCommerce’s AJAX add to cart on archive pages. Customers set a quantity, click Add to Cart, and the item goes into the cart without a page reload — they keep browsing exactly where they were.

Simple products: pop-up selector

If you’d rather keep your product grid uncluttered, turn on Show by Pop-up instead. The quantity field stays hidden on the card, and when a customer clicks Add to Cart a pop-up opens containing the quantity selector and the cart button. You get the same functionality with a cleaner shop page — useful for image-led or minimal store designs where an extra input field on every card would break the layout.

Variable products: variation and quantity in one pop-up

Variable products present a different problem. A customer clicking Select Options on a product card normally gets sent to the single product page to choose their variation. This plugin replaces that with a pop-up that contains both the variation selector and the quantity selector, so they can pick a size, a colour and a quantity, then add to cart — all without leaving the shop page.

For stores with large variable catalogues, this removes the single biggest source of back-and-forth navigation on the shop page.

Style the pop-up to match your store

The pop-up isn’t a generic modal you’re stuck with. From the admin panel you can set the background colour, add and style a container border, and add a drop shadow for depth. You can choose an opening and closing transition effect, set the background overlay colour, and control overlay transparency anywhere from fully opaque to fully transparent.

You also decide how the pop-up behaves on scroll: it can stay fixed and centred on screen while the page scrolls behind it, or it can scroll up and down with the page. Both are legitimate choices depending on your layout and your typical page length.

Admin panel and housekeeping

The plugin uses the a3rev plugin framework, which adds a few conveniences beyond the core settings. Manual Check For New Plugin Version lets you pull a new release immediately rather than waiting up to 24 hours for it to appear in your WordPress updates. Customize Admin Setting Box Display remembers which settings panels you left open or closed. And House Keeping means that if you ever delete the plugin — not just deactivate it — it removes every table and row it created, leaving your database exactly as it found it.

Installation and setup

Install the plugin from your a3 Dashboard under WooCommerce Plugins, activate it, and a Product Card Quantity Selector item appears in your WordPress WooCommerce menu. All settings live there. Full configuration details, screenshots of every settings panel and troubleshooting notes are in the Product Card Quantity Selector documentation.