Adding the ability to change the quantity of the products in the cart or delete a product right on the WooCommerce Checkout page can reduce the hustle of the customers, avoiding leaving the Checkout and goind to Cart and back to Checkout. The Checkout page is crucial and the fewer the bounces, the better the conversion rate and completed orders. See what we’ll do:

More: Another big improvement which you can consider is to allow the users to change the quantity of the product on the shop page before adding to cart.

Here is how to add change quantity and delete product buttons on WooCommerce Checkout

To achieve this, we’re going to use 5 functions, all of which you should paste in your child theme’s functions.php file.

Remove product quantity count

Some themes have product count number on the checkout page like this:

WooCommerce Checkout page product count.

The selected quantity displayed on the Your order table is also modifiable using the WooCommerce filter woocommerce_checkout_cart_item_quantity. We don’t want this, so lets remove it:

* It will remove the selected quantity count from checkout page table.
function webroom_remove_quantity_count( $cart_item, $cart_item_key ) {
   $product_quantity= '';
   return $product_quantity;

add_filter ('woocommerce_checkout_cart_item_quantity', 'webroom_remove_quantity_count', 10, 2 );

Add Delete button and Quanitity field on the WooCommerce checkout page

To achieve this, we’ll use WooCommerce filter which allows us to modify the Product name row of each cart item: woocommerce_cart_item_name.

 * It will add Delete button, Quanitity field on the checkout page Your Order Table.
function webroom_add_delete_and_quantity_on_checkout( $product_title, $cart_item, $cart_item_key ) {

/* Checkout page check */
if (  is_checkout() ) {
    /* Get Cart of the user */
    $cart     = WC()->cart->get_cart();
        foreach ( $cart as $cart_key => $cart_value ){
           if ( $cart_key == $cart_item_key ){
                $product_id = $cart_item['product_id'];
                $_product   = $cart_item['data'] ;
                /* Step 1 : Add delete icon */
                $return_value = sprintf(
                  '<a href="%s" class="remove" title="%s" data-product_id="%s" data-product_sku="%s">&times;</a>',
                  esc_url( wc_get_cart_remove_url( $cart_key ) ),
                  __( 'Delete', 'woocommerce' ),
                  esc_attr( $product_id ),
                  esc_attr( $_product->get_sku() )
                /* Step 2 : Add product name */
                $return_value .= '&nbsp; <span class = "product_name" >' . $product_title . '</span>' ;
                /* Step 3 : Add quantity selector */
                if ( $_product->is_sold_individually() ) {
                  $return_value .= sprintf( ' <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_key );
                } else {
                  $return_value .= woocommerce_quantity_input( array(
                      'input_name'  => "cart[{$cart_key}][qty]",
                      'input_value' => $cart_item['quantity'],
                      'max_value'   => $_product->backorders_allowed() ? '' : $_product->get_stock_quantity(),
                      'min_value'   => '1'
                      ), $_product, false );
                return $return_value;
     * It will return the product name on the cart page.
     * As the filter used on checkout and cart are same.
    $_product   = $cart_item['data'] ;
    $product_permalink = $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '';
    if ( ! $product_permalink ) {
        $return_value = $_product->get_title() . '&nbsp;';
    } else {
        $return_value = sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_title());
    return $return_value;

add_filter ('woocommerce_cart_item_name', 'webroom_add_delete_and_quantity_on_checkout' , 10, 3 );

Note: You see, we have one condition if ( is_checkout() ). 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.

Updating WooCommerce Cart via Ajax call

In order to make things dynamic and actually change the quantity and update the cart totals on the Checkout page, we’ll use Ajax call.

/* Add js at the footer */
function webroom_add_quanity_js(){
  if ( is_checkout() ) {
	wp_enqueue_script( 'checkout_script', get_stylesheet_directory_uri() . '/js/add_quantity.js', '', '', false );
    $localize_script = array(
      'ajax_url' => admin_url( 'admin-ajax.php' )
    wp_localize_script( 'checkout_script', 'add_quantity', $localize_script );
add_action( 'wp_footer', 'webroom_add_quanity_js', 10 );
function webroom_load_ajax() {
  if ( !is_user_logged_in() ){
      add_action( 'wp_ajax_nopriv_update_order_review', 'webroom_update_order_review' );
  } else{
      add_action( 'wp_ajax_update_order_review', 'webroom_update_order_review' );
add_action( 'init', 'webroom_load_ajax' );
function webroom_update_order_review() {
  $values = array();
  parse_str($_POST['post_data'], $values);
  $cart = $values['cart'];
  foreach ( $cart as $cart_key => $cart_value ){
      WC()->cart->set_quantity( $cart_key, $cart_value['qty'], false );

Note: We will enqueue “add_quantity.js” file in the footer and we will make sure that it is included when we are on the checkout page. You need to create file, named add_quantity.js to your theme/child theme.

jQuery(function( $ ) {
    $( "form.checkout" ).on( "click", "input.qty", function( e ) {
      var data = {
      action: 'update_order_review',
      security: wc_checkout_params.update_order_review_nonce,
      post_data: $( 'form.checkout' ).serialize()
    }; add_quantity.ajax_url, data, function( response )
      $( 'body' ).trigger( 'update_checkout' );

Or Download add_quantity.js and place it in themes/yourtheme/js/ folder.

Recent Articles


Leave a comment
  1. Paul July 8, 2021 at 7:42 am - Reply

    Hi, thanks for the guide, I have a quick question: i’m not seeing any javascript errors in console, but the remove button (the ‘x’) is non responsive, as if it was an image rather than a button. Inspecting it, shows the following which seems ok to me. Any suggestions?

  2. Grigor March 31, 2021 at 2:31 pm - Reply

    Everything is working properly until the last step. I uploaded the file in the .js folder in my child theme but still price doesn’t refresh when quantity is changed. Could it be that I have a different jquery version than the script’s one or some other difference that’s specific to my website?

  3. Victor December 9, 2020 at 1:36 am - Reply

    I have my checkout page at a different URL, not the regular checkout page. Could this be why this is not working? I don’t get to see the option to change the quantity of the product on the checkout page after following exactly as shown above. I have tried this over 10 times, and still got the same result, I am running the DIVI Theme. Please help.

    • webroom December 11, 2020 at 8:51 am - Reply

      Hi, this tutorial is not theme or page url specific, so it should work on any theme. Make sure you add add_quantity.js. You can check Inspect Element -> Console for any javascript/jquery errors. Also check if DIVI uses different classes than in this tutorial and change them in the code above. Also if the product is set to be sold 1 at a time, no change quantity option will be displayed.

  4. bassam radi September 24, 2020 at 1:46 pm - Reply

    Thanks for the guide it’s really helpful. I have a question regarding the quantity field. Is it possible to have it a dropdown number like 1 to 10 or 1 to 20?

    the problem with the current field is it auto update after like 2 seconds even if I am still pressing the up arrow in increase the quantity type.

    I found few codes in other websites to turn the field into a dropdown but the checkout does not update anymore. any idea how to fix this and make it update when selecting from the dropdown?

    The code below:
    * @snippet Add to Cart Quantity drop-down – WooCommerce

    function woocommerce_quantity_input( $args = array(), $product = null, $echo = true ) {

    if ( is_null( $product ) ) {
    $product = $GLOBALS[‘product’];

    $defaults = array(
    ‘input_id’ => uniqid( ‘quantity_’ ),
    ‘input_name’ => ‘quantity’,
    ‘input_value’ => ‘1’,
    ‘classes’ => apply_filters( ‘woocommerce_quantity_input_classes’, array( ‘input-text’, ‘qty’, ‘text’ ), $product ),
    ‘max_value’ => apply_filters( ‘woocommerce_quantity_input_max’, -1, $product ),
    ‘min_value’ => apply_filters( ‘woocommerce_quantity_input_min’, 0, $product ),
    ‘step’ => apply_filters( ‘woocommerce_quantity_input_step’, 1, $product ),
    ‘pattern’ => apply_filters( ‘woocommerce_quantity_input_pattern’, has_filter( ‘woocommerce_stock_amount’, ‘intval’ ) ? ‘[0-9]*’ : ” ),
    ‘inputmode’ => apply_filters( ‘woocommerce_quantity_input_inputmode’, has_filter( ‘woocommerce_stock_amount’, ‘intval’ ) ? ‘numeric’ : ” ),
    ‘product_name’ => $product ? $product->get_title() : ”,

    $args = apply_filters( ‘woocommerce_quantity_input_args’, wp_parse_args( $args, $defaults ), $product );

    // Apply sanity to min/max args – min cannot be lower than 0.
    $args[‘min_value’] = max( $args[‘min_value’], 0 );
    // Note: change 20 to whatever you like
    $args[‘max_value’] = 0 < $args['max_value'] ? $args['max_value'] : 20;

    // Max cannot be lower than min if defined.
    if ( '' !== $args['max_value'] && $args['max_value'] < $args['min_value'] ) {
    $args['max_value'] = $args['min_value'];

    $options = '';

    for ( $count = $args['min_value']; $count = 1 && $count == $args[‘input_value’] ) {
    $selected = ‘selected’;
    } else $selected = ”;

    $options .= ” . $count . ”;


    $string = ‘Qty’ . $options . ”;

    if ( $echo ) {
    echo $string;
    } else {
    return $string;


    • bassam radi September 24, 2020 at 2:13 pm - Reply

      In the “add_quantity.js” I changed the line 2 code to this

      $( “form.checkout” ).change(function( e ) {
      it is working. it gets updated but now I got into an infinite loop. The checkout order keeps refreshing. How to prevent this?

      Is the code above even correct for what I am trying to achieve?

  5. Sanjeev Kumar September 23, 2020 at 9:25 am - Reply

    Hi, I used the same code in my site, but the price not updated according to quantity. Please help me to provide if any solution there

  6. Sergei June 29, 2020 at 8:42 am - Reply

    Hello, something is wrong i guess, when i am trying to change qty in checkout page, js script is not getting activated. while pressing qty plus or minus on product price is showing same.

  7. Pieter June 8, 2020 at 7:55 pm - Reply

    Hi, Thanks for the awesome guide. I’m having trouble with the last part though. Granted I am a massive coding noob. Could you explain to me what you mean with “We will enqueue “add_quantity.js” file in the footer”. And could you perhaps show me how that is done?

    Thanks in advance!

    • webroom June 9, 2020 at 6:10 am - Reply

      Hi, Pieter! Sure, I’ll explain more -> For changing quantity and delete to work on the Checkout page, a javascript is required. So if you look at the PHP snippet under Updating WooCommerce Cart via Ajax call, line 4, we are adding (enqueuing) the add_quantity.js file to the checkout: wp_enqueue_script( 'checkout_script', get_stylesheet_directory_uri() . '/js/add_quantity.js', '', '', false );

      What you need to do:
      1. download add_quantity.js
      2. add the file in /themes/your-child-theme/js folder (if you don’t have “js” folder, just create it)

  8. johan May 24, 2020 at 11:17 pm - Reply

    Hi! Good guide. Im wondering if you can explain the same process for change quantity item from the shop page

Leave a Reply

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.