Adding a quantity field on your WooCommerce Shop page is great upgrade to the user experience. This allows users to change the quantity of the product on the shop page before adding to cart. In this tutorial we’ll do that without installing any plugin. Instead of having to navigate to the cart or the product page to increase the quantity, they can increase the quantity from the shop page. If you think about it, making it easier for your customers to purchase more of your products means more sales for you.

More: Another big improvement which you can consider is to allow the users to change the quantity of the products in the cart or delete a product right on the WooCommerce Checkout page.

PHP Snippet: Add a Quantity Field on WooCommerce Shop and Category Pages

To add quantity field on the Shop and Category pages just add the following snippet to your child theme’s functions.php file.

 * Add quantity fields to Shop/Category pages.
function webroom_add_quantity_fields($html, $product) {
	//add quantity field only to simple products
	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
		//rewrite form code for add to cart button
		$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
		$html .= woocommerce_quantity_input( array(), $product, false );
		$html .= '<button type="submit" data-quantity="1" data-product_id="' . $product->get_id() . '" class="button alt ajax_add_to_cart add_to_cart_button product_type_simple">' . esc_html( $product->add_to_cart_text() ) . '</button>';
		$html .= '</form>';
	return $html;

 * Add AJAX support
 * Sync quantity field
function webroom_quantity_handler() {

	wc_enqueue_js( '
	jQuery(function($) {
	$("form.cart").on("change", "input.qty", function() {
	$(this.form).find("[data-quantity]").attr("data-quantity", this.value);  //used attr instead of data, for WC 4.0 compatibility
	' );

	wc_enqueue_js( '
	$(document.body).on("adding_to_cart", function() {
	' );
	wc_enqueue_js( '
	$(document.body).on("added_to_cart", function( data ) {

	$(".added_to_cart").after("<p class=\'confirm_add\'>Item Added</p>");
	' );

add_action( 'init', 'webroom_quantity_handler' );
add_filter( 'woocommerce_loop_add_to_cart_link', 'webroom_add_quantity_fields', 10, 2 );

(Optional) Add some CSS to style things a little:

html[lang="en-US"] .quantity:before {/* add another entry for translation */
	content:"Quantity:"; /* text before input */

.quantity {
	margin: 0 auto;
    margin-bottom: 15px;

Recent Articles

Related Articles

If you enjoyed reading this, then please explore our other articles below:


Leave a comment
  1. Nomad March 24, 2021 at 12:14 pm - Reply

    How can I add Product Name in {Product Name Here} Item Added?

    $(document.body).on(“added_to_cart”, function( data ) {

    $(“.added_to_cart”).after(“Item Added”);

  2. Nayrod November 19, 2020 at 10:52 am - Reply

    Thank you very much it worked perfectly!

    The problem is the CSS, it doesn’t work, I can’t align items on the shop/categories pages. Have you got a solution please?

Leave a Reply

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.