Search the site:

Home Blog How to modify the cart details on WooCommerce checkout page

How to modify the cart details on WooCommerce checkout page

Most of you would know that WooCommerce does not allow customers to update the cart from the checkout page. Which means that you cannot change the quantity or delete the product from the checkout page. Customer needs to go back to cart page, update the cart, and then go to the checkout page again. This results in customers having to fill all the required information again. This is a bit frustrating for the customers, especially for guest users (which is a large majority).

In this post, we will discuss how to update the cart on the checkout page of WooCommerce. I have developed this feature in our Fun Friday event at the office. On Fun Fridays, we try to spend an entire day doing things which aren’t related to the core work activity of the person.

First, let’s take a look at the cart details table on the WooCommerce Checkout page:

Cart details table without Quantity and Delete icon - How to modify the cart details on WooCommerce checkout page
Cart details table without Quantity and Delete icon

Here, the customer cannot edit the quantity of the product or delete it. So we want to provide the functionality of changing the quantity and delete the product without having your customer leave the Checkout page.

Let’s begin

If you want to skip this explanation, and instead want to implement the functionality on your store, then you can download the plugin which I have created.

1. Making the UI changes on cart section of checkout page

We need to modify the “Product” column in “Your order” table. We need to add the “Delete” icon and the “Quantity selector” for each item in the cart.

To achieve this, WooCommerce has given a filter which allows you to modify the Product name row of each cart item: woocommerce_cart_item_name.

The selected quantity displayed on the Your order table is also modifiable using the another WooCommerce filter: woocommerce_checkout_cart_item_quantity.

We will use both filters and allow customers to edit cart details on the checkout page. You can implement the below changes by creating a new plugin.

First, we don’t need the quantity shown for each item on the Your order table. So we will use the filter and return a blank string so it will overwrite the WooCommerce data.

Remove quantity from Cart details of Checkout page - How to modify the cart details on WooCommerce checkout page
Remove quantity from Cart details of Checkout page

After this, we will modify the Product name row using the filter woocommerce_cart_item_name & add the Quantity field & Delete icon.

 

Here we are using the is_checkout() function to make sure that we are applying the changes on checkout page only. I have split it into 3 steps as mentioned in above code snippet.

Step 1: Add delete icon
Here in this step, we will add the Delete icon for each item in the cart. This is the same icon used in the WooCommerce cart.

Here, we have used the WooCommerce function get_remove_url(). We need to pass the $cart_key for each cart item. So get_remove_url() function will return a unique URL to delete each cart item.

Step 2: Add product name
As we are modifying the product name row, we also need to add the product name in the row along with the new fields. We will get the product name from the filter itself, which is passed as the first argument. It is $product_title in our case.

Grab 40% discount on our Premium Plugins this Black Friday and skyrocket your WooCommerce store sales. Use coupon code BFCM17 to save upto $100. Sale ends on Nov 30 2017.

Step 3: Add quantity selector
Lastly, we will add the quantity selector. Here we will use the WooCommerce function woocommerce_quantity_input().

We need to give the four parameters for the function “input_name”, “input_value”, “max_value”, “min_value”.

  • input_name: It will contain the array with the name ‘cart’, in this you need to pass the cart item key & the quantity.
  • input_value: It will contain the selected quantity of the product.
  • max_value:  It will be the max stock number of the product.
  • min_value: It will be the minimum value of the quantity selector.

Once all above steps are done, it will now display the delete button and quantity selector on the Your order table of the Checkout page.

Here, we have one condition if ( is_checkout() ) { condition. It is necessary for reasons mentioned below.

The filter which we have used for modifying the product name column value (woocommerce_cart_item_name) is also called on the Cart page of your store. So to make sure that the code which we write does not break the functionality of the Cart page we have ensured that changes are only applied on the checkout page.

2. Updating the Cart via Ajax call

Adding this much won’t work, we need to make sure when a customer changes the quantity it will reflect on the cart total.

Changing Quantity

We need the Ajax call to change the cart total. So when a customer changes the quantity, we need to take an action and change the cart total.

Now, we will enqueue “add_quantity.js” file in the footer of the website and we will make sure that it is included when we are on the checkout page.

Now we need to add the function in the Javascript file, which will call the ajax for changing the cart total.

Above javascript will call the ajax in which we will pass the data of the modified checkout form. But it will call when we click on the quantity icon. So it will contain the modified value of the quantity.

Now, we need to add the function for the ajax, which will change the cart total according to the modified quantity.

When we modify the quantity on the checkout page the above function will get called and it will change the cart total. We have used the WooCommerce functions in our functions.

We have used “set_quantity()”, “calculate_totals()”, “woocommerce_cart_totals()” functions for modifying the cart total and displaying it on the Your Order table of the checkout page.

set_quantity(): This function will set the modified quantity to the cart.

We have sent the data from the javascript function which will have the modified quantity value, so we will use that modified value and set it to the cart.

calculate_totals(): Using this function we instruct that again calculate the total of the cart.

woocommerce_cart_totals(): This function is used to display the modified cart.

Once all above calculation is done it will return back to the javascript from which we had called the ajax function. In the response of that function, we will ‘trigger’ the ‘update_checkout’ function which will, in turn, modify the cart and display it to the user.

We need the CSS for the “Delete” button of the Your order table. So it should look like the WooCommerce cart delete button. So we need to add the CSS for it. You can add the CSS in the footer of your website.

Once it is added we need to give the CSS to the delete button in the CSS file. The CSS has been shown below.

So, we are ready with the functionality where we can modify the quantity on the checkout page of the WooCommerce.

After implementing the above, this is how the Your order table on the checkout page would look:

Cart details table with Quantity and Delete icon - How to modify the cart details on WooCommerce checkout page
Cart details table with Quantity and Delete icon

It will add the quantity selector and the delete icon for the each item of the Your order table of the checkout page.

I have built this as a plugin, named as Change Quantity on Checkout for WooCommerce which was released in September 2016. It is used on 400+ WooCommerce stores. If you are already using this plugin on your WooCommerce store, then I would appreciate if you can spare some time to review the plugin.

If you have any feedback, then you can let me know in the comments below or you can post on the plugin’s support forum.

Browse more in: Code Snippets, WooCommerce, WooCommerce How Tos, WooCommerce Tutorials

5
Leave a Reply

avatar
4 Comment threads
1 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
LuisvivekrajKLLBhavik KiriScience4me Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest
Notify of
Science4me
Guest

How can i add the product image to show on the checkout page?

Bhavik Kiri
Guest
Bhavik Kiri

Hi,

I apologize for the delay in the response.

Yes, you can add product image to the checkout page.

You need to add code in “add_quantity()” function. I have modified the function and shared it on the gist, you can find the modified code on below link.

https://gist.github.com/bhavik-kiri/cf90082b6f3cd9cb12690785c0978a11

When you open the above link you will find that in “Step 2″ I have added the product image. Here, I have hardcoded the product image size in variable ” $cqoc_image_size “, you can change the size according to your need.

Please let me know if you have any queries.

Thanks,
Bhavik

KLL
Guest
KLL

The plugin works well for the order review section of the checkout page, but I have a cart in the header, and it doesn’t update after changing the quantity in the order review section. Also, if I remove a product in the order review section or simply refresh the checkout page, the cart in my header has an extra remove item icon (the original remove item icon). Any thoughts?

vivekraj
Guest
vivekraj

sync product(linked product) was not updating

Luis
Guest

Hey I’m looking for something like this.
I want to have 3 or 4 radio boxes with the quantiies and when user choose one the quantity and price change.
do you think it can be ajusted to it?

from purchased

Subscribe Now