How to modify & update 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:

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.

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.

Providing customizable products to your customers?

Product input fields for WooCommerce plugin offer 19 different field types for your product page so that you can get clear product customization info from your customers.

Each field has its own unique feature, values, restrictions, and customization options to give you the flexibility in getting clear information from the users. You can choose where to place the custom fields on the page and how to style them, and you can also set additional charges for your custom input field values.

Learn More

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 WooCommerce.

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

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.