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

Contanos tu Proyecto. Esto puede ser el principio de una gran aventura. Hablemos

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ú.

Publicado el 19 octubre, 2021

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