Icona del carrello in WooCommerce

Shortcode per la stampa dell’icona

Ecco un modo per aggiungere l’icona del carrello WooCommerce a un menu di WordPress.

L’icona visualizza il conteggio degli articoli del carrello, si collega con un link alla pagina del carrello e visualizza il numero di articoli che sono stati aggiunti al carrello.

Crea uno shortcode per il carrello WooCommerce, questo può essere aggiunto a un menu o semplicemente aggiunto in qualsiasi punto dei modelli del tema o agganciato alle azioni nel tema.

<?php  // <~ don't add me in

/**
 * 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
  
        ?>
        <li><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></li>
        <?php
	        
    return ob_get_clean();
 
}
add_shortcode ('woo_cart_but', 'woo_cart_but' );

Il codice precedente produce lo shortcode seguente che si può includere in qualunque punto sia inseribile uno shortcode

[woo_cart_but]

Filtro per abilitare la conta del carrello tramite ajax

Aggiungi un filtro per aggiornare il conteggio del carrello quando cambia utilizzando i frammenti Ajax.

<?php  // <~ don't add me in

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

Aggiungere l’icona del carrello per un menu esistente

Aggiungi l’icona del carrello a un menu esistente.

Il terzo frammento di codice lo aggiunge a un menu utilizzando una variante del filtro wp_nav_menu_items, la variante permette di specificare lo slug di un menu esistente nel filtro, ad esempio il menu ha un id di ‘top-menu’, quindi il nome del filtro può essere scritto come wp_nav_menu_top-menu_items.

Se il tuo menu avesse l’ID di primary-menu, il nome del filtro verrebbe scritto come wp_nav_menu_primary-menu_items.

<?php  // <~ don't add me in

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

Stampa dell’icona

Si può anche stampare l’icona non in un menù ma dove si preferisce.

<?php echo do_shortcode("[woo_cart_but]"); ?>

CSS per la grafica

Esempio di CSS per aggiungere l’icona

/* # icona carrello WooCommerce CSS con FontAwesome 5
---------------------------------------------------- */

.cart-contents {
    position: relative;
    display: flex !important;
    flex-flow: column nowrap;
    justify-content: center;
}

.cart-contents:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;	
    content: "\f290" !important;
    font-size: 30px;
    color: #FF1493;
}

.cart-contents:hover {
    text-decoration: none;
}

.cart-contents-count {
    position: absolute;
    top: 15px;
    right: 1px;
    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: #000;
    border-radius: 50%;
    padding: 1px;  
}

Quest’articolo prende spunto da:

Sarebbe meglio dire che è la traduzione di … , ma tant’è.