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 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 5367 times – 1.27 KB
64 replies
  1. Alex
    Alex says:

    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
    • Nicola Mustone
      Nicola Mustone says:

      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
    • Nicola Mustone
      Nicola Mustone says:

      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
  2. Navjeet
    Navjeet says:

    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
    • Nicola Mustone
      Nicola Mustone says:

      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
  3. dan
    dan says:

    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
    • Nicola Mustone
      Nicola Mustone says:

      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
  4. Megha
    Megha says:

    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
  5. Bage
    Bage says:

    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
    • Nicola Mustone
      Nicola Mustone says:

      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
    • Marcin
      Marcin says:

      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
  6. Ric
    Ric says:

    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
  7. Andrea B
    Andrea B says:

    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
  8. Petr
    Petr says:

    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
  9. Elvin
    Elvin says:

    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
  10. DSMF
    DSMF says:

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

    Reply
  11. Anthony
    Anthony says:

    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
    • Nicola Mustone
      Nicola Mustone says:

      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
  12. Christopher Soehnlein
    Christopher Soehnlein says:

    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
  13. Warren O'Donoghue
    Warren O'Donoghue says:

    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
  14. Bill
    Bill says:

    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
  15. Felipe
    Felipe says:

    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
  16. Gavin
    Gavin says:

    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
  17. Gergő
    Gergő says:

    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
  18. Deepak
    Deepak says:

    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
  19. sarah
    sarah says:

    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
    • Nicola Mustone
      Nicola Mustone says:

      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
  20. Ben
    Ben says:

    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
  21. Aman
    Aman says:

    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
  22. Kris
    Kris says:

    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
  23. Kevin
    Kevin says:

    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
  24. Mac
    Mac says:

    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
  25. Niklas
    Niklas says:

    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
  26. david
    david says:

    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
  27. ledaki
    ledaki says:

    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
  28. MAKWANA KIRAN
    MAKWANA KIRAN says:

    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
  29. Ana
    Ana says:

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

    Reply
  30. Hector Cisneros
    Hector Cisneros says:

    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

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply