Adding Quantity to archive page add to cart

One should avoid touching the plugin’s code wherever possible and explore the simpler solutions using the hooks in WooCommerce. I had a similar problem and I solved it by doing the following:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); // remove that ajaxified Add To Cart button that automatically adds 1 item to the cart.

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 30); // replace it with the Add To Cart Button, complete with QTY field.. the same one that is used on the Single Product page.

woocommerce_show_messages(); // call this WooCommerce function where you want the "X item has been added to cart" message to appear.  Note that this will also override the location of other WooCommerce messages generated by this function.

This code may also affect other pages where the ajaxified Add To Cart button was called via the woocommerce_after_shop_loop_item action, but I assume having the QTY field can only be a benefit, really… 🙂

You can add it anywhere in your theme’s functions.php file or I suppose a create simple plugin to make it reusable and theme independent.

Call the woocommerce_show_messages() function where you want the “Glass Of Milk was successfully added to your cart” message to physically appear in your theme. E.g. in your header.php file under the div with ID main (assuming you have one in your theme).

geodgeod, is the solution I offered not working? Are you using the default template that came with woocommerce?

Just copy the first 2 lines of code above and paste them anywhere in your theme’s functions.php file.

By adding this code, the usual Buy or Add button will be replaced with a Add to Cart button and a quantity field.

You will however notice that it won’t put the “X Item has been added to your cart” message where you want it. So, you can add the woocommerce_show_messages(); line where you want the messages to appear in your theme.

Let me know if this solution doesn’t work for you.

Thanks Jerome. I did as you mentioned and added the code to the bottom of my functions.php file. Still no luck. The issue I may be experiencing is that I am trying to use it on a page where I am calling out categories for the cart using shortcodes like:

[product_category category=”broken homes” per_page=”96″ columns=”4″]

[product_category category=”dancing bears” per_page=”96″ columns=”4″]

On a standard page. It is also housed on a ithemes builder child theme and looks something like this:

http://300yeardisc.com/cart-shot.jpg

Let me know what you think please. And BIG thanks for the help.

So I managed to add the quantity buttons on the product category page by hacking the code. You may want to make backups before you start tinkering, though.

In the woocommerce teamplates folder that you copied to your theme folder, in woocommerce/loops/add-to-cart.php, add the line of HTML starting with <div class=”quantity”> you find in woocommerce/single-product/add-to-cart/quantity.php.

(Add it wherever you want, but for this example JS to work, add it right before <?php endif; ?>.)

You should be able to see the quantity form now.

Then, in the actual plugin folder, in assets/js/frontend/add-to-cart.min.js, add “var q=t.next().find(‘input[type=”number”]’).val();” right after “var t=e(this);”.

Then, a bit further, replace “quantity:t.attr(“data-quantity”)” with “quantity:q”.

That did it for me.

This snippet ended up working for me perfectly. Just add it to your functions.php file.

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); // remove that ajaxified Add To Cart button that automatically adds 1 item to the cart.

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 1); // replace it with the Add To Cart Button, complete with QTY field.. the same one that is used on the Single Product page.

More of an elegant solution. Hoping this helps.

True,in which case WooCommerce’s “QuickView” plugin is the ajax solution you’re after.

Why re-invent the wheel ? More of a lightbox solution though, but atleast it doesn’t refresh the page.

http://www.woothemes.com/products/woocommerce-quick-view/