Home / WooCommerce / WooCommerce: Change Quantity on Shop Page

WooCommerce: Change Quantity on Shop Page

Published On: May 25th, 2020|Categories: WooCommerce|Tags: change quantity, shop page|3 min read|

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() {
		$("a.added_to_cart").remove();
	});
	});
	' );
	
	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 */
	margin-right:10px
}

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