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.
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…
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….
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.