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:

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">×</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 .= ' <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; } } }else{ /* * 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() . ' '; } 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 ); WC()->cart->calculate_totals(); woocommerce_cart_totals(); } wp_die(); }
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() }; jQuery.post( add_quantity.ajax_url, data, function( response ) { $( 'body' ).trigger( 'update_checkout' ); }); }); });
Or Download add_quantity.js and place it in themes/yourtheme/js/ folder.
Related Articles
If you enjoyed reading this, then please explore our other articles below:
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.
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.
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;
}
}
“`
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?
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
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.
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!
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)
Hi! Good guide. Im wondering if you can explain the same process for change quantity item from the shop page
Hi, thanks for the comment! I’ve posted a new article Change Quantity on WooCommerce Shop Page, which can be found here: https://www.webroomtech.com/woocommerce-change-quantity-on-shop-page/