Adding Quantity to archive page add to cart

Hmmm… will go through that you talk about. Thank you so much!
Will come back if I need help or to share it if I get it!
even though the plugin idea sounds really good ??

Good day all –
Did you figure out how to do this or create the plugin? Any help will be greatly greatly appreciate. Let me know and thanks!

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… ??

Where in the woocommerce-hook file is this added? I have found the corrosponding action but don’t know where it is to be added ? Cheers.

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).

Bobdowne (or anyone) – would you kindly post and share the code you used if you figured this out. Would be very helpful ??

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.

Jerome Fitzpatrick > Is there anyway your solution above can take into account multiple quantities (setup by the min/max extension) ?

This is the issue I’m having from the archive page when adding quantities.

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:

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

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

Hi all,

Jerome’s solution works for me, with the only drawback that it reloads the page after adding to cart and appends the URL with “?added-to-cart=[id#]”.

Which is less nice than the Ajax function which adds the product without reloading.

I guess the only way to have both is to hack it the way smashingpixels suggests.

Right?

Thanks!

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.

Only thing is, it works once and then goes back to adding only one item after clicking the same add-to-cart button.

Anybody know why?

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.

That is indeed a very clean and elegant solution. The only drawback is that it will reload the page after add-to-cart. Ajax avoids that.

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.

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