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.

Before you make any code changes, have a backup of your site. This will help you restore things in case of unforeseen errors. I recommend using Jetpack Backup for real-time backups and one-click restores.

Download “Loop Add to Cart”

add-to-cart-2.5.0.zip – Downloaded 7462 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.


Subscribe to This Blog

Receive new articles from this blog directly in your inbox! No spam guaranteed!

Join 670 other subscribers

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

  1. 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!

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

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

    1. You’re welcome Anna!

  3. 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 ?

  4. 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 ?

  5. 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?

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

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

  8. 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!

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

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

  11. 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!

  12. 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!

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

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

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

Leave a Reply

You Might Also Like These Articles


Contribute to Improving This Blog

Did you enjoy this article? Was it helpful? Contribute to help me write more articles! The funds collected from this blog are reinvested directly into improving my skills or the blog so that I can provide more and better content!

One-Time
Monthly
Yearly

Make a one-time donation

Make a monthly donation

Make a yearly donation

Choose an amount

€1.00
€5.00
€10.00
€5.00
€15.00
€100.00
€5.00
€15.00
€100.00

Or enter a custom amount


Your contribution is appreciated.

Your contribution is appreciated.

Your contribution is appreciated.

DonateDonate monthlyDonate yearly

Don't Miss a Thing!

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 670 other subscribers

Continue Reading

Discover more from Nicola Mustone

Subscribe now to keep reading and get access to the full archive.

Continue reading