Per aggiungere l’icona carrello WooCommerce all’header, qualora il tuo tema ne fosse sprovvisto, segui questi 3 semplici step.
Prima di tutto assicurati che il plugin WooCommerce sia attivo, altrimenti l’icona non comparirà sul frontend del sito.
Procediamo:

  1. Aggiungiamo il seguente codice html al file header.php, nel punto in cui vogliamo che appaia la nostra 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 } ?>
  2. Adesso aggiungiamo il codice 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' );
    



  3. Infine aggiungiamo lo stile
    .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}

Buon lavoro 😉
Se ti è stato utile lascia il tuo commento.