En WooCommerce, los usuarios deben pulsar manualmente el botón «Actualizar carrito» cada vez que modifican la cantidad de un producto. Este snippet detecta el cambio en los inputs de cantidad y lanza la actualización de forma automática tras una breve pausa de 500 ms, mejorando la experiencia de compra sin saturar el servidor con peticiones simultáneas.
Puedes utilizar este sencillo snippet en php desde el archivo functions.php.
Importante: no modifiques directamente el archivo functions.php del tema que tengas instalado. Genera un tema hijo con alguno de los plugins del repositorio de WordPress y actívalo. Cuando lo tengas, entra en el functions.php del tema hijo. Una alternativa es instalar algún plugin que permite incrustar código sin problema de pérdida en la actualización del tema.
/**
* Actualizar el carrito de WooCommerce automáticamente al cambiar la cantidad de productos
*/
add_action( 'wp_enqueue_scripts', 'lc_auto_update_cart_qty' );
function lc_auto_update_cart_qty() {
if ( ! is_cart() ) {
return;
}
$js_code = "
jQuery(function($){
var timeout;
$('.woocommerce').on('change', 'input.qty', function(){
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function(){
$('[name=\"update_cart\"]').trigger('click');
}, 500);
});
});
";
wp_add_inline_script( 'woocommerce', $js_code );
}
Técnica Debounce de 500ms: Al pausar el disparo medio segundo desde la última pulsación, evita que se envíe una petición por cada clic rápido del usuario en las flechas de cantidad.
Inyección segura (wp_add_inline_script): Inyecta el script directamente en la cola oficial de WooCommerce sin romper bloques en Gutenberg ni requerir archivos .js adicionales.
Carga condicional: Se ejecuta de forma estricta mediante is_cart(), garantizando cero impacto en el rendimiento en el resto de páginas de la web.