En este artículo, aprenderás cómo eliminar el botón "Actualizar Carrito" en WooCommerce y hacer que el carrito se actualice automáticamente cuando un usuario cambie la cantidad de productos. Este método mejora la experiencia del usuario y reduce la necesidad de interacciones adicionales.
¿Por qué eliminar el botón de actualización manual?
Eliminar el botón "Actualizar Carrito" permite que la actualización ocurra en tiempo real. Con la ayuda de unos simples ajustes en CSS y JavaScript, se puede optimizar el proceso, reduciendo las peticiones AJAX innecesarias. A continuación, se explica cómo lograrlo en unos pocos pasos.
Ocultar el Botón "Actualizar Carrito"
Para comenzar, no es necesario eliminar el botón físicamente del código HTML. En su lugar, simplemente se oculta con un fragmento de código CSS. Esto es fundamental ya que el botón está vinculado a la función de actualización del carrito.
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
display: none;
}Este código oculta el botón manteniendo su funcionalidad.
Agregar Actualización Automática con jQuery
El siguiente paso es utilizar jQuery para ejecutar la acción de actualización del carrito cada vez que se modifique la cantidad de productos. Este es el fragmento de código básico:
jQuery( function( $ ) {
$('.woocommerce').on('change', 'input.qty', function(){
$("[name='update_cart']").trigger("click");
});
});Este código dispara el evento click en el botón de actualización cuando el valor de la cantidad cambia.
Optimización de Solicitudes AJAX
Para evitar enviar múltiples solicitudes AJAX seguidas, podemos mejorar el código con un temporizador que retrase la actualización del carrito:
jQuery( function( $ ) {
let timeout;
$('.woocommerce').on( 'change', 'input.qty', function(){
if ( timeout !== undefined ) {
clearTimeout( timeout );
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click");
}, 1000 ); // 1 segundo de retraso
});
});Este código agrega un retraso de un segundo antes de enviar la solicitud, lo que optimiza el rendimiento del sitio, reduciendo la carga del servidor.
¿Dónde Colocar Este Código?
Para implementar este código, lo mejor es insertarlo en los archivos de CSS y JavaScript de tu tema hijo. Si no tienes acceso a estos archivos, puedes agregar el código utilizando los hooks wp_head y wp_footer:
add_action( 'wp_head', function() {
?><style>
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
display: none;
}</style><?php
});
add_action( 'wp_footer', function() {
?><script>
jQuery( function( $ ) {
let timeout;
$('.woocommerce').on('change', 'input.qty', function(){
if ( timeout !== undefined ) {
clearTimeout( timeout );
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click");
}, 1000 );
});
} );
</script><?php
});
Este código añade el CSS en el <head> del sitio y el JavaScript al pie de página.
Conclusión
Actualizar el carrito de WooCommerce automáticamente cuando se cambia la cantidad de productos es una mejora significativa para la experiencia del usuario.
FAQs
Sí, puedes aplicar un enfoque similar al minicart utilizando los hooks y selectores correctos que se adapten a ese componente.
Hacer demasiadas solicitudes AJAX puede impactar el rendimiento del servidor. Por eso es recomendable optimizar el código con temporizadores o condicionar las actualizaciones para reducir la carga del servidor.
Sí, este código debería funcionar en cualquier tema que siga las prácticas estándar de WooCommerce. Asegúrate de probarlo en un entorno de desarrollo antes de implementarlo en un sitio en producción.