Add the quantity field to the [add_to_cart] shortcode
With WooCommerce you have some shortcodes available to use anywhere in your site.
One of them is the shortcode [add_to_cart] which allows printing the Add to Cart button for a specific product on your site.
It only shows the button though, you can’t choose the quantity of that product without going to the cart page before.
You can include the quantity field tweaking the default template.
Let’s see how.
Download “Loop Add to Cart”
add-to-cart-2.5.0.zip – Downloaded 5367 times – 1.27 KBDownload the zip above and extract it. Put the file add-to-cart.php in wp-content/themes/your-theme-name/woocommerce/loop/. This path may not exists, if it’s your case, create it and then paste the file in it.
This file will include the field in the shortcode which will show like this in Storefront:
What does it change?
The template above includes this code:
The if prevents the quantity field to show also on the Shop page and on the product category and tag archives.
The code inside the if prints the quantity field and makes it look better.
After it, also includes this JavaScript (printed by WooCommerce in the website footer):
This JS makes sure that when you update the quantity field, also the button is updated so when you click on it, the correct quantity is added to the cart.
Download “Loop Add to Cart”
add-to-cart-2.5.0.zip – Downloaded 5367 times – 1.27 KB
Unfortunately it did not work for me. I created the folder suggested and put the file, however, is not the quantity nor the button add to cart. Any suggestion?
Hey Alex,
try to disable the current theme and enable another one, like TwentyTwelve or Storefront. Then put the file in
woocommerce/loop/but on the new theme and test if it works.Thanks!
Doesn’t work for me either. Shows the price and then the button, not the quantity field.
Hi KFX,
i just tested again on TwentyFifteen and it works for me. I downloaded the zip in this article, so it works for sure.
Are you using the shortcode
[add_to_cart]? It does not work in the loop on the shop pages, but only with the shortcode.I am using Mystile theme and I tried as you suggested but it didn’t work out. Please give some suggestions how to make it functional. Thanks in advance 🙂
Hi Navjeet,
i just tested again and it works for me.
Are you using the shortcode
[add_to_cart]? It does not work in the loop on the shop pages, but only with the shortcode.I can confirm it is working!!
thanks for the nice customization!
Exactly what I was looking for!!
Even works in a child theme!
Only problem I want the feature image and title as well to appear for some reason it only shows price, quantity field and add-to-cart button!? not because of your code, it was before like that 😉
but any suggestion on that!?
thanks
dan
Hi Dan,
thanks for reading and confirming that it’s working!
It would be possible to add the product title and image in the shortcode, but needs some additional code, it would be better to write another article for that.
You have the object
$productin the code, so you have its ID. You can use that like$product->idto get the title and the image too. For more info you can check the WordPress codex.Thanks!
I used your code but its not working for me. I have my customized homepage with products, I want to display product price, qty box and add to cart button for each product. Right now I am using [add_to_cart id=”102″] as the shortcode. It displays price and button but not the qty box.
Please help me out ASAP.
Thank you
Hi Megha,
did you try with a different theme and disabling all other plugins?
No I did not try with other theme or disabling plgins
Hi there, Megha
to display a product and the image go to your product coppy the product id the paste it as the shot code like this [products ids=”1 “][add_to_cart id=”1 “]
Replace 1 with your product ID.
It works perfectly though I have encountered a small issue.
If I add 5 products first and then add 10 in the same product, second time, it only adds only 5 product.
It doesn’t matter how many times i add the same product, it only takes the quantity from the first time. Is there any fix for that please?
Thanks.
HI Bage,
thanks for reporting this issue! I didn’t test that honestly but reading the code it should work.
If you have patience I can debug my snippet and confirm if it’s a bug in my code or not, but at the moment I’m quite busy with work and can’t check immediately.
I’ll give it a look ASAP!
Thank you. When you have some time please check.
Hi
I noticed this problem too.
I add reload function, to show correct quantity it requires to reload two times. Row 29 has to be modified like below.
sprintf( ‘%‘,
Tested this on my child theme using BeTheme and it absofckingly works great. Thank you for the code. 🙂
You’re welcome! 🙂
Works perfect, thanks for this code!! Kudo’s for you
You’re welcome David 🙂
It does not work for virtue themes. Please help
Nice patch but I have an issue. The quantity box shows on both [product id=”11500″] and [add_to_cart id=”11500″] shortcodes.
I just want the quantity box to display on [add_to_cart] shortcode. Do you know how to do this?
Hello, Buongiorno!
Unfortunately I cannot get this working. I have the quantity selection box, but price doesnt change as I input another quantity. So if I click on add to cart, it’s just adding 1 product, completely ignoring the inserted quantity.
I don’t know if it’s related, but I’m also running this extension to calculate bulk discounts: https://it.wordpress.org/plugins/woocommerce-bulk-discount/
Running Woocommerce 2.50
Thanks in advance !
Update: even disabling the bulk discount plugin, the price isnt changed as I alter the quantity.
Hello, it works perfectly, I’m just wondered how to change/translate that Add to Cart button. I tried some adding filter to functions.php but it work only for other product pages but not for the shortcodes.
Thanks for help. 🙂
Hi,
Do you have any idea how to change the text “Add to cart” when display as shortcode? I searched the net, only can change the text in loop and single product page.
Thank you.
Hi Elvin,
The shortcode uses the template
loop/add-to-cart.php, so if you change it in the loop, it will change also there.Quantity fields shows but does not add more than 1 for me :{
Same here like you
Hello Nick, the issue i’m facing is that when select more than one produtc it always add one ly one product
Hi DSMF,
I just tested the script on WooCommerce 2.6.2 and Storefront 2.0.5 and it works.
Also I updated the template to the most recent version.
Hello!
So I’m trying your script which is working ok for DISPLAYING the quantity filed but doesnt not actually ADD quantities to the cart.
Is it possible that its because of this line in add-to-cart.php?
esc_attr( isset( $quantity ) ? $quantity : 1 ),
Because when i change 1 with 2, it add 2 products and so on.
Note : your script version on your page differ from the one that is provided in download, which one is the best one?
Hi Anthony,
I updated the zip with the most recent version of the template as it is in the core.
I tested it on Storefront and it works fine for me.
The script in this blog post is not different, but partial only. It is intended to be a reference of what you can find in the download file. I put it there to explain what there’s in the file.
Do not use the code from the post, just use the template.
Thank you!
I’ll try it tomorrow to see if thebug that add only 1 item is corrected ^^
I just tried to download your script and its saying forbidden now. Am I doing something wrong? With the most recent WooCommerce update my snippet no longer works. It simply adds a quantity of 1 no matter what I enter into the box. If you could let me know how to download the file or give me some assistance I would greatly appreciate it.
Hi Christopher,
Thanks for reporting the issue! I fixed it, you can download the file now.
Hi Nicola,
I’m also using Storefront 2.1.1 and the latest version of WP 4.6 etc and ‘Add to Cart’ adds only 1 item at a time regardless of the quantity, whether its 0 or 9.
I have tried with Storefront, Boutique and Twenty Sixteen with all plugins deactivated but still only 1 product at a time is added to the cart. I also tried on a different server with more recent versions of PHP and MySQL but still no luck. Do you have any suggestions please?
Its such a perfect solution and so nearly there, I hope you can help!
Thank you so much
Warren
How do I get it to say quantity infront of the box?
Hello Nicola,
I am experiencing the same problem as some of the others. When you add to cart it only adds one as opposed to the number chosen in the quantity field. Is there a chance that you will have this issue resolved in the near future? Other than this one small issue the rest works great, thanks for the hard work on this.
Hey Nicola,
Same problem here, it shows the quantity field but only add one the cart regardless of the number in the field.
Great work, I hope you can fix it.
Hi
It is disregarding the quantity change, How do I fix that , please?
thanks
Same Problem here, I can update the total on the page using the quantity on the add_to_cart shortcode, but it only shows one unit in the shopping cart. The Java is not updating the cart
Same here.. Any solution for this ?
I had the same problem with the quantity.
I’ve overwritten the js part. I’ve added the quantity as a parameter to the url.
jQuery( ‘.add_to_cart_inline .qty’ ).on( ‘change’, function() {
var qty = jQuery( this ),
atc = jQuery( this ).next( ‘.add_to_cart_button’ ),
href = atc.attr(‘href’),
lastParamStarts = href.lastIndexOf(‘&’),
lastParam = href.substring(lastParamStarts + 1);
if(lastParam.startsWith('quantity')){
href = href.substring( 0, lastParamStarts );
}
atc.attr( 'href', href + '&quantity=' + qty.val());
atc.attr( 'data-quantity', qty.val() );
});
Thank you so much! This solved it!
Hi there, can you expand on what specifically you’re overwriting here? I had to same issue with the quantity but can’t seem to get this fix to work!
Thanks 🙂
Hi,
I need when i click on add to cart button then per price of product * Quantity should be added into add to cart.
when you click on Add to cart then per price should be multiply with the quantity and the output should be added into add to cart.
for example: per price= $1.73 and quantity= 150, when some one click on add to cart then per price * quantity i.e $1.73*150 = 259.5
Hi Nicola! Great posts! I’ve gotten a lot from your blog already..
Any chance you can help expand on this post? I’ve been trying to add in the picture and a description, but all my php hacking isn’t getting me there this time..
TIA if you feel so inclined!
Hey Sarah,
You can find the
WC_Productclass documentation here.As you can see, there are methods to get the product description and its picture.
You can for example use
echo $product->get_description();to print the description, andecho $product->get_image( 'shop_thumbnail' );to get the image at the thumbnail size (the same as the shop page).Oh Nicola you saved my life! Thank you so much!
You’re welcome Anna!
Thank you very much for your great help!
However I am facing an issue and I wonder if you can help me.
My products are variable products with several variations.
Example: The id of a product is “270” and the ids of the variations are “271”, “272” and “273”.
I want to make a table in my page and use on each line a shortcode for each variation.
Or, when I use shortcode with the id “271” to add to the cart the first variation, the button works but I get in the cart the product 270 without specifying with option has been selected…
Do you know how I can fix that issue ?
It takes only 1 products as quantity . I am using the shortcode like this [add_to_cart id=”11430″] .. I added your code like you said.. But it takes only 1 as quantity ignoring the quantity I put there. Any solution regarding this ?
I used your loop-add-to-cart file and it worked brilliantly. Thank you! However, after the 3.3.5 Woocommerce update I traced an out of date template warning back to the loop file. I was wondering if you might have an updated copy?
Great, plugin. I can change quantities but the quantities don’t see to carry over to the checkout. For example, if I add 2 quantities to a product and then shop around got check, then items that should have multiple quantities still only say 1. Please advise.
Hi Nicola
Hope all is well.
May I second Kris’s request for an update to keep this useful addition to add_to_cart working correctly.
This is the error I am seing – if that helps
,
Notice: id was called incorrectly. Product properties should not be accessed directly. Backtrace: require(‘wp-blog-header.php’), require_once(‘wp-includes/template-loader.php’), include(‘/themes/tickets2018/front-page.php’), do_shortcode, preg_replace_callback, do_shortcode_tag, WC_Shortcodes::product_add_to_cart, woocommerce_template_loop_add_to_cart, wc_get_template, include(‘/themes/tickets2018/woocommerce/loop/add-to-cart.php’), WC_Abstract_Legacy_Product->__get, wc_doing_it_wrong Please see Debugging in WordPress for more information. (This message was added in version 3.0.) in /home/tickets/public_html/wp-includes/functions.php on line 4148
,
All the best
It works for me. Although I’m trying to accomplish a + to the left of the quantity field and a – to the right and remove the add to cart button and use all this with ajax. Anything you can help me with Nicole or guide to any resources? Thank you!
For those getting the WooCommerce Product ID error update $product->id to $product->get_id()
Hi there!
I’ve tried the code and it’s going great! thank you!
I have a small problem that cannot be solved … I am using the shortcode together with wpfacet plugin and when you refresh the filters using js, the quantities stop working. Do you have any idea what may be happening?
Thank you very much.
Hi!
Thank you so so much for this! You really saved my life. I’ve been searching for days for something like this. I actually used this add-to-cart button in slider revolution and it works.
Unfortunately though, I have the same problem with some other people here. No matter how much quantity is selected, it always adds just one piece.
Can you please help me out a bit? I’m really struggling with this…
Thank you in advance!
Hi,
I have used [add_to_cart_form id=”product_id”] shortcode. It displays perfectly first time when I am changing add_to_cart_form id’s value that time quantity button is not displayed,
Can you please guide me how to solve this problem.
Thanks in advance!
Hi all.
Make sure you have the “Enable add AJAX to the Add to cart buttons in archives” option checked from woocommerce settings.
Dear Nicola Mustone, first of all, thank you for your generosity in sharing your knowledge. I am a poet and your code has allowed me to create a page for my book where readers can select the quantity of the books to buy. It has worked well. Nevertheless, on October 24, 2020 I upgraded Woocommerce to 4.6.1
Now, on the “status” menu of Woomcemmerce, under the section “Templates” it shows the following message (I am using a child theme of TwentyFourteen):
twentyfourteen-child/woocommerce/loop/add-to-cart.php version 2.5.0 is out of date. The core version is 3.3.0
I have tried to follow the instructions on the documentarion website of Woocommerce to make the update:
https://docs.woocommerce.com/document/fix-outdated-templates-woocommerce/
But it happens that, after pasting your code on the new add-to-cart.php (the one dowloaded from wp-content/plugins/woocommerce/templates/[path-to-the-template]), now the add_to_cart shortcode shows two “Add to cart” buttons on the web page: One without quantity and the other one with quantities.
What should I do in order to display only your “Add to cart” button with quantity? When using your code with the newest version of Woocemmerce 4.6.1, it seem to still work, so I am wondering if the version 2.5.0 being out of date would be a real problem or it could be ignored.
I will appreciate your help,
Héctor
this worked like a charm!! Using Divi! You saved me so much work. Thank you so much!!!