Modificar las cantidades de productos directamente en el checkout de WooCommerce

Cuando un cliente llega al checkout de tu tienda online, lo más habitual es que ya haya revisado su carrito y esté listo para pagar. Pero, ¿qué pasa si quiere ajustar la cantidad de algún producto en el último momento? En WooCommerce, por defecto, no es posible modificar las cantidades desde la página de pago. Esto puede ser una barrera para la conversión, especialmente si el proceso de compra no es todo lo flexible que el cliente espera.

Por suerte, puedes solucionar esto fácilmente añadiendo una funcionalidad que permita cambiar las cantidades directamente en el checkout clásico de WooCommerce, sin necesidad de plugins y con un poco de código.

¿Cuándo es recomendable implementar esta funcionalidad?

Este ajuste es especialmente útil en tiendas que:

• Venden productos en múltiples unidades (packs, alimentos, consumibles, etc.).
• Tienen una base de clientes recurrentes que saben exactamente lo que quieren y quieren agilizar el proceso.
• Quieren mejorar la experiencia de compra en dispositivos móviles, evitando pasos innecesarios.
• Rediriges al cliente directamente al checkout al añadir un producto al carrito. Ocurre normalente en tiendas con pocos productos o páginas de aterrizaje(landings).

Ventajas de permitir modificar cantidades en el checkout

• Más comodidad para el cliente: evita que tenga que retroceder al carrito para hacer cambios.
• Mayor tasa de conversión: menos fricción en el proceso de compra significa más pedidos completados.
• Mejora la percepción de control sobre la compra.
• Evita abandonos por errores de cantidad.

Añadir la funcionalidad

Como siempre debes añadir este código al functions.php de tu child theme o bien a tu plugin de funcionalidades como explico aquí.

// Mostrar campos de cantidad en el checkout
add_filter('woocommerce_checkout_cart_item_quantity', 'custom_quantity_field_on_checkout', 10, 3);
function custom_quantity_field_on_checkout($quantity_html, $cart_item, $cart_item_key) {
    if (is_checkout() && !is_wc_endpoint_url()) {
        $product = $cart_item['data'];

        // Crear el campo input para modificar cantidad
        return woocommerce_quantity_input(array(
            'input_name'  => "checkout_qty[{$cart_item_key}]",
            'input_value' => $cart_item['quantity'],
            'max_value'   => $product->get_max_purchase_quantity(),
            'min_value'   => 0,
            'product_name' => $product->get_name(),
        ), $product, true);
    }

    return $quantity_html;
}

// Actualizar cantidades cuando el usuario las cambie
add_action('woocommerce_checkout_update_order_review', 'custom_update_cart_quantities_from_checkout');
function custom_update_cart_quantities_from_checkout($post_data) {
    parse_str($post_data, $parsed);
    
    if (!empty($parsed['checkout_qty'])) {
        foreach ($parsed['checkout_qty'] as $cart_item_key => $qty) {
            WC()->cart->set_quantity($cart_item_key, wc_stock_amount($qty), true);
        }
    }
}

// Detectar cambios de cantidad y actualizar el resumen del pedido automáticamente
add_action('wp_footer', function () {
    if (is_checkout() && !is_wc_endpoint_url()) {
        ?>
        <script>
        (function($) {
            // Cuando cambia un campo de cantidad en checkout
            $('form.checkout').on('change', 'input.qty', function() {
                // Llama a la actualización del resumen del pedido (totales, envío, etc.)
                $('body').trigger('update_checkout');
            });
        })(jQuery);
        </script>
        <?php
    }
});

Obteniendo este resultado: