Añadir el carrito de WooCommerce en el menú de tu plantilla con recuento de item – Vertegrande

Añadir el carrito de WooCommerce en el menú de tu plantilla con recuento de item

Si te encuentras con que tu plantilla no lo incluye, vamos a ver qué alternativas tienes para añadir el carrito a tu menú.


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;
}