How to Pre-Populate A WooCommerce Shopping Cart with 1-Click

I had the need recently to use WooCommerce as both a shopping cart system (traditional e-commerce store front) and as a “1-click add to cart via button on a landing page” system. No idea what else to call it but you know the type where you land on a page and it gives you a few options and then usually goes to a pre-set checkout page for that item.  In other words, I didn’t want to just have a button that took the user to the product page and hope for them to add it to the cart.

In addition to that I wanted to make it where the quantity was adjusted automatically. For example, I’d have a quantity of 1, 3 or 5 and give progressive discounts based on that quantity (I’ll show how I did that too).

Simple Product Instructions:

  1. Make sure WooCommerce is installed, activated and you have a product created.
  2. Ensure that AJAX add-to-cart option is activated (WooCommerce -> Settings -> Products)
  3. Find the product ID that you want to use.  In my case the SIMPLE PRODUCT is 1084 and the VARIABLE PRODUCT is 1085.
    woocommerce-productId
  4. Now you’ll want to craft your URL that will be used on your landing page button.  Replace the product ID with the yours and set the quantity that you’d like to add to the cart.  Keep in mind that if they have that item in their cart already it will keep adding that quantity to it.[code]http://darrencrawford.com/cart/?add-to-cart=1084&quantity=3[/code]This what it will look like when you have it setup correctly.  Feel free to click here and see for yourself.
    woocommerce-addtocart
  5. That’s it for a Simple Product type.

 

Variable Product Instructions:

  1. Step 1 is the same as above
  2. Step 2 is also the same
  3. Woah… step 3 is yet again the same.
  4. Here’s where it gets a little more complex.  We need to get the attributes and variations and pass them in the URL otherwise you will get an error like this:
    woocommerce-attribute-requiredSo start by clicking the Attributes tab in your WooCommerce product.woocommerce-attributes
  5. Now use this attribute and variation in you URL construct like this:[code]http://darrencrawford.com/cart/?add-to-cart=1085&quantity=3&variation_id=1086&attribute_size=small[/code]Let’s break down that link:
    ?add-to-cart=1085  <– this is the ID for the item
    &quantity=3 <– this will add 3 units to the cart
    &variation_id=1086 <– this is the ID from the Variations tab for the item you are adding
    &attribute_size=small <– this is the attribute and the plain text slug (let’s explore this part as it is the most confusing)

 

&attribute_title=variation

Everything after the &attribute_ is determined based on what your named your attribute.  If it is a single word like Size (like I used above) then it would be &attribute_size.

If you decide to use two or more words then you will hyphenate the words after attribute.  So if I used Shirt Size as the name of the attribute I’d construct the attribute variable as &attribute_shirt-size.  See what I did there?  There is an underscore after attribute but then the rest is hyphens.

What happens if you use special characters in your attribute name?  You will need to make sure they are encoded with a tool so that:

Ben & Jerry becomes Ben%20%26%20Jerry

%20 = space

$26 = & symbol

Then you’d include that hot mess at the end of your attribute_ which would be:  &attribute_Ben%20%26%20Jerry

 

Once you’ve put your URL together give it a test.  If you have something wrong you’ll see an alert in the Woo cart.  Just make sure that you have everything in place, that the URL is encoded if it is using special characters and the ID numbers match up to the product and variation you are trying to add.

Test it out:

Give it a go to see what happens: http://darrencrawford.com/cart/?add-to-cart=1085&quantity=3&variation_id=1086&attribute_size=small

 

Tools Used or Recommended:

 

10 Comments

  1. Evgen on October 5, 2015 at 4:01 pm

    Helped.
    Thanks a lot.

  2. Eli on November 26, 2015 at 6:29 am

    is there a way to add multiple products at the same time?

    • Darren Crawford on November 26, 2015 at 7:28 am

      Yes – add &quantity=3 to the link.

      EXAMPLE: example.com/cart/?add-to-cart=123&quantity=3

  3. Gita on February 5, 2016 at 5:00 pm

    Thank you. That is very helpful. How would you add a coupon code to the link above.

  4. Brandon on February 21, 2016 at 12:10 am

    What would the example look like to add two separate products to the same cart. say 12 of product A and 6 of product B.

  5. Jay on March 24, 2016 at 7:08 pm

    Hi Darren,

    Do you know if there’s a way to populate the cart as described, only with a discount applied? For instance, we sell CDs for 12.99 each but on a landing page, would like to have a special deal of $25 for 3 CDs discounted by 20%. Would like it to populate the cart with those 3 CDs and the discount automatically applied. Thanks in advance for any insight.

    Jay

  6. Jay on March 24, 2016 at 7:10 pm

    already replied with the comment below but just to clarify. Wanting to offer a specific deal on 3 CDs (or whatever the offer is), not just a progressive discount.
    —————————————————–

    Jay

    Hi Darren,

    Do you know if there’s a way to populate the cart as described, only with a discount applied? For instance, we sell CDs for 12.99 each but on a landing page, would like to have a special deal of $25 for 3 CDs discounted by 20%. Would like it to populate the cart with those 3 CDs and the discount automatically applied. Thanks in advance for any insight. – –

  7. Walt on November 17, 2016 at 5:58 pm

    Darren could you answer the question Brandon asked?
    What would the example look like to add two separate products to the same cart. say 12 of product A and 6 of product B.

    Thanks!

    • Darren Crawford on November 17, 2016 at 9:07 pm

      Sorry. I’m no longer using Woo… But, it might take comma in the URL to make it work

      Eg: ?add-to-cart=1234,5678&quantity=12,6

      Just guessing and have no way to actually check myself right now.

  8. Lorraine on January 12, 2017 at 3:17 pm

    Thanks for this blog post, helped me out a lot for our site!

Leave a Comment