Uno degli aspetti più sottovalutati nella gestione di un e-commerce è la comunicazione chiara dei vantaggi offerti al cliente. Tra questi, la spedizione gratuita è senza dubbio uno dei più potenti incentivi all’acquisto. Se utilizzi WooCommerce e vuoi far sapere ai tuoi visitatori che alcuni prodotti beneficiano della spedizione gratuita, una delle soluzioni più efficaci è mostrare un badge visivo direttamente sulla scheda prodotto. In questo articolo ti mostro passo dopo passo come farlo in modo semplice ed elegante, senza plugin esterni.

Perché mostrare un badge di spedizione gratuita

Quando un cliente visita il tuo shop online, ha poco tempo e tanti stimoli visivi da gestire. Più riesci a semplificare e rendere immediati i vantaggi, più aumentano le probabilità che proceda all’acquisto. Un badge ben visibile che segnala la spedizione gratuita può ridurre i dubbi e rendere più appetibili quei prodotti che superano una certa soglia di prezzo. Inoltre, sapere che la spedizione è gratuita potrebbe incentivare gli utenti ad aggiungere altri articoli al carrello pur di raggiungere quella soglia, aumentando così il valore medio degli ordini.

Come funziona la soluzione che ti propongo

In questo caso specifico, vogliamo far comparire un badge con la scritta "Spedizione gratuita" solo sui prodotti che costano, ad esempio, più di 50€. Il badge sarà visibile sia nella pagina archivio prodotti, ovvero la griglia dello shop, sia nella pagina del singolo prodotto. La logica è molto semplice: tramite uno snippet PHP, WooCommerce controlla il prezzo del prodotto e, se supera la soglia che abbiamo impostato, visualizza il badge. A questo si aggiunge un po’ di CSS per dare al badge lo stile giusto.

Il codice PHP da inserire

Per prima cosa, apri il file functions.php del tuo tema child. Se non hai un tema child, ti consiglio di crearne uno o di utilizzare un plugin per l’inserimento di snippet in modo sicuro. Aggiungi questo codice:

function aggiungi_badge_spedizione_gratuita() {
global $product;
// Soglia minima per attivare il badge
$prezzo_minimo = 50;
// Verifica se il prodotto soddisfa la condizione
if ( $product->get_price() >= $prezzo_minimo ) {
echo 'Spedizione gratuita';
}
}
add_action( 'woocommerce_before_shop_loop_item_title', 'aggiungi_badge_spedizione_gratuita', 10 ); // archivio
add_action( 'woocommerce_before_single_product_summary', 'aggiungi_badge_spedizione_gratuita', 5 ); // pagina singola

Il codice è piuttosto chiaro: controlla il prezzo del prodotto e, se è pari o superiore a 50 euro, mostra un badge HTML che potrai poi personalizzare con il CSS.

Lo stile CSS del badge

Una volta che hai inserito lo snippet PHP, passiamo alla parte visiva. Per far apparire correttamente il badge, dobbiamo aggiungere del CSS personalizzato. Puoi inserirlo nel file style.css del tuo tema child oppure direttamente tramite l'area di personalizzazione del tema (Aspetto > Personalizza > CSS aggiuntivo). Ecco lo stile base che ti consiglio:

.badge-spedizione-gratuita {
position: absolute;
top: 10px;
left: 10px;
background-color: #28a745;
color: #333333;
padding: 5px 10px;
font-size: 12px;
border-radius: 5px;
z-index: 10;
font-weight: bold;
text-transform: uppercase;
}
.woocommerce ul.products li.product,
.single-product .woocommerce-product-gallery {
position: relative;
}

Con questo codice, il badge apparirà in alto a sinistra sull’immagine del prodotto, con un colore verde acceso che richiama immediatamente l’attenzione. Ovviamente puoi modificare colori, posizionamento e font secondo le esigenze del tuo brand.

Come verificare che tutto funzioni

Dopo aver aggiunto sia il codice PHP che lo stile CSS, visita una pagina prodotto e lo shop. Dovresti vedere il badge apparire sui prodotti con un prezzo superiore o uguale a 50€. Se così non fosse, ricontrolla di avere incollato correttamente il codice e svuota la cache del sito e del browser. Inoltre, assicurati che non ci siano conflitti con altri plugin o temi.

Quali benefici puoi ottenere

Oltre alla chiarezza comunicativa, questo tipo di badge offre anche un vantaggio strategico: aiuta a orientare il comportamento del cliente. Sapere che un prodotto ha la spedizione gratuita può essere determinante nella scelta tra due articoli simili. Inoltre, se usato con intelligenza, può incoraggiare i clienti a spendere di più pur di ottenere il vantaggio, con un impatto diretto sul valore medio dell’ordine. A livello di esperienza utente, un badge semplice ma visivamente efficace può migliorare l’aspetto del tuo shop e trasmettere un’idea di maggiore cura e attenzione ai dettagli. Se hai bisogno di una consulenza per impostare al meglio il badge, contattami