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:
- Make sure WooCommerce is installed, activated and you have a product created.
- Ensure that AJAX add-to-cart option is activated (WooCommerce -> Settings -> Products)
- Find the product ID that you want to use. In my case the SIMPLE PRODUCT is 1084 and the VARIABLE PRODUCT is 1085.
- 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.
- That’s it for a Simple Product type.
Variable Product Instructions:
- Step 1 is the same as above
- Step 2 is also the same
- Woah… step 3 is yet again the same.
- 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:
So start by clicking the Attributes tab in your WooCommerce product.
- 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)
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:
- WooCommerce plugin ($0)
- WooCommerce Dynamic Pricing & Discounts ($25) (This was not installed but allows you to create dynamic pricing based on quantity, cart value and more.)