Move Quantity Field alongside Add to basket button Shop Page

  • Resolved advintureadmin

    (@advintureadmin)


    4 years, 6 months ago

    Hi,

    I have just used the below php to add a quantity field to the woocommerce shop page.

    However I can find a way to align it alongside the add to basket button.

    Can anyone help?

    Thanks!

    /**

    * Add quantity field on the archive page.

    */

    function custom_quantity_field_archive() {

    $product = wc_get_product( get_the_ID() );

    if ( ! $product->is_sold_individually() && ‘variable’ != $product->product_type && $product->is_purchasable() ) {

    woocommerce_quantity_input( array( ‘min_value’ => 1, ‘max_value’ => $product->backorders_allowed() ? ” : $product->get_stock_quantity() ) );

    }

    }

    add_action( ‘woocommerce_after_shop_loop_item’, ‘custom_quantity_field_archive’, 8 );

    function custom_add_to_cart_quantity_handler() {

    wc_enqueue_js( ‘

    jQuery( “body” ).on( “click”, “.quantity input”, function() {

    return false;

    });

    jQuery( “body” ).on( “change input”, “.quantity .qty”, function() {

    var add_to_cart_button = jQuery( this ).parents( “.product” ).find( “.add_to_cart_button” );

    // For AJAX add-to-cart actions

    add_to_cart_button.attr( “data-quantity”, jQuery( this ).val() );

    // For non-AJAX add-to-cart actions

    add_to_cart_button.attr( “href”, “?add-to-cart=” + add_to_cart_button.attr( “data-product_id” ) + “&quantity=” + jQuery( this ).val() );

    });

    ‘ );

    }

    add_action( ‘init’, ‘custom_add_to_cart_quantity_handler’ );

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    At the moment, your quantity selector is wrapped in a <div> element, which would be display: block; by default, resulting in it sitting on its own line.

    You can change that with some CSS — something like the following should cause the quantity and Add to Cart button to display side-by-side instead:

    
.products li.product div.quantity {
	display: inline;
}

    You can add that to the “Additional CSS” section of your Customizer (Appearance > Customize).

    I hope that helps!

    Thread Starter advintureadmin

    (@advintureadmin)

    Works perfectly! Thank you so much

    Plugin Support kellymetal a11n

    (@kellymetal)

    Glad to hear that! : )

    I’m going to mark this thread as resolved. If you have any further questions, please start a new thread.

    Have a wonderful day!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Move Quantity Field alongside Add to basket button Shop Page’ is closed to new replies.