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.
