[Support request] Quantity Add to Cart buttons on Shop Page

[Jerry]

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!

[Elvin]

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;
}

[Jerry]

This worked great! How can I add padding to the top of the Quantity Plus/Minus button and the actual price? Is this possible?

[Elvin]

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;
}

[Jerry]

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:

https://tinyurl.com/ybwf79wq

How can I get these aligned center?
This is my page: http://jeroenc2.sg-host.com/product/midnight-lychee/

Thank you!

[Author]

Posts