Añadir icono de minicarrito Woocommerce que se actualice tras añadir al carrito con Ajax

Si estás desarrollando o editando una plantilla de WordPress y quieres integrarla con Woocommerce es casi seguro que necesites un enlace al carrito. Tal que así:

Y ya que estamos, que ponga el número de productos que contiene el carrito para que el usuario sea consciente en todo momento del estado de su carro.

Así. Perfecto.

Pero… ¿y si añadimos un producto al carrito mediante Ajax?, ¿cómo podemos hacer que se actualice el contador? Correcto. Necesitas un hook. Aquí el código:

Lo primero que necesitarás es, obviamente, el icono del carrito en el header, por ejemplo.

<div class="navbar-carro">
 <div class="cont-minicarro">
 <span id="items-minicarro"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
 </div>
 <?php if( is_cart() && WC()->cart->cart_contents_count == 0){ $url_carro = get_permalink(wc_get_page_id('shop')); }else{ $url_carro = get_permalink(wc_get_page_id('cart')); } ?>
 <a href="<?php echo $url_carro; ?>" title="">
 <span class="dashicons dashicons-cart"></span>
 </a>
</div>

En este caso, mostramos el icono del carrito utilizando Dashicons que, previamente, he activado para el frontend (por defecto, sólo se actualizan en el admin de WordPress).

<span class="dashicons dashicons-cart"></span>

Ahora lo que haremos es utilizar un hook llamado ‘woocommerce_add_to_cart_ fragments’. Estos fragmentos (fragments) son código HTML que Woocommerce añade a la página tras añadir al carrito.

add_filter( 'woocommerce_add_to_cart_fragments', 'actualizar_minicarro_ajax', 10, 1 );
function actualizar_minicarro_ajax( $fragments ) {

    $fragments['div.cont-minicarro'] = '<div class="cont-minicarro"><span id="items-minicarro">' . WC()->cart->get_cart_contents_count() . '</span></div>';

    return $fragments;

}

Aquí, Woocommerce se encargará de buscar en la página el elemento div con clase ‘cont-minicarro’ y lo actualiza con la nueva cantidad de productos del carrito. Tal que así:

Espero que te ayude.