Come aggiungere icona carrello WooCommerce all'header tema

Se il tuo tema WordPress non include l’icona del carrello WooCommerce nell’header, non preoccuparti: aggiungerla è semplice! Ti basta seguire questi 3 passaggi.

Prima di tutto, assicurati che il plugin WooCommerce sia attivo. Senza WooCommerce, l’icona non apparirà sul frontend del sito.

1. Inseriamo l’HTML nell’header

Apri il file header.php del tuo tema e aggiungi il seguente codice nel punto in cui vuoi far comparire l’icona:

<?php if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {

    $count = WC()->cart->cart_contents_count;
    ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'Vai al carrello' ); ?>"><?php if ( $count > 0 ) echo '(' . $count . ')'; ?></a>

<?php } ?>

Questo codice controlla se WooCommerce è attivo e mostra il numero di prodotti presenti nel carrello, se ce ne sono. 

2. Aggiorniamo il carrello in tempo reale

Per fare in modo che il contatore si aggiorni automaticamente quando un prodotto viene aggiunto al carrello senza ricaricare la pagina, aggiungi questo snippet al file functions.php:

/**
 * Ensure cart contents update when products are added to the cart via AJAX
 */
function my_header_add_to_cart_fragment( $fragments ) {

    ob_start();
    $count = WC()->cart->cart_contents_count;
    ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'Vedi il carrello' ); ?>"><?php if ( $count > 0 ) echo '(' . $count . ')'; ?></a><?php

    $fragments['a.cart-contents'] = ob_get_clean();

    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'my_header_add_to_cart_fragment' );

Così ogni volta che un prodotto viene aggiunto, il numero di articoli nel carrello si aggiornerà automaticamente.

3. Aggiungiamo un pò di stile. 

Personalizziamo l’aspetto dell’icona con questo CSS (puoi inserirlo nel file style.css del tema o tramite Aspetto > Personalizza > CSS aggiuntivo):

.cart-contents:before{
    font-family:WooCommerce;
    content: "\e01d";
    font-size:28px;
    margin-top:10px;
    font-style:normal;
    font-weight:400;
    padding-right:5px;
    vertical-align: bottom;
}
.cart-contents:hover {text-decoration: none}

E il gioco è fatto! Ora il tuo header mostra l’icona del carrello con il numero di prodotti, sempre aggiornata in tempo reale.

Buon lavoro 😉

Se questo articolo ti è stato utile, lascia un commento e fammi sapere come è andata!