Woocommerce Shop Page: Quantity Input On Add To Cart Button

I'm using the Divi theme with WooCommerce plugin. In shop page, I would like to have the quantities adjustments directly on add to cart button . My web site Presently you have to

Solution 1:

Advice: Is better to use a child theme, just to avoid losing the changes your are going to do when theme get updated. So I assume you will use now a child theme.

Check in WooCommerce > Settings > products (tab) > Display (sub tab) that you have correctly set the behavior you want:

In this active child theme, you will find a function.php file. If not, you will copy it from your parent theme removing all code inside, except the <?php tag at the beginning (if it exist) and same thing for ?> at the end (if it exist).

Once done, you are going to use woocommerce_loop_add_to_cart_link filter hook to add quantity to your add-to-cart button (for simple products). You will paste this code snippet inside it:

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
functionquantity_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;
}

You can also customize this code to better feet your needs…

Reference: Override loop template and show quantities next to add to cart buttons

Solution 2:

Woocommerce documentation has APIs has well to feel. Recently they upgraded to WP JSON API integration with 2.6 version. You have two options here. 1) Make an order via the api call 2) Make and ajax request to change quantity easily by

http://domain.com/?add-to-cart=Product-Id&variation_id=136&quantity=2

Example:

http://domain.com/?add-to-cart=97&variation_id=136&attribute_pa_sizes=xl

If you don't have any variation or options, you can easily do it via

http://domain.com/?add-to-cart=Id&&quantity=Qty

Solution 3:

So what I ended up doing was adding the single page add to cart action to a hook for the shop page loop as follows:

add_action('woocommerce_after_shop_loop_item',
           'woocommerce_template_single_add_to_cart', 30);

Thanks.