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.

 

 

 

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

How To Set Up WooCommerce Free Shipping Coupons

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 WooCommerce free shipping coupon

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. In case your store requires more complex shipping, I would recommend you use table shipping plugin. You can setup very complex shipping rule with this tool. Checkout my table rate shipping tutorial here to get started.

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

How To Disable Magnifying Glass Effects On WooCommerce Products’ Images Without Using Plugin

If you go to any stores, you can find that if you hover the product’s images, there is a magnifier appears to help you view the products better (the product image is zoomed in so you can see a specific area better). WooCommerce supports this feature too. However, I personally don’t like the default effects of WooCommerce: Original image: woocommerce original image Product image on hover: woocommerce with magnifier when hover So, if you are like me, you may wonder: how can I disabled product zoom feature in woocommerce?

How To Disable Magnifying Glass Effects On WooCommerce

Disabling the zoom effect in WooCommerce is quite simple. However, you need to do something first.

First thing first, create a child theme if you haven’t got one

If this is the first time you’ve heard of WooCommerce child theme, let me introduce it quickly. A child theme is an extension of your current theme that lets you add additional functionalities to your site without changing your current theme’s code. Why is it beneficial and how to create one? Check out my post on creating child theme here. Now, I assume that you have created and activated the child theme. However, if you are in a rush, you can proceed without one. All you need to do is to go to Appearance -> Editor and put the following code at the bottom of your functions.php file
add_action( 'after_setup_theme', 'bc_remove_magnifier', 100 );

function bc_remove_magnifier() {
remove_theme_support( 'wc-product-gallery-zoom' );
}
If you view the product image now and hover over the image, the effects are now removed.

Conclusion

As you can see, if you don’t like the default behavior that WooCommerce gives to products image on being hovered, removing it is quite simple. This tip is also useful if you are making a custom plugin to add a better magnifying effect to the products’ images.

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

How To Setup Buy 3 Get 1 Free In WooCommerce

You are a store owner and you want to run a promotional campaign that gives your customer one product for free for every 3 (or any other number) items they buy in a single order. Obviously, WooCommerce doesn’t support this kind of setup by default. Luckily for us, there is a plugin that does this job really well. That’s a plugin called Woo Discount Rules Pro. Obviously, there are more discount rules you can setup using this plugin but we only focus on the buy x get y items for free in this post.

How to setup buy 3 get 1 for free using Woo Discount Rules Pro

Now, I suppose that you have the plugin installed and activated. Let’s go to WooCommerce->Woo Discount Rules: accessing woo discount rules You will see an interface like this: woo discount rules pro interface Our next step is to create a rule since we don’t have any rule here. Let’s enter the details as above. Since we don’t have any rules yet, the priority box can be set to any valid number (positive). The validity field is where you can set at which period that this rule is effective. It’s all up to you to set this period. Now, let’s click next to the next screen. create rules second screen All fields in this screen are quite explanatory. It allows you to further customize the rule. For example, you can set this rule to be applied to customers who previously purchased from you (subtotal or number of items). You can also set the minimal subtotal of the current order to active the rule… For now, we are going to apply the rule to all products (though you can add some products to the exception list if you want to). Let’s click next to get to the last screen: add the discount range Let’s click on Add new range: setup buy 3 get 1 free rule Now, you can see that I’ve setup the rule to buy 3 (min quantity) so the customer can get one item of the same product for free. You are not limit to the item of the same product, in fact, you can have a bunch of options as demonstrated below: You can see that, there are many options that you can customize to match your exact needs. Now, I click on Save rule (located at the top).

See the buy 3 get 1 for free rule in action

Now, I’m going to buy 3 item of a single product. Let’s see the rule in action: buy 3 get 1 free coupon woocommerce As you can see, the rule displayed on the product page and when you view the cart, the subtotal is counted for only two products.

Conclusion

Woo Discount Rules Pro is not a free plugin but it add much more flexibility to your shop. It can also help you create loyal customer program (that rewards customers who previously bought products on the shop). If you are running a store, this is one discount rule plugin that you should have. Thanks for reading the post. Make sure you check other WooCommerce Tips to help you build better eCommerce sites.

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

How To Hide “Have a coupon? Click here to enter your code” On WooCommerce Checkout page

Coupon is a great way to make your customers happy. It is recommended that you use coupons when applicable. From my experience, having a coupon, even with a small discount can make the buying experience more pleasant. However, there are some stores, websites don’t use coupon. Take a consultant for example, she provides service at fix price per hour and normally, don’t offer discount. If she uses WooCommerce, on her checkout page, her customers see the message: “Have a coupon? Click here to enter your code” anyway. So, how can she remove that message? have-coupon-message-on-checkout-page How To Hide “Have a coupon? Click here to enter your code” on your checkout page Some people may suggest you use CSS to hide the div that contains the message. While this method does the job, I would not recommend it. The reason is using CSS only hides the message, not remove it completely. In addition, WooCommerce has an option to disable that message, why don’t we use that? So, to disable the message, you can go to WooCommerce->General and scroll down to the Enable Coupon section. You’ll see there is a checkbox there to let you enable and disable the use of coupons: disable the use of coupons As you can guess now, if you want to hide the message “Have a coupon? Click here to enter your code”, you should uncheck the checkbox “Enable the use of coupon codes”. Next, scroll to the bottom and click on Save changes and you are done. Conclusion So, using coupons can be very effective for stores. However, you may not find it is applicable for your product. If you want to disable the use coupon on the checkout page, WooCommerce supports that by default and you can enable and disable it in WooCommerce settings.

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content