Cómo actualizar automáticamente el importe del carrito al cambiar cantidades

Hay casi unanimidad en que tener que pulsar un botón para que se actualice el importe del carrito de compra en un Ecommerce al cambiar cantidades es un fallo de usabilidad, un error de experiencia de usuario.

Desafortunadamente, WooCommerce por defecto no incluye esta funcionalidad, sino que para que se actualicen los importes del carrito de compra, tras cambiar alguna cantidad en los artículos del mismo, hay que pulsar un botón para que se muestren los cambios.

Me refiero a esto…

Pero, afortunadamente, esto es WordPress, y tenemos soluciones para todo, también para esto.

Actualización automática del carrito al cambiar cantidades (con código)

Un método sencillo de que el importe del carrito se actualice automáticamente al cambiar las cantidades en los productos es mediante un poco de JavaScript, en concreto este:

<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").prop("disabled", false);
jQuery("[name='update_cart']").trigger("click"); 
});
</script>

El script actualizará los importes del carrito al cambiar alguna cantidad en los artículos del mismo.

Así que lo que haremos es integrarlo con WordPress creando un gancho de acción que lo lance en la página del carrito desde el pie de página, así:

/* Actualizar importes de carrito al cambiar cantidades */
add_action( 'wp_footer', 'ayudawp_actualizar_importe_carrito_cambio_cantidad' );
function ayudawp_actualizar_importe_carrito_cambio_cantidad() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").prop("disabled", false);
jQuery("[name='update_cart']").trigger("click"); 
});
</script>
<?php
endif;
}

Simplemente copia el código anterior y pégalo en el archivo functions.php del tema hijo activo o en un plugin de personalizaciones si ya lo tienes.

Una vez guardes los cambios tendrás el efecto deseado, este…

Si no te funciona la parte de ocultar el botón de actualizar carrito en tu tema puedes probar este otro, añadiéndolo a la sección de CSS adicional del personalizador de WordPress:

/* Ocultar boton actualizar carrito */
input[name=update_cart] {
display: none !important;
}

Actualización automática del carrito al cambiar cantidades (con plugins)

Si no te sientes cómodo añadiendo código no te preocupes, hay plugins que te ayudarán en esta mejora de usabilidad.

WooCommerce Ajax Cart

Sencillo plugin que hace su función, con algunos ajustes opcionales que, no obstante, te recomiendo que no actives, pues no quedan especialmente bien con todos los temas.

Te aconsejo pasarte por sus ajustes y desactivar las personalizaciones.

Que, como ves, no quedan bien casi en ningún tema:

Pero si las desactivas funciona perfectamente, igual que el código que hemos visto antes.

Ajax Cart AutoUpdate

Este otro plugin también funciona perfectamente, y sus ajustes se integran algo mejor con cualquier tema que el anterior.

De todos modos, igual que con el otro, te recomiendo desactivar sus personalizaciones, no aportan nada sustancial, salvo quizás…

  • Cambiar la cantidad mínima de 0 a 1, para que no se pueda vaciar un producto del carrito (me parece un error de usabilidad pero igual a alguien le parece bien)
  • No mostrar los mensajes de carrito actualizado, etc., al cambiar cantidades e importes automáticamente. Es cuestión de gustos, pero creo que no está de más que el cliente sea totalmente consciente de que han cambiado los importes.

Lo que siempre recomiendo cambiar es el retardo de actualización de los importes, por defecto algo alto (1.000 ms = 1 segundo), y que me parece más correcto dejarlo en más o menos la mitad, por ejemplo en 600 ms.

Algo que si aporta que no tenía el plugin anterior es que además de la funcionalidad, también oculta el botón de «Actualizar carrito», que ya no tiene sentido al actualizarse el carrito automáticamente.

Cómo ocultar el botón de «Actualizar carrito»

Como hemos visto con el último plugin, no tiene sentido que se muestre el botón de «Actualizar carrito» si se va a actualizar automáticamente, ya sea con el código que vimos al principio o con el primer plugin de la lista.

Así que, si quieres ocultar el botón de «Actualizar carrito» porque vas a usar el código o el primer plugin, solo tienes que añadir estas líneas de CSS en «Apariencia → Personalizar → CSS adicional»:

/* Ocultar boton actualizar carrito */
button[name='update_cart'] {
display: none !important;
}

Pega el código y publica los cambios, nada más.

Con esto quedaría el ciclo completo.

Y tú ¿también piensas que es mejor que se actualice automáticamente el importe del carrito al cambiar cantidades?

(3 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

8 comentarios en “Cómo actualizar automáticamente el importe del carrito al cambiar cantidades”

  1. Francisco Brito

    Fernando,
    Quería felicitarte por tu forma didáctica de enseñar WordPress. Haces que todo parezca sencillo. 5⭐

  2. Gracias por el artículo, el css que has puesto a mi no me funciona, lo he cambiado por este que si nos va por si a alguien le pasa lo mismo

    /* Ocultar boton actualizar carrito */
    input[name=update_cart] {
    display: none !important;
    }

  3. Me aparece el siguiente error
    Detalles del error
    ==================
    Se ha producido un error del tipo E_PARSE en la línea 119 del archivo /var/www/vhosts/plenapiel.com/httpdocs/wp-content/themes/Divi-child/functions.php. Mensaje de error: syntax error, unexpected ‘

    Corresponde a la linea add_action( ‘wp_footer’, ‘ayudawp_actualizar_importe_carrito_cambio_cantidad’ );
    a que puede ser debido

    Gracias por tu ayuda

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido