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!
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://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();
}