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

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

Home Forums Support Quantity Add to Cart buttons on Shop Page

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1541360
    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!

    #1541444
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1541583
    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?

    #1541589
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1603249
    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!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.