Change Quantity on Checkout for WooCommerce: Two Methods Compared

Any point of friction in the shopping process can cause customers to abandon their carts. Even something as simple as needing to change product quantities during checkout can turn into a deal-breaker – especially when someone realizes they’re accidentally about to order enough rubber ducks to fill an Olympic-sized pool.

Sure, customers can hop back to the cart page to edit quantities, but many won’t bother with the extra step. If shoppers have to think about fixing something later, there’s a pretty good chance they won’t return. 

But here’s the bright side: quantity controls at checkout can prevent cart abandonment and they’re also perfect for encouraging last-minute order increases. In this article, we’ll compare two methods to add quantity controls to your WooCommerce checkout: using a plugin and implementing custom code. 

Key Points:

• Quantity controls at checkout prevent cart abandonment by eliminating the need to return to the cart page.
• You can implement this feature using either the beginner-friendly CheckoutWC plugin or custom code for developer-level control.
• With two-thirds of customers expecting checkout in under four minutes, this feature helps capture sales by maintaining checkout momentum. 

Why would you want to enable quantity changes in the WooCommerce checkout?

Quantity controls at checkout help you capture more sales in several ways. When customers modify their orders, they often discover shipping thresholds, volume discounts, and other incentives that encourage larger purchases.

“What Amazon proved with 1-click ordering, and what every major retailer has since confirmed, is that forward momentum in the checkout process is critical. Two-thirds of consumers expect to complete checkout in under four minutes, so any interruption risks losing the sale. When customers can refine their orders without leaving the checkout page, we’re protecting that momentum while giving them the control they need.”

– Ian Misner, General Manager at Kestrel

This functionality serves every type of customer. Wholesale buyers can fine-tune bulk orders based on final pricing and budget. Regular shoppers might increase quantities to reach free shipping thresholds, while others can modify product variations like sizes or colors on the spot.

The ability to make quick adjustments also encourages spontaneous purchases when customers review their order summary. This streamlined approach matches the shopping experience on leading ecommerce platforms.

Ready to add this functionality to your store? Let’s explore two methods to implement it.

Method 1: Enable simple cart editing in checkout with CheckoutWC

CheckoutWC is an essential optimization tool for WooCommerce stores. It offers many features to improve checkout, including checkout templates, order bumps, trust badges, one-page checkout, side carts, and much more. One of its best features is that it lets customers edit their cart right on the checkout page instead of having to go back to the cart page.

Here’s how to set up cart editing using CheckoutWC: 

1. Navigate to WP Admin > CheckoutWC > Pages > Cart Summary.

2. Configure these settings based on your store’s requirements:
   
   1. Enable cart editing at checkout: This setting allows customers to remove or adjust the quantity of cart items at checkout.

2. Allow variation changes: This option displays an edit link under cart items that allows customers to change which variation is selected.

3. Show item remove button: Adds a button for removing products from the order.

4. Cart editing empty cart redirect: Determines where customers are directed if they empty their cart. If it’s left blank, customers will be redirected to the cart page.

5. Enable mobile cart summary: Optimizes the cart editing experience for mobile devices. 

After setting these up, customers will see simple plus and minus buttons next to each product in their order summary. 

When someone clicks these buttons, the quantities update instantly without needing to reload the page. This works really well because the controls blend effortlessly into any CheckoutWC template you choose, maintaining a clean and professional look. Changes also update instantly, and the experience works just as smoothly on mobile devices as it does on desktop.

Method 2: Using custom code

For developers who want complete control over the checkout experience, modifying quantity controls through custom code is an option. While this approach lets you customize checkout flow logic and add custom validation rules or integrate with external systems, it comes with challenges. The implementation is complex, requires ongoing maintenance with WooCommerce updates, and needs expertise with WooCommerce hooks.

Here’s the code you’ll need to implement custom quantity controls at checkout:

// Remove default quantity display
add_filter('woocommerce_checkout_cart_item_quantity', '__return_empty_string');

// Add quantity input fields
add_filter('woocommerce_cart_item_subtotal', 'custom_checkout_item_quantity_input', 9999, 3);
function custom_checkout_item_quantity_input($product_quantity, $cart_item, $cart_item_key) {
    if (is_checkout()) {
        $product = $cart_item['data'];
        $product_id = $cart_item['product_id'];
        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 .= '<input type="hidden" name="product_key_' . $product_id . '" value="' . $cart_item_key . '">';
        }
    }
    return $product_quantity;
}

// Update totals when quantity changes
add_action('woocommerce_checkout_update_order_review', 'update_item_quantity_checkout');
function update_item_quantity_checkout($post_data) {
    parse_str($post_data, $post_data_array);
    $updated_qty = false;
    foreach ($post_data_array as $key => $value) {
        if (strpos($key, 'shipping_method_qty_') === 0) {
            $id = substr($key, strlen('shipping_method_qty_'));
            WC()->cart->set_quantity($post_data_array['product_key_' . $id], $value, false);
            $updated_qty = true;
        }
    }
    if ($updated_qty) {
        WC()->cart->calculate_totals();
    }
}

This code works in three main parts: it removes the default quantity display, adds custom quantity input fields, and handles quantity updates with total recalculation. You can add this code to your theme’s functions.php file or by using a plugin like Code Snippets, which provides a safe way to store and manage custom code snippets without modifying your theme files.

If you need more advanced cart editing features beyond what CheckoutWC offers natively, you can work with a developer to customize the plugin to meet your specific requirements.

Streamline your checkout process with CheckoutWC

Adding quantity selectors to your checkout page is a great way to improve the shopping experience and reduce cart abandonment. 

While we’ve explored both plugin and custom code approaches, using a plugin like CheckoutWC is the safer, easier, and extremely flexible choice. If you need advanced customizations later, you can always work with a developer to extend our plugin’s functionality.

CheckoutWC doesn’t just handle quantity controls – it’s packed with features to optimize your conversion rates. Here’s what Michael Savage from Lynx Defense had to say about their experience:

“By far the most important plugin we have for our site. The constant development, fast support, and great community make this plugin 5 stars. The streamlined checkout has helped our conversion rates by at least 30%. Thanks so much for the continued work on this plugin.”

Ready to improve your checkout experience? Get started with CheckoutWC today! 

Previous Article

Order Bumps Rules Engine: Introducing 10.0 Beta 1