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 click on the product to go in to single product page and only then is it possible to add to cart.

I have tried to figure out what produces the list of products so that I can modify it, but as you probably guessed I'm very new to this.

How can I add that functionality the to shop page products?

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 click on the product to go in to single product page and only then is it possible to add to cart.

I have tried to figure out what produces the list of products so that I can modify it, but as you probably guessed I'm very new to this.

How can I add that functionality the to shop page products?

• javascript
• php
• wordpress
• woomerce
• product

3 Answers 3

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 woomerce_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( 'woomerce_loop_add_to_cart_link', 'quantity_inputs_for_woomerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woomerce_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 .= woomerce_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

Woomerce 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./?add-to-cart=Product-Id&variation_id=136&quantity=2

Example:

http://domain./?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./?add-to-cart=Id&&quantity=Qty

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('woomerce_after_shop_loop_item',
           'woomerce_template_single_add_to_cart', 30);

Thanks.