How to Add Quantity Inputs to the WooCommerce Shop Page

Looking for an easy way to add a quantity input next to your add to cart button on your WooCommerce store page? Look no further - here's an easy guide.

In this article, you are going to see the step-by-step process (and code snippets) on how to add a quantity input next to your add to cart buttons on your WooCommerce store pages.

Install & activate the Code Snippets WordPress Plugin

Code Snippets WordPress Plugin

The Code Snippets WordPress plugin is a super simple way to run code on your WordPress website. With this plugin, you will no longer need to add custom code snippets to your theme’s functions.php file, which makes it way easier to edit your website’s functionality.

A snippet is a small chunk of code that you can use to add functionality to your WordPress website. The Code Snippets plugin gives you an easy-to-use interface to add snippets, run them on your website, and manage all your snippets easily.

Create a new code snippet called “Quantity Picker”

Once you have the Code Snippets WordPress plugin installed and activated, open the plugin from the left-side menu, and add a new snippet.

Add new code snippet in the Code Snippet WordPress plugin

Once you have the new code snippet created, we are going to add our customer PHP code.

Copy & paste this PHP code into the snippet

Copy this code to your computer’s clipboard and paste it into your snippet.

/**
 * Add quantity field on the archive page.
 */
function custom_quantity_field_archive() {

	$product = wc_get_product( get_the_ID() );

	if ( ! $product->is_sold_individually() && 'variable' != $product->product_type && $product->is_purchasable() ) {
		woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
	}

}

add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 15, 9 );


function custom_add_to_cart_quantity_handler() {
wc_enqueue_js( '
jQuery( "body" ).on( "click", ".quantity input", function() {
return false;
});
jQuery( "body" ).on( "change input", ".quantity .qty", function() {
var add_to_cart_button = jQuery( this ).parents( ".product" ).find( ".add_to_cart_button" );
// For AJAX add-to-cart actions
add_to_cart_button.attr( "data-quantity", jQuery( this ).val() );
// For non-AJAX add-to-cart actions
add_to_cart_button.attr( "href", "?add-to-cart=" + add_to_cart_button.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
});
' );
}
add_action( 'init', 'custom_add_to_cart_quantity_handler' );
Copy code to Code Snippet

Save & activate the snippet, then test

You should be all set now! Now that you have the code function running on your website, your store page should have the quantity picker next to the add to cart buttons!

Add quantity fields to WooCommerce store page

If you have any questions and/or comments, please leave a comment below.

14 Comments

  1. Hi!

    I used the snippet code and succeeded in add the quantity button, but now the “add to cart” button has disappeared. Would you know why that is? Thanks in advance.

    Best,
    Kulwinder

    • Hey Kulwinder,

      Can you please send me a link to your website’s shop page? I can try to take a look into what’s happening for you!

      Best,
      Greg

  2. The code works perfectly!
    Thank you very much for sharing!

    • Hey Rosa,

      I’m glad it worked! Let us know if there are any other topics that you would like a write up on 🙂

      Best,
      Greg

  3. Is there a way to make it so that they quantity button stays to the left of the cart button. Mine shows below, or is hidden on some of the items.

    • Hey Matt,

      It’s possible with some CSS yes. I can’t see the buttons on your website since I have to log in. Is there another way I can test to see if I can share some CSS for you to add to your website?

  4. I’ve deactivated it for now. I’m running flatsome and when I add the snippet, it shows below the add to cart button and to the left. I would like it to be just above the add to cart button and aligned as center. What css code can I add to do this?

    • Hi Riaan,

      Can you please email me at Greg@chairlift.us?

      You’ll have to activate the snippet so I can try some CSS for you.

      Do you have a staging website that you can activate it on?

  5. This one works really nice thanks!
    Is there anyway to add and remove products to cart automatically to cart when qty changes?
    I want to remode add to cart button and just use +/-

    • You should be able to do that with JQuery functionality, yes!

      I don’t have the script for that, but I would imagine you can do it with an “onclick” function for the + or – buttons that looks up the product ID and runs an AJAX call to add or decrement product quantities in cart!

  6. IT’s work but position in bottom i want to count button with in add button , and when click add card then it’s go checkout page i don’t want this ,how to solve

    • You may have to change your WooCommerce settings…

      1. Go to: WooCommerce > Settings > Products > General
      2. Uncheck “Redirect to the cart page after successful addition”

      Let me know if that works!

  7. Hello, thanks for sharing this code it does work perfect but I have the same case than the user before.

    I’m running flatsome and when I add the snippet, it shows below the add to cart button and to the left. I would like it to be just above the add to cart button and aligned as center. What css code can I add to do this?

    thanks you

    • Hi Juan Pablo,

      Can you please share your URL with me so I can take a look and see what modifications I can help you with?

      Thanks,
      Greg

Leave a Reply