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 3137 times – 1 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 3137 times – 1 KB

56 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
  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

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.