WooCommerce: Pre-defined Add to Cart Quantity Selectors

I seriously spent more than usual trying to write a decent title. Still, I’m not 100% sure I’ve explained it well – so here’s some more context.

The WooCommerce Single Product Page add to cart form features a quantity input and an add to cart button. Super simple. Customers can define a quantity and add the current product to the cart.

Now, let’s imagine you want to change this experience based on your business requirements, and instead of the quantity input and add to cart button you want to show 3 buttons: “Add 1x to the cart“, “Add 2x to the cart“, “Add 3x to the cart.

And if you can match this with a bulk quantity discount functionality, you can even change the messaging to e.g. “Add 1x to the cart“, “Add 2x to the cart and save $X“, “Add 3x to the cart and save $Y“…

So, let’s see how to hide the default add to cart form, and instead show buttons that allow the customer to add to cart a pre-defined product quantity (for simple products). As per this screenshot:

No more add to cart form – instead, we display pre-defined quantity select buttons, so that we force the customer to pick one of the 3. Works even better if you have bulk discounts!

PHP Snippet: Turn Add to Cart Form Into Quantity Selector Boxes @ WooCommerce Single Product Page

 * @snippet       Add to Quantity Buttons @ WooCommerce Single Product
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @community     https://businessbloomer.com/club/

add_action( 'woocommerce_before_single_product', 'bbloomer_123_quantity_selectors', 1 );

function bbloomer_123_quantity_selectors() {
	global $product;
	add_action( 'woocommerce_single_product_summary', 'bbloomer_quantity_selectors', 17 );
	add_action( 'woocommerce_single_product_summary', 'bbloomer_quantity_selectors_css', 18 );
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

function bbloomer_quantity_selectors() {
	global $product;
	<div class="quantities-wrapper">
        <div class="quantity-wrapper">
            <a class="single_add_to_cart_button button alt qtyselector" href="/?add-to-cart=<?php echo $product->get_id(); ?>&quantity=1">Add 1 <?php echo $product->get_name(); ?> to the cart</a>
        <div class="quantity-wrapper">
            <a class="single_add_to_cart_button button alt qtyselector" href="/?add-to-cart=<?php echo $product->get_id(); ?>&quantity=2">Add 2 <?php echo $product->get_name(); ?> to the cart</a>
        <div class="quantity-wrapper">
            <a class="single_add_to_cart_button button alt qtyselector" href="/?add-to-cart=<?php echo $product->get_id(); ?>&quantity=3">Add 3 <?php echo $product->get_name(); ?> to the cart</a>

function bbloomer_quantity_selectors_css() {
		 a.single_add_to_cart_button.qtyselector { display: block; border-radius: 8px; text-transform: uppercase; margin-bottom: 1em; text-align: center; }

Advanced Plugin: WooCommerce Quantity Discounts, Rules & Swatches

If you’d love to code but don’t feel 100% confident with PHP, I decided to look for reliable plugins that achieve the same result (and more).

As usual, I’ve chosen WooCommerce plugin vendors based on reputation, support quality, code cleanliness, long-term reliability and – probably almost as importantly – where the people behind the plugin are active supporters of the WordPress ecosystem.

With the WooCommerce Quantity Discounts, Rules & Swatches plugin by Studio Wombat, you can enable tiered pricing, quantity swatches, min & max quantities, tooltips and multilingual support all from the same settings panel.

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
    In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Remove / Edit “Added to Your Cart” Message
    A client asked me to completely remove the message that appears after you add a product to the cart from the product page. This is simply done by using a PHP snippet, so here’s the quick fix for you!
  • WooCommerce: Automatically Update Cart on Quantity Change
    There is a lot of literature online that solves this UX problem – so in this article let’s see if I can give you a simplified, working, updated version. So, do you hate the “Update Cart” button too? Yes, the one you have to click after you update the quantity of a product in the […]
  • WooCommerce: Add to Cart Quantity Plus & Minus Buttons
    Here’s a quick snippet you can simply copy/paste or a mini-plugin you can install to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page and Cart page. The custom code comes with a jQuery script as well, as we need to detect whether the […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

2 thoughts on “WooCommerce: Pre-defined Add to Cart Quantity Selectors

  1. Hi., Tried adding this, but the buttons got placed above the content. I am using Divi Theme Builder for single product pages, because client needs to have extra content added (tables etc). Any ideas on how to place these buttons after the regular Add to cart button? Tried all hooks in your Visual Hook Guide. And how to add these buttons in a single row?

    1. Hello Johan, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

Questions? Feedback? Customization? Leave your comment now!

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *