Nicola Mustone

Happiness Lead @ Automattic

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 7238 times – 1.27 KB

Download 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:

loop-add-to-cart

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 7238 times – 1.27 KB
, ,

More Posts That You Might Like…

64 responses to “Add the quantity field to the [add_to_cart] shortcode”

  1. Alex Avatar
    Alex

    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?

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      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!

      Reply
  2. KFX Avatar
    KFX

    Doesn’t work for me either. Shows the price and then the button, not the quantity field.

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      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.

      Reply
  3. Navjeet Avatar
    Navjeet

    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 🙂

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      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.

      Reply
  4. dan Avatar
    dan

    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

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      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 $product in the code, so you have its ID. You can use that like $product->id to get the title and the image too. For more info you can check the WordPress codex.

      Thanks!

      Reply
  5. Megha Avatar
    Megha

    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

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      Hi Megha,
      did you try with a different theme and disabling all other plugins?

      Reply
      1. Megha Avatar
        Megha

        No I did not try with other theme or disabling plgins

        Reply
    2. Vusi Avatar
      Vusi

      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.

      Reply
  6. Bage Avatar
    Bage

    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.

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      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!

      Reply
      1. Bage Avatar
        Bage

        Thank you. When you have some time please check.

        Reply
    2. Marcin Avatar
      Marcin

      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( ‘%‘,

      Reply
  7. Danny Avatar
    Danny

    Tested this on my child theme using BeTheme and it absofckingly works great. Thank you for the code. 🙂

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      You’re welcome! 🙂

      Reply
  8. David Avatar
    David

    Works perfect, thanks for this code!! Kudo’s for you

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      You’re welcome David 🙂

      Reply
  9. Tommy Avatar
    Tommy

    It does not work for virtue themes. Please help

    Reply
  10. Ric Avatar
    Ric

    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?

    Reply
  11. Andrea B Avatar
    Andrea B

    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 !

    Reply
    1. Andrea B Avatar
      Andrea B

      Update: even disabling the bulk discount plugin, the price isnt changed as I alter the quantity.

      Reply
  12. Petr Avatar
    Petr

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

    Reply
  13. Elvin Avatar
    Elvin

    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.

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      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.

      Reply
  14. jessica Avatar
    jessica

    Quantity fields shows but does not add more than 1 for me :{

    Reply
    1. Aman Avatar
      Aman

      Same here like you

      Reply
  15. DSMF Avatar
    DSMF

    Hello Nick, the issue i’m facing is that when select more than one produtc it always add one ly one product

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      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.

      Reply
  16. Anthony Avatar
    Anthony

    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?

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      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.

      Reply
      1. Anthony Avatar
        Anthony

        Thank you!

        I’ll try it tomorrow to see if thebug that add only 1 item is corrected ^^

        Reply
  17. Christopher Soehnlein Avatar
    Christopher Soehnlein

    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.

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      Hi Christopher,
      Thanks for reporting the issue! I fixed it, you can download the file now.

      Reply
  18. Warren O'Donoghue Avatar
    Warren O’Donoghue

    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

    Reply
  19. greg Avatar
    greg

    How do I get it to say quantity infront of the box?

    Reply
  20. Bill Avatar
    Bill

    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.

    Reply
  21. Felipe Avatar
    Felipe

    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.

    Reply
  22. Navid Saeedfiroozeh Avatar
    Navid Saeedfiroozeh

    Hi
    It is disregarding the quantity change, How do I fix that , please?
    thanks

    Reply
  23. Gavin Avatar
    Gavin

    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

    Reply
    1. Aman Avatar
      Aman

      Same here.. Any solution for this ?

      Reply
  24. Gergő Avatar
    Gergő

    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() );
    });

    Reply
    1. Rachelle Avatar
      Rachelle

      Thank you so much! This solved it!

      Reply
    2. Alix Avatar
      Alix

      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 🙂

      Reply
  25. Deepak Avatar
    Deepak

    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

    Reply
  26. sarah Avatar
    sarah

    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!

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      Hey Sarah,
      You can find the WC_Product class 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, and echo $product->get_image( 'shop_thumbnail' ); to get the image at the thumbnail size (the same as the shop page).

      Reply
  27. Anna_0v0 Avatar
    Anna_0v0

    Oh Nicola you saved my life! Thank you so much!

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      You’re welcome Anna!

      Reply
  28. Ben Avatar
    Ben

    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 ?

    Reply
  29. Aman Avatar
    Aman

    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 ?

    Reply
  30. Kris Avatar
    Kris

    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?

    Reply
  31. Kevin Avatar
    Kevin

    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.

    Reply
  32. Mac Avatar
    Mac

    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

    Reply
  33. Niklas Avatar
    Niklas

    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!

    Reply
  34. Rebecca Avatar
    Rebecca

    For those getting the WooCommerce Product ID error update $product->id to $product->get_id()

    Reply
  35. david Avatar
    david

    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.

    Reply
  36. ledaki Avatar
    ledaki

    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!

    Reply
  37. MAKWANA KIRAN Avatar
    MAKWANA KIRAN

    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!

    Reply
  38. Ana Avatar
    Ana

    Hi all.
    Make sure you have the “Enable add AJAX to the Add to cart buttons in archives” option checked from woocommerce settings.

    Reply
  39. Hector Cisneros Avatar
    Hector Cisneros

    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

    Reply
  40. upswingmarketing Avatar
    upswingmarketing

    this worked like a charm!! Using Divi! You saved me so much work. Thank you so much!!!

    Reply

Leave a Reply

Recent Posts

Categories

Newsletter

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Blog at WordPress.com.

%d bloggers like this: