Home » WooCommerce: Change Product Quantity @ Checkout Page

WooCommerce: Change Product Quantity @ Checkout Page

by Tutor Aspire

We covered a lot of WooCommerce Checkout customization in the past – it’s evident that the Checkout is the most important page of any WooCommerce website!

Today we’ll code a nice UX add-on: how do we show product quantity inputs beside each product in the Checkout order table? This is great if people need to adjust their quantities on the checkout before completing their order; also, it’s helpful when you have no Cart page and want to send people straight to Checkout and skip yet another click.

In this post, we’ll see how to add a quantity input beside each product on the Checkout page, and then we’ll code a “listener” to make sure we actually refresh the Checkout and update totals after a quantity change. Enjoy!

You can clearly see that there is a new quantity input inside the “Order Review” section of the WooCommerce Checkout page. On change, the Checkout will refresh and update totals.

PHP Snippet: Display Product Quantity Selectors @ WooCommerce Checkout

Note: you may need to adjust alignment between product name and the new quantity input with custom CSS.

/**
 * @snippet       Item Quantity Inputs @ WooCommerce Checkout
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 6
 * @donate $9     https://www.tutoraspire.com
 */

// ----------------------------
// Add Quantity Input Beside Product Name
  
add_filter( 'woocommerce_checkout_cart_item_quantity', 'tutoraspire_checkout_item_quantity_input', 9999, 3 );
 
function tutoraspire_checkout_item_quantity_input( $product_quantity, $cart_item, $cart_item_key ) {
$product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
$product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );
if ( ! $product->is_sold_individually() ) {
$product_quantity = woocommerce_quantity_input( array(
'input_name'  => 'shipping_method_qty_' . $product_id,
'input_value' => $cart_item['quantity'],
'max_value'   => $product->get_max_purchase_quantity(),
'min_value'   => '0',
), $product, false );
$product_quantity .= '';
}
return $product_quantity;
}

// ----------------------------
// Detect Quantity Change and Recalculate Totals

add_action( 'woocommerce_checkout_update_order_review', 'tutoraspire_update_item_quantity_checkout' );

function tutoraspire_update_item_quantity_checkout( $post_data ) {
parse_str( $post_data, $post_data_array );
$updated_qty = false;
foreach ( $post_data_array as $key => $value ) {
if ( substr( $key, 0, 20 ) === 'shipping_method_qty_' ) {
$id = substr( $key, 20 );   
WC()->cart->set_quantity( $post_data_array['product_key_' . $id], $post_data_array[$key], false );
$updated_qty = true;
}
}
if ( $updated_qty ) WC()->cart->calculate_totals();
}

You may also like