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;
            }
        }
}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() . '&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 );
      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.




Recent Articles

Blog Categories

Related Articles

If you enjoyed reading this, then please explore our other articles below:

Comments

Leave a comment
  1. 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?

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

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

  4. 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)

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