Add a Quantity Field to the WooCommerce Archive Pages

If you’re familiar with WooCommerce, you will know that by default the archive (category) pages do not include a quantity input field by default. The theme you’re using could include it, but not many do.
In the case of selling small items, let’s just say simple pens, it can make sense to include a quantity field to let the customer easily choose how many pens they want to order, without going to the details page.

As there is no default way in WooCommerce to add the quantity field to the archive page, we’ve created a code snippet that you can use and it will work instantly.

In this code snippet we account for a couple of things:

It works with both the AJAX add to cart and the normal add to cart buttons
It only shows to simple products, variable products cannot be added to the cart directly
The quantity field has a maximum quantity that is relative to the maximum order amount
The quantity field will only show if a product can actually be purchased (for example, no price means not purchasable).
When a product is only sold individually, it will not show the quantity field
If you want to use or just test out the code snippet, you can copy the following to your (child) theme’s functions.php file.

 * 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->get_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', 0, 9 );
 * Add requires JavaScript.
function custom_add_to_cart_quantity_handler() {
	wc_enqueue_js( '
		jQuery( ".post-type-archive-product" ).on( "click", ".quantity input", function() {
			return false;
		jQuery( ".post-type-archive-product" ).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 "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' );

If you want to add the quantity field on the right side of the ‘Add to cart’ button, you can search and replace this line:

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


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

When you’ve added the code snippet, you should see the change immediately (if you’re using some sort of caching plugin you may need to purge the cache).

Other methods:
Override loop template and show quantities next to add to cart buttons.

 * Override loop template and show quantities next to add to cart buttons
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
		$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" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
		$html .= '</form>';
	return $html;