The Ultimate Guide To Adding Products To Cart Using Ajax In WooCommerce

Working with WooCommerce brings me a lot of joy. If you are a developer, I hope the experience I’m sharing below will be helpful to you.

How to add a simple product to cart using ajax

Adding a simple product via ajax is very simple. From any page, you send the following request, via POST or GET:

{
add-to-cart: product_id,
quantity: x
}

So, for example, I have my product here which has ID 30:

woocommerce-simple-product

Now, if I want to add this product to cart, I simply append the following data to any URL of my website:

?add-to-cart=30&quantity=2

In this example, I’m going to add two products to cart.

For example, I append the string above to the cart url, which makes the full URL like so:

http://localhost/wordpress/cart/?add-to-cart=30&quantity=2

If I open that URL in my browser, I will be redirected to cart page and the product will be in cart.

Cool, isn’t it 🙂

Now, simple product is simple. How about variable products? I requires a bit more work.

 

How to add a variable product to cart using ajax

With variable product, you need to find the variation ID to add the exact product you need to cart. If you use the parent product ID, you may see an error, which is not surprised at all. Let me show you.

I have this product:

woocommerce variable product

As you can tell from the product page, it’s a variable product (select boxes to select the variations, price in range).

Now, the product id is 31. If I execute the following URL:

http://localhost/wordpress/cart/?add-to-cart=31&quantity=2

You’ll see this error:

It is not hard to understand, right? Since the product is a variable product, you will need to find the variation ID.

Where to find the variation ID? Let’s do an inspection, shall we?

If you right click on one of the select boxes (to select variation) and click on inspect (on Chrome), you’ll see this:

As you can see, our select box is inside a form. That form has an attribute called data-product_variations . This attribute contains the JSON data of all variations of our product. Let’s extract the data using jQuery.

extract variable product data in woocommerce

as you can see that, I select the form with the selector .variations_form.cartif you know jQuery or CSS selector, this part shouldn’t be strange to you.

I was able to extract the JSON string from the attribute data-product_variations and turned that into javascript object using JSON.parse.

Now, you can see that the data is an array contains 4 elements. Since my product has two attributes “Color” and “Size”, it’s not surprising that there are 4 variations.

Let’s expand one of the 4 variations and see what we have:

There are a tons of data and surely you’ll see the variation_id is 150.

That’s all we need to add this product to cart.

Now, let’s navigate to this URL:

http://localhost/wordpress/cart/?add-to-cart=150&quantity=2

Sure enough, the product is added to cart.

successfully add variable product to cart using custom URL

Interesting, right?

Now, you are able to add simple and variation products to cart, which is great. However, if you notice the cart at the navigation bar. It’s not updating if you send the requests via ajax. How can you fix that?

How to add products to cart and update the cart widget(at the navigation bar)

To add the products to cart and then update the cart widget, you’ll need a different approach. At least, you need a different URL to send the request to.

Are you ready?

You still can send the request to any URL of your site, however, this time, you need a new parameter:

?wc-ajax=add_to_cart

Let’s open the browser’s console and enter the following data:

jQuery.post('http://localhost/wordpress/cart/?wc-ajax=add_to_cart', {product_id: 150, quantity: 10}, function(response){ console.log(response); })

We are going to print out the response from the server. It contains some very useful data that let us update the cart.

Now, hit enter then wait a second and this is what we got back:

The most important piece of data is the fragments. It is an array of objects. The key of each object is the css selector of cart-related element and the value of that key is the HTML content of that element.

Updating the cart now should be trivial. Consider it’s your homework 😉

Conclusion

As you can see, adding WooCommerce products via ajax is quite simple. With the knowledge you gain from this post (hopefully), I hope you can use it and make some awesome applications.

 

 

 

How To Set Up Free Shipping Coupon In WooCommerce

Coupon is a great way to reward your customers. In WooCommerce, you can create coupons for almost anything. You can create a coupon that offers a 10% discount or a fix amount discount. However, little people know that you can create a free shipping discount. You can even set a minimum order for that coupon to be effective. Sounds good? Let’s find out how to set up free shipping coupon in WooCommerce.

Here are what we are going to do to setup free shipping coupon:

  1. Make sure your store has coupon enabled
  2. Create the coupon that enables free shipping
  3. Add free shipping to your shipping zone
  4. Apply the coupon on a test order

Make sure your store has coupon enabled

The very first step is to make sure you have the use coupon option checked. Let’s go to WooCommerce->Settings->General and scroll down to the Enable coupons section:

enable the coupon codes usages in WooCommerce

Make sure you have the checkbox “Enable the use of coupon codes” checked. We are ready for the next step.

Create the coupon that enables free shipping

Let’s go to WooCommerce->Coupons and click on Add coupon:

go to woocommerce coupon

Now, enter the details for your coupon:

create the coupon that enables free shipping

There are three fields you need to pay attention to, other fields are not important in enabling free shipping for the coupon.

  1. You need to give the coupon a name. In the example above, my coupon’s name is SHIPZERO
  2. You may or may not give the coupon a description. However, it’s extremely helpful when you come back and visit your coupons later, you will know exactly what they do.
  3. There is a small check box says “Allow free shipping” and you need to check it.

That’s all we need to do with the coupon. Now, click on submit and move on to the next step.

Create free shipping method for your shipping zone

Our next step is to create a free shipping method in your shipping zones. If you have multiple shipping zones, you may need to create one free shipping method for each zone.

Let’s head to WooCommerce->Settings->Shipping->Shipping zone:

all shipping zones in woocommerce

As you can see, I have four zones here. I’m going to enable free shipping for Australia. As mentioned before, if you need to enable the use of the free shipping coupon we have just created, you may need to repeat the following steps for all zones.

Let’s click on the Edit link under Australia:

all shipping methods in Australia

Let’s click on Add shipping method:

add free shipping method for zone

Select free shipping in the drop down box and click on Add shipping method.

Then, you will see a new shipping method added in our list:

free shipping method is now under Australia

Let’s click on the Edit link under free shipping. We are going to configure the condition for the free shipping option to be effective.

configure free shipping option

Here, you can edit the title. I’ll leave the default title as Free shipping. The most important field is the select box: Free shipping requires…

There are a few options you can select from. You can require that the order must have a minimum amount so the coupon can be active. However, I’m going with the first option here, which requires only a valid shipping coupon.

After that, click on Save changes and we are done.

Apply the coupon on a test order

We are going to make a test order on my store. Let’s add some items and go to cart and click on Proceed to check out.

change country

The total before coupon is applied:

total before coupon applied

 

You can see the notice says: “have a coupon?…” If you are going to apply the coupon now, the coupon will not have any effect. Why? As you may remember, we only enabled free shipping for Australia. However, the country in the Country field is Vietnam. Let’s add our address to Australia and try to apply the coupon:

apply the coupon code

code apply successfully

Now, if we check the cart total, the free shipping fee is $0:

free shipping applied

Conclusion

As you can see, setting up free shipping coupon in WooCommerce is quite easy. However, if you have multiple zones, you may need to do some repetitive work. There is a workaround though. That is to create a shipping zone that cover all shipping zones then create a free shipping method for that zone.