Aquí hay una forma de agregar el ícono del carrito de WooCommerce a un menú con el recuento de artículos del carrito, se vincula a la página del carrito y muestra la cantidad de artículos que se han agregado al carrito.

El código completo usa tres (3) funciones php. Este código php debe agregarse y debe agregarse a functions.php de su tema.
El código CSS debe agregarse a su CSS personalizado o en la hoja de estilo.
Paso 1.
Cree un código abreviado para el carrito de WooCommerce, esto puede agregarse a un menú o simplemente agregarse en cualquier lugar de las plantillas de su tema o engancharse con acciones en el tema.
Crear código corto
El shortcode, en este caso, sería [woo_cart_but]
//code for cart addon
add_shortcode('woo_cart_but', 'woo_cart_but');
/**
* Create Shortcode for WooCommerce Cart Menu Item
*/
function woo_cart_but()
{
ob_start();
$cart_count = WC()
->cart->cart_contents_count; // Set variable for cart item count
$cart_url = wc_get_cart_url(); // Set Cart URL
?>
<a class="menu-item cart-contents" href="<?php echo $cart_url; ?>" title="My Basket">
<?php
if ($cart_count > 0)
{
?>
<span class="cart-contents-count"><?php echo $cart_count; ?></span>
<?php
}
?>
</a>
<?php
return ob_get_clean();
}
Paso 2.
Filtrar para habilitar Ajax en el recuento de carritos
Agregue un filtro para que el recuento de carritos se actualice cuando cambie utilizando los fragmentos Ajax.
//Add a filter to get the cart count
add_filter('woocommerce_add_to_cart_fragments', 'woo_cart_but_count');
/**
* Add AJAX Shortcode when cart contents update
*/
function woo_cart_but_count($fragments)
{
ob_start();
$cart_count = WC()
->cart->cart_contents_count;
$cart_url = wc_get_cart_url();
?>
<a class="cart-contents menu-item" href="<?php echo $cart_url; ?>" title="<?php _e('View your shopping cart'); ?>">
<?php
if ($cart_count > 0)
{
?>
<span class="cart-contents-count"><?php echo $cart_count; ?></span>
<?php
}
?></a>
<?php
$fragments['a.cart-contents'] = ob_get_clean();
return $fragments;
}
Paso 3.
Agregar icono de carrito a un menú existente
Utilice una variante de wp_nav_menu_items para especificar el menú real en el filtro. Por ejemplo, si el menú tiene un ID de ‘ top-menu ‘, establezca el nombre del filtro en wp_nav_menu_top-menu_items
Si su menú tuviera el ID de menú principal, el nombre del filtro se cambiaría a wp_nav_menu_primary-menu_items, etc.
//Add Cart Icon to an existing menu
add_filter( 'wp_nav_menu_top-menu_items', 'woo_cart_but_icon', 10, 2 ); // Change menu to suit - example uses 'top-menu'
/**
* Add WooCommerce Cart Menu Item Shortcode to particular menu
*/
function woo_cart_but_icon ( $items, $args ) {
$items .= '[woo_cart_but]'; // Adding the created Icon via the shortcode already created
return $items;
}
Agregar icono de carrito por sí mismo
Si desea el ícono del carrito solo (no en un menú), puede usar el código corto o para los archivos de plantilla PHP puede usar do_shortcode
<?php echo do_shortcode("[woo_cart_but]"); ?>
Agregar CSS
Finalmente, agregue algo de CSS …
/* # WooCommerce Cart Icon ---------------------------------------------------------------------------------------------------- */
.cart-contents {
display: flex !important;
}
.cart-contents:before {
font-family: 'dashicons';
font-weight: 900;
content: "\f174" !important;
font-size: 17px;
color: #000000;
}
.cart-contents:hover {
text-decoration: none;
}
.cart-contents-count {
position: absolute;
top: 15px;
left: 5px;
transform: translateY(-105%) translateX(25%);
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 22px;
height: 22px;
width: 22px;
vertical-align: middle;
text-align: center;
color: #fff;
background: #ffaa00;
border-radius: 50%;
padding: 1px;
}
Linkedin @vertegrande
Instagram @holavertegrande