WooCommerce: mostra quanto manca alla spedizione gratuita (senza plugin)

Offrire la spedizione gratuita sopra una certa soglia di spesa è una delle strategie più efficaci per aumentare il valore medio del carrello nel tuo eCommerce. Ma c’è un problema: se il cliente non sa quanto gli manca per raggiungerla, difficilmente aggiungerà altri prodotti.

WooCommerce: mostra quanto manca alla spedizione gratuita (senza plugin)

In questo articolo vediamo come aggiungere una notifica dinamica che informa i tuoi clienti sull’importo mancante per ottenere la spedizione gratuita, visibile sia nella pagina carrello che nel checkout. Il tutto senza installare nessun plugin, con poche righe di codice PHP e CSS.

Perché evitare un plugin per questa funzione?

I plugin sono comodi, ma ogni plugin che installi:

• Aggiunge peso al tuo sito
• Può creare conflitti con altri plugin o con il tema
• Richiede aggiornamenti costanti
• Potrebbe smettere di funzionare se lo sviluppatore lo abbandona

Per una funzionalità così semplice, qualche riga di codice nel file functions.php del tuo tema child è la soluzione migliore: leggera, veloce e sempre sotto il tuo controllo.

Come funziona la notifica

Il codice mostra due messaggi diversi a seconda della situazione:

1. Se il cliente non ha ancora raggiunto la soglia: appare un messaggio che indica l’importo mancante (es. “Mancano solo 25,00€ per ottenere la spedizione gratuita!”)
2. Se il cliente ha superato la soglia: appare un messaggio di congratulazioni che conferma la spedizione gratuita

La notifica viene calcolata sugli importi comprensivi di IVA e si aggiorna automaticamente quando il cliente modifica il carrello.

Il codice PHP

Apri il file functions.php del tuo tema child (mai modificare il tema principale!) e aggiungi questo codice:

/* Mostra l'importo mancante per raggiungere la spedizione gratuita (con IVA inclusa) */

// Hook per la pagina carrello
add_action( 'woocommerce_before_cart', 'bbloomer_free_shipping_cart_notice' );

// Hook per la pagina checkout
add_action( 'woocommerce_before_checkout_form', 'bbloomer_free_shipping_cart_notice', 5 );

/**
 * Funzione per generare il messaggio sulla spedizione gratuita
 */
function bbloomer_get_free_shipping_message() {
    // Imposta qui la soglia per la spedizione gratuita
    $min_amount = 100;

    if ( WC()->cart->is_empty() ) {
        return false;
    }

    // Calcola il totale comprensivo di IVA
    $current = WC()->cart->get_cart_contents_total() + WC()->cart->get_cart_contents_tax();

    if ( $current < $min_amount ) {
        $remaining = $min_amount - $current;
        return array(
            'message' => sprintf(
                'Mancano solo %s per ottenere la spedizione gratuita sul tuo ordine!',
                wc_price( $remaining )
            ),
            'class' => 'shipping-notice-info'
        );
    } else {
        return array(
            'message' => 'Congratulazioni! Hai diritto alla spedizione gratuita per questo ordine.',
            'class' => 'shipping-notice-success'
        );
    }
}

/**
 * Notifica per carrello e checkout
 */
function bbloomer_free_shipping_cart_notice() {
    $notice_data = bbloomer_get_free_shipping_message();
    
    if ( ! $notice_data ) {
        return;
    }

    $notice = sprintf(
        '<div class="custom-shipping-notice %s">%s</div>',
        esc_attr( $notice_data['class'] ),
        wp_kses_post( $notice_data['message'] )
    );

    wc_print_notice( $notice, 'notice' );
}

Il codice CSS per lo stile

Per rendere le notifiche più accattivanti, aggiungi questo CSS nel Customizer del tuo tema (Aspetto → Personalizza → CSS aggiuntivo) oppure nel foglio di stile del tema child:

/* Stile notifiche spedizione gratuita */
.custom-shipping-notice {
    padding: 15px 20px;
    border-radius: 4px;
    font-weight: 500;
}

.shipping-notice-info {
    background-color: #f0f6fc;
    border-left: 4px solid #2196F3;
    color: #1565c0;
}

.shipping-notice-success {
    background-color: #e8f5e9;
    border-left: 4px solid #4CAF50;
    color: #2e7d32;
}

Sentiti libero di modificare i colori per adattarli al design del tuo sito.

Come personalizzare la soglia di spesa

Nel codice PHP trovi questa riga:

$min_amount = 100;

Questo valore rappresenta la soglia in euro per la spedizione gratuita. Ti basta modificare il numero 100 con l’importo che preferisci. Ad esempio, se offri la spedizione gratuita sopra i 50€, scrivi:

$min_amount = 50;

Ricorda che questo valore deve corrispondere alla soglia che hai impostato nelle opzioni di spedizione di WooCommerce, altrimenti il messaggio e il calcolo effettivo non coincideranno.

Dove inserire il codice

Ecco un breve riepilogo:

Codice	Dove inserirlo
PHP	File functions.php del tema child
CSS	Customizer (CSS aggiuntivo) oppure file style.css del tema child

Importante: se non hai un tema child, creane uno prima di procedere. Modificare direttamente il tema principale significa perdere tutte le modifiche al primo aggiornamento.

Conclusione

Con questo semplice snippet hai aggiunto una funzionalità utile al tuo e-commerce senza appesantirlo con un plugin. I tuoi clienti sapranno sempre quanto manca per ottenere la spedizione gratuita, e questo li incoraggerà ad aggiungere qualche prodotto in più al carrello.