Archived topic
Quantity Add to Cart buttons on Shop Page
4 replies · Started by Jerry on November 22, 2020
Hi guys,
I want to add Quantity Buttons to the Add to Cart on the Shops page (like you have on the products page).
I have found this code:
/**
* 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;
}
This works BUT... it doesn't align. What is a better alternative or solution?
http://jeroenc2.sg-host.com/shop/
Thanks guys!
Hi,
To clarify: Do you want it to be center aligned?
If so, you can add this CSS:
.add-to-cart-panel .cart.do-quantity-buttons div.quantity, .do-quantity-buttons div.quantity{
justify-content: center;
}This worked great! How can I add padding to the top of the Quantity Plus/Minus button and the actual price? Is this possible?
This worked great! How can I add padding to the top of the Quantity Plus/Minus button and the actual price? Is this possible?
Sure you can.
You can use the same CSS selector and add padding-top: 20px;.
So it'll look something like this:
.add-to-cart-panel .cart.do-quantity-buttons div.quantity, .do-quantity-buttons div.quantity{
justify-content: center;
padding-top: 20px;
}Hi guys,
The codes above worked great on shop pages etc however, on the product pages where "related products" are, the Quantity buttons are misaligned as in here:
How can I get these aligned center?
This is my page: http://jeroenc2.sg-host.com/product/midnight-lychee/
Thank you!
