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;
}




Recent Articles

Blog Categories

Related Articles

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

Comments

Leave a comment

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.