Add WooCommerce add to cart button and quantity field to Shop archive page

Here is how you can add WooCommerce add to cart button and quantity field/form to Shop archive page. You may have just a bunch of linked products on the shop page but want to add a quicker way for a customer to add products to cart.

Woocommerce Shop Page No Add To Cart

No add to cart button

 

Depending on your WordPress theme the add to cart button may or may not be there – if not add the add to cart button use the code below in your functions.php file…

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );

For the quantity field use…

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
/**
 * Override loop template and show quantities next to add to cart buttons
 * @link https://gist.github.com/mikejolley/2793710
 */
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
	if ( is_user_logged_in() && is_shop() && $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;
}

This will give us…

Woocommerce Shop Page With Add To Cart Quantity

Now there is the quantity and add to cart

The button and quantity are on the page but need a little CSS this will vary depending on your theme…

.product .cart {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin-top: 10px;
}

.product .cart button[type="submit"] {
    margin: 0 10px !important;
}

Giving us….

Woocommerce Shop Page With Add To Cart Aligned

Button and quantity are aligned

Finally to keep the customer on the shop page so they can continually add products to cart – ensure the ‘Add to cart behaviour’ has the ‘Enable AJAX add to cart buttons on archives ‘ checked and the redirect to cart unchecked.

Add To Cart Ajax

 

Product Category Archive Pages

To include the quantity box on product category pages, you need to include the option of them in the first snippet, so as below…

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
/**
 * Override loop template and show quantities next to add to cart buttons
 * @link https://gist.github.com/mikejolley/2793710
 */
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
	if ( is_user_logged_in() && is_shop() || is_product_category() && $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;
}

The only difference is || is_product_category() is added.

6 Comments

  1. vishan srivastava on June 18, 2021 at 7:21 am

    please tell how we link add to cart button to qunatity so that on click of button quantity updated which is assigned to that button..??

  2. İsmet Doğancı on May 28, 2021 at 7:41 pm

    Thank you so much. It was an issue I had been dealing with for a long time. There were no plugins left that I had not tried. But I got a great result with these codes. I cannot thank you enough.

  3. Olivier Démontant on April 20, 2021 at 7:35 am

    Hello,
    Thanks for your post !
    I was wondering if it was possible when you click on the “-” button (in my archive page) that removes the quantity of the product in the basket in ajax?

    I want to reproduce the same system as in the cart, add or delete the quantities in ajax with the minus and the plus

  4. Daniel on March 9, 2021 at 3:27 pm

    By any chance if you know a fix for Variable products? Like, turning the Select Option button to the dropdown with quantity and add to cart?

  5. pramila on February 15, 2021 at 5:05 am

    Hello

    is there any way to update the price in real-time, without adding a cart? that’s mean update the prices for customers when product quantities change

  6. Niro on February 14, 2021 at 11:32 am

    Thank You Very Much..!

Leave all Comment