Hosting WordPress Webempresa

Cómo actualizar automáticamente el monto del carrito al cambiar las cantidades en WooCommerce

por | Sep 6, 2022 | WooCommerce

Cómo actualizar automáticamente el monto del carrito al cambiar las cantidades en WooCommerce

Entre la comunidad nos encontramos con la dicotomía sobre si el tener que pulsar un botón para actualizar el importe del carrito de la compra en WooCommerce una vez que cambiamos una cantidad o agregamos un nuevo producto, resulta ser un bug de usabilidad, un error por parte de WooCommerce que no mejora la experiencia de usuario.

Lamentablemente, WooCommerce de manera predefinida no incluye alguna función que le permita actualizarse, instantáneamente, para que las cantidades del carrito de compras se actualicen, al momento de hacer cualquier cambio en cantidades del carrito de compras, para que este se actualice se debe hacer clic en un botón para que se visualice ahora si nuestro cambio a los precios. Pero estamos trabajando con WordPress y esto nos permite de forma mas fácil el trabajar con un método para solucionar esta disyuntiva.

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


Uno de los más sencillos métodos para que nuestrocarrito de WooCommerce logre actualizarse de forma automática mientras vamos cambiando cantidades de los productos o eliminando los mismos, es a través de un script personalizado, entonces, lo que haremos es aplicarlo en nuestro WordPress para que actúe directamente en el carrito, como no podemos modificar cada uno de los carritos, la forma más fácil es aplicarlo en el pie de página del sitio para que este sea cargado en cualquier momento.

Esto es muy sencillo, simplemente copiamos el código y lo pegamos en el archivo functions.php del tema principal o el tema hijo, este está ubicado en:

Cpanel > administrador de archivos > Public_html > Dominio > wp-content > themes > tema utilizado o tema hijo > archivo functions.php

Una vez que guardemos los cambios tendremos el efecto deseado.

/* actualizar carrito al cambiar cantidades */
add_action( 'wp_footer', 'we_update_cart_when_changing_quantities' );
function we_update_cart_when_changing_quantities() {
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;
}

En ocasiones algunos temas, una vez que se agrega esta mejora manual, no eliminan el botón para actualizar el carrito. Cosa que es normal, ya que no están pensados para trabajar sin este botón, para solventar esto vamos a agregar un css para WordPress que podemos aplicar a nuestro css adicional, y de esta forma poder borrar este texto que indica actualizar carrito, puesto que no lo vamos a necesitar.

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


Si no nos gusta agregar códigos a nuestro sitio y nos sentimos más cómodos agregando un complemento en lugar de lidiar con algún problema vinculado a una mala escritura del mismo, existen plugins que podemos utilizar para realizar esta mejora sin la necesidad de agregarlo por medio de algún código.

WooCommerce Ajax Cart Plugin

Este complemento resulta ser bastante sencillo y cumple con lo que necesitamos, algunos ajustes es mejor irlos modificando a medida que vemos nuestro sitio por qué estos pueden variar su configuración dependiendo del temas de WooCommerce que tengamos instalado, lo mejor es que revisemos la configuración y desactivamos las personalizaciones.

ajustes generales de divi

  Ocultar botón de actualizar carrito con css


Una vez realizado el ajuste tanto por el código personalizado o con el plugin, nos encontramos en la necesidad de eliminar el botón de “Actualizar carrito”, ya que no tiene sentido que nos ocupe espacio si el carrito va a actualizarse de forma automatica.

Asi que, si lo que necesitamos es ocultar el botón “Actualizar carrito”, simplemente agregamos estas líneas CSS en Apariencia > Personalizar > CSS adicional:

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

  Conclusión sobre actualizar carrito en WooCommerce


Como podemos ver tenemos herramientas varias para poder lograr lo que en un principio no nos permite el WooCommerce de forma predeterminada, tanto con un código personalizado como con un complemento, tenemos la opción de cambiar un ajuste fundamental del WooCommerce, como lo es el de actualizar nuestro monto final sin tener que hacer clic al botón de actualizar al final de nuestro carrito, sino que, por el contrario, este se actualice de forma automática.

¿Te ha resultado útil este artículo?

Hosting WPFácil