Vi siete mai chiesti se fosse possibile sostituire il badge di vendita di base di WooCommerce con qualcosa di più accattivante (e leggermente meno noioso)?
È una domanda che riceviamo spesso dai nostri lettori e siamo felici di dirvi che la risposta è sì. È assolutamente possibile!
I badge personalizzati per i prodotti sono un modo fantastico per mettere in evidenza elementi speciali nel vostro negozio online. Sono utili se volete mostrare i nuovi arrivi, segnalare gli elementi in vendita o attirare l’attenzione sulle offerte a tempo limitato.
In questa pubblicazione vi mostreremo due semplici modi per aggiungere badge personalizzati al vostro negozio WooCommerce. Potete utilizzare un potente plugin o aggiungere del semplice codice.
Non preoccupatevi. Vi guideremo passo dopo passo attraverso ogni opzione!

☝ Nota importante: per seguire questo tutorial, è necessario disporre di un negozio WooCommerce completamente funzionante. Se non avete ancora impostato il vostro (o se siete ancora in fase di elaborazione), date un’occhiata alla nostra guida definitiva a WooCommerce per i principianti.
Cosa sono i badge di prodotto di WooCommerce?
Avete mai notato quelle piccole etichette “Sale” o “New” che compaiono sui prodotti durante gli acquisti online?
Si tratta di badge di prodotto, incredibilmente utili per far risaltare determinati elementi nel vostro negozio online.
Considerateli come adesivi virtuali che attirano l’attenzione dei vostri clienti su dettagli importanti dei prodotti, come saldi, nuovi arrivi o offerte a tempo limitato.
Abbiamo visto proprietari di negozi utilizzare i badge dei prodotti in modi davvero creativi per mostrare offerte speciali, evidenziare i bestseller o segnalare elementi in esaurimento.
Se utilizzate già WooCommerce, avrete notato che è dotato di una caratteristica di base: il badge di vendita che appare automaticamente quando si riduce il prezzo di un prodotto.

Anche se il badge di vendita di WooCommerce funziona bene per le esigenze più semplici, siamo onesti: è piuttosto limitato in termini di possibilità di utilizzo.
Non è possibile modificare facilmente l’aspetto del badge, aggiungere nuovi tipi di badge o controllare esattamente dove appaiono sulle immagini dei prodotti.
Nel frattempo, i badge personalizzati per i prodotti consentono di mostrare maggiormente la personalità del brand. Ma soprattutto, i badge originali possono attirare più efficacemente l’attenzione su prodotti speciali.
In questo modo, potrete incrementare le vendite del vostro negozio online. 💰
In questa guida vi illustreremo due metodi collaudati per aggiungere e personalizzare i badge dei prodotti in WooCommerce. Entrambi gli approcci vi daranno il controllo completo sul loro aspetto e sul loro funzionamento.
Potete usare i link rapidi qui sotto per passare al metodo che preferite:
Metodo 1: Utilizzare YITH WooCommerce Badge Management (più personalizzabile)
Iniziamo con il nostro strumento preferito per aggiungere badge personalizzati al vostro negozio WooCommerce.
Consigliamo di utilizzare YITH WooCommerce Badge Management perché rende super facile aggiungere e personalizzare i badge dei prodotti nel vostro negozio online.
Inoltre, abbiamo testato molti plugin YITH nel corso degli anni, come quelli per l’aggiunta di abbonamenti e video dei prodotti, e hanno sempre funzionato alla grande per i nostri utenti.
Volete mostrare un badge speciale durante le feste? O magari visualizzare il risparmio dei clienti? Questo plugin può fare tutto ciò. È anche possibile impostare i badge in modo che vengano visualizzati in determinati momenti e nascosti in seguito.
È possibile iniziare con la versione gratuita o premium del plugin. La versione gratuita è perfetta se si desidera aggiungere semplici badge di testo o immagini ai propri prodotti.
In questa guida vi mostreremo come utilizzare la versione premium, ma la maggior parte dei passaggi funzionerà allo stesso modo per entrambe. Ricordate che alcune caratteristiche interessanti, come i badge che mostrano automaticamente gli importi degli sconti, sono disponibili solo con la versione Premium.
Nota: la versione premium costa 79,99 dollari all’anno se si desiderano tutte le caratteristiche. Sebbene possa sembrare un prezzo elevato, riteniamo che ne valga la pena, in quanto offre un gran numero di modi per personalizzare i badge dei prodotti e renderli esattamente come si desidera.
Pronti per iniziare? Per prima cosa, è necessario acquistare il plugin dal sito web di YITH.
Quindi accedi al tuo account YITH, vai alla scheda “Licenze e download” e clicca sul pulsante “Download plugin” per scaricare il file.

Ecco un consiglio: non chiudete questa pagina dopo il download, perché avrete bisogno della chiave di licenza che vi viene mostrata.
Quindi, accedere alla Bacheca di WordPress e installare il plugin. Per ulteriori informazioni, abbiamo una guida passo-passo su come installare un plugin di WordPress.
Una volta attivato, verrà visualizzata una schermata di configurazione che richiede l’email e la chiave di licenza YITH. Basta copiare questi dati dal sito web di YITH e fare clic su “Attiva licenza”.

Una volta visualizzato il messaggio che indica che la licenza è attiva, il gioco è fatto!
Ora, facendo clic su “Vai alla Bacheca dei plugin”, si può iniziare a creare il primo badge personalizzato.

Passo 1: Nascondere il badge di vendita predefinito di WooCommerce
Per prima cosa, dobbiamo nascondere il badge di vendita incorporato di WooCommerce, in modo che non si scontri con i badge personalizzati dei prodotti.
Il procedimento è molto semplice. Accedere alla dashboard di WordPress e fare clic su YITH ” Gestione badge. Quindi, navigare nella scheda “Impostazioni generali”.
Qui si trova un’opzione che dice “Nascondi il badge WooCommerce “On sale””. Procedete e attivatela.
Quindi, in “Nascondi “In vendita” su:”, selezionate “Tutti i prodotti” per assicurarvi che il badge predefinito non appaia da nessuna parte nel vostro negozio.

Nelle impostazioni si possono notare altre opzioni utili. È possibile scegliere di nascondere i badge personalizzati in alcuni punti, come la barra laterale o le pagine dei singoli prodotti.
È un’ottima soluzione se volete che il vostro negozio abbia un aspetto pulito e organizzato. Ad esempio, se il vostro sito mobile sembra troppo affollato, potete nascondere i badge anche lì.
Non dimenticate di cliccare sul pulsante “Salva opzioni” in fondo alla pagina quando avete finito.

Fase 2: Creare il badge personalizzato
Ora arriva la parte divertente: creare il primo badge personalizzato per il prodotto in WooCommerce!
Andate alla scheda “Badge” e fate clic sul pulsante “Crea badge” per iniziare.

Il plugin offre 4 diversi tipi di badge tra cui scegliere: badge di testo, badge di immagine, badge CSS o badge avanzato per i prodotti di vendita.
Ogni tipo consente di creare modi unici per mettere in evidenza i prodotti. Ad esempio, se volete contrassegnare i prodotti come “Nuovi arrivi” o “Vegan Friendly”, le prime tre opzioni vanno benissimo.
Ma ecco un suggerimento: se state creando badge di sconto, vi consigliamo vivamente di utilizzare l’opzione avanzata, che si aggiorna automaticamente in base alle modifiche di prezzo del prodotto.

Dopo aver scelto il tipo di badge, assegnategli un nome che vi aiuti a ricordare a cosa serve.
Se avete scelto un’immagine, un CSS o un badge avanzato, vedrete un’intera collezione di badge predefiniti direttamente nel plugin.
Potete scegliere quello che preferite. Questi badge pronti all’uso vi salvano il tempo e potete comunque personalizzarli in corrispondenza dello stile delle vostre pagine WooCommerce.

Questo plugin brilla per le sue opzioni di personalizzazione. A seconda del tipo di badge scelto, è possibile regolare ogni tipo di impostazione per rendere il badge perfetto sulle immagini dei prodotti.
Volete cambiare il colore? È facile.
Avete bisogno di regolare la trasparenza? Nessun problema.
È anche possibile ruotare il badge o spostarlo sui prodotti finché non si trova nel punto giusto.

Nel nostro esempio, abbiamo reso il badge molto visibile cambiando il suo colore in rosso e posizionandolo nell’angolo in alto a destra dell’immagine del prodotto.
Queste piccole modifiche possono fare una grande differenza nell’efficacia con cui i badge attirano l’attenzione delle persone.
Quando si è soddisfatti dell’aspetto, basta fare clic su “Salva badge” per finire.

Passo 3: creare una regola per visualizzare il badge
Ora che abbiamo creato il nostro badge personalizzato, diciamo a WooCommerce esattamente dove e quando mostrarlo.
Andate alla scheda “Regole dei badge” e fate clic su “Imposta regola”.

Considerate le regole come istruzioni che indicano ai badge quando apparire sulle immagini dei prodotti.
Il plugin offre 4 modi principali per controllare la visualizzazione dei badge: badge prodotti, badge categorie, badge tag e badge classi di spedizione.

È possibile scegliere la regola “Badge prodotti” per aggiungere badge a determinati elementi o la regola “Badge categoria” per coprire intere categorie di prodotti.
Nel frattempo, la regola del tag badge visualizza i badge sui prodotti che condividono lo stesso tag di WooCommerce, mentre la regola del badge della classe di spedizione visualizza i badge in base alle opzioni di spedizione.
Ogni regola si rivolge a diversi aspetti del prodotto, ma tutte funzionano in modo simile. È quindi sufficiente scegliere quella più adatta alle proprie esigenze.
Per questo esempio utilizziamo la regola del badge dei prodotti, poiché è la scelta più comune.
Quindi, assegnate alla regola un nome semplice, in modo da poterla ritrovare facilmente in seguito.
Quindi, cercare l’impostazione “Mostra il badge in:”. È qui che si decide quali prodotti riceveranno il badge. Si può scegliere di mostrarlo su tutti i prodotti, sulle aggiunte recenti, sugli elementi in vendita, sulle caratteristiche dei prodotti più popolari o anche solo sui prodotti in stock.

Supponiamo di creare una regola per gli elementi in vendita. Se si seleziona “Prodotti in saldo”, il badge apparirà automaticamente ogni volta che si contrassegna un prodotto come in saldo. È così semplice!
Ma alcune opzioni prevedono ulteriori impostazioni da configurare. Ad esempio, se si sceglie “Solo prodotti recenti”, si può impostare la visualizzazione dei badge sugli elementi aggiunti negli ultimi giorni (ad esempio 7, 14 o 30 giorni).
In questo modo è facilissimo mettere automaticamente in evidenza i nuovi arrivi nel vostro negozio senza dover aggiungere manualmente i badge a ogni prodotto.

A volte è possibile che si desideri mantenere alcuni prodotti privi di badge. In questo caso, l’impostazione “Escludi prodotti” è utile.
È sufficiente abilitare questa impostazione e digitare i nomi dei prodotti per i quali non si desidera mostrare il badge. Questi elementi rimarranno privi di badge anche se corrispondono alle altre regole.

Quindi, selezionare il design del badge che si desidera utilizzare nel menu a discesa “Badge da assegnare”.
Ora, è qui che il sistema diventa davvero flessibile. È possibile programmare l’aspetto dei badge e scegliere chi può vederli.

L’opzione “Regola programmata” è perfetta per le offerte a tempo limitato.
Una volta abilitato, il plugin chiederà di impostare le date di inizio e fine dei badge.

E se si desidera mostrare badge speciali a determinati clienti, come ad esempio visualizzare un badge “Sconto VIP” solo per i clienti più fedeli, è possibile farlo.
Per farlo, basta selezionare “Solo utenti o ruoli specifici” nell’impostazione “Mostra badge a”. Quindi, digitate i ruoli utente preferiti o i nomi utente individuali sotto di essa.
Quando tutto appare corretto, basta fare clic su “Salva regola” e il gioco è fatto!

Visitate gratuitamente il frontend del vostro negozio per vedere i nuovi badge dei prodotti in azione.
Se si utilizza il tipo di badge avanzato per gli elementi in vendita, si visualizza sia la percentuale di sconto che l’effettivo risparmio, aiutando i personalizzati a individuare rapidamente le offerte migliori.

💡 Pubblicazioni correlate: Cercate altri strumenti e strategie interessanti per migliorare il vostro negozio WooCommerce? Verificate il nostro elenco dei migliori plugin WooCommerce.
Metodo 2: Utilizzare un codice personalizzato (gratuito e semplice)
Se non avete bisogno delle opzioni avanzate del primo metodo, o se cercate un’opzione completamente gratuita, abbiamo un semplice metodo di codice che non vi costerà nulla.
E se non vi sentite a vostro agio con il codice, non preoccupatevi! Utilizzeremo il plugin WPCode per rendere tutto ciò super facile e sicuro. Permette di aggiungere snippet di codice personalizzati in WordPress senza essere uno sviluppatore o rischiare di rompere il sito web.
Per questo tutorial utilizzeremo la versione gratuita di WPCode, che funziona perfettamente per le nostre esigenze. Tuttavia, esiste una versione premium con caratteristiche interessanti come la generazione di codice AI e la modalità di test.
Per maggiori informazioni, selezionate la nostra recensione approfondita di WPCode.
Per prima cosa, è necessario installare il plugin di WordPress nell’area di amministrazione.
Quindi, andare su Code Snippets ” + Add Snippet. Passare al passaggio del mouse sulla sezione “Aggiungi codice personalizzato (nuovo snippet)” e fare clic sul pulsante “+ Aggiungi snippet personalizzato”.

Poi, alla domanda sul tipo di codice, scegliere “Snippet PHP”.
Questo indica a WordPress il tipo di codice che stiamo utilizzando.

A questo punto, è necessario dare al proprio snippet un nome che aiuti a ricordare cosa fa.
Poiché questo codice rimuove il badge predefinito di WooCommerce per le vendite e aggiunge badge per i nuovi prodotti e badge per gli sconti dinamici, si potrebbe chiamare “Badge personalizzati di WooCommerce”.
Una volta fatto ciò, incollare lo snippet di codice che abbiamo fornito qui sotto nella casella “Anteprima codice”.
Questo codice fa qualcosa di veramente interessante. Calcola automaticamente le percentuali di sconto e le mostra sul badge delle vendite. Inoltre, aggiunge un badge “Novità” ai prodotti aggiunti negli ultimi 7 giorni.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | // Remove default WooCommerce sale flash badge remove_action( 'woocommerce_before_shop_loop_item_title' , 'woocommerce_show_product_loop_sale_flash' , 10 ); remove_action( 'woocommerce_after_shop_loop_item_title' , 'woocommerce_show_product_loop_sale_flash' , 10 ); remove_action( 'woocommerce_before_single_product_summary' , 'woocommerce_show_product_sale_flash' , 10 ); // Add custom badges to products add_action( 'woocommerce_before_shop_loop_item_title' , 'add_custom_product_badges' , 10 ); function add_custom_product_badges() { global $product ; // Initialize a variable to track whether a badge has been displayed $badge_displayed = false; // For products with any amount of discount percentage (1% or more) if ( $product ->is_on_sale() ) { // Get regular and sale prices $regular_price = floatval ( $product ->get_regular_price() ); $sale_price = floatval ( $product ->get_sale_price() ); // Handle variable products if ( $product ->is_type( 'variable' ) ) { // Get variation prices $regular_price = floatval ( $product ->get_variation_regular_price( 'max' , true ) ); $sale_price = floatval ( $product ->get_variation_sale_price( 'min' , true ) ); } // Calculate discount percentage if regular price is valid if ( $regular_price > 0 ) { $discount_percentage = ( ( $regular_price - $sale_price ) / $regular_price ) * 100; // Display badge if discount is 1% or more if ( $discount_percentage >= 1 ) { echo '<span class="product-badge sale-product">' . round ( $discount_percentage ) . '% off!</span>' ; $badge_displayed = true; // Badge has been displayed } } } // Only show the "New" badge if no other badge has been displayed if ( ! $badge_displayed ) { // For "New" products added in the last 7 days $post_date = get_the_time( 'Y-m-d' , $product ->get_id() ); $post_stamp = strtotime ( $post_date ); $newness = 7; // Number of days the product is considered new // Check if the product is new if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $post_stamp ) { echo '<span class="product-badge new-product">New</span>' ; $badge_displayed = true; } } } |
Volete regolare il tempo in cui un prodotto è considerato “nuovo”? Cercate la riga in cui si dice $newness = 7
nel codice. È possibile modificare il numero 7 con il numero di giorni desiderato, ad esempio 14 per due settimane o 30 per un mese.
Per concludere, fare clic sul pulsante “Inattivo” finché non diventa “Attivo”, quindi hit “Salva snippet”.

Successivamente, dobbiamo creare uno stile per i nostri badge, in modo che appaiano bene sui vostri prodotti. Aggiungiamo alcuni CSS per regolare il loro aspetto.
Per aggiungere un nuovo snippet, seguire la stessa procedura, ma questa volta scegliere “Snippet CSS” quando viene richiesto.

Assegnate al vostro snippet un nome descrittivo, come “Stili badge prodotto”. Questo vi aiuterà a trovarlo facilmente se dovrete apportare modifiche in seguito.
Ecco il codice CSS che darà ai vostri badge un aspetto professionale. Incollatelo nella casella “Anteprima codice”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* Common styles for all product badges */ .product-badge { position : absolute ; top : -10px ; /* Position at the top edge */ right : -10px ; /* Position at the right edge */ padding : 12px 16px ; border-radius : 50% ; color : #ffffff ; font-size : 16px ; font-weight : bold ; z-index : 99 ; box-shadow : 0 2px 5px rgba ( 0 , 0 , 0 , 0.3 ); } /* Styles for the "New" badge */ .new-product { background-color : #4CAF50 ; /* Green background */ } /* Styles for the "Sale" badge */ .sale-product { background-color : #FF0000 ; /* Red background */ } |
Vediamo giù cosa è possibile personalizzare in questo codice.
Volete che i vostri badge si trovino in una posizione diversa? A tal fine, è possibile modificare i valori in alto
e a destra
. Ad esempio, modificando top: -10px
in alto: 10px
sposterà il badge verso il basso.
Non vi piacciono i colori? È facilissimo cambiarli. Basta trovare le linee del colore di sfondo
e sostituire i codici colore.
Ad esempio, se si desidera un badge di vendita blu anziché rosso, modificare #FF0000
in #0000FF
. È inoltre possibile ingrandire o rimpicciolire i badge regolando il valore della dimensione del font
.
Volete approfondire la modifica di questi stili? Consultate la nostra guida per principianti sui CSS in WordPress.
Una volta terminato, basta fare clic sul pulsante “Inattivo” per renderlo “Attivo”, quindi hit “Salva snippet”.

Ecco fatto!
I badge dovrebbero ora apparire sulle immagini dei prodotti. Ecco un esempio di come appaiono utilizzando il nostro codice CSS:

Scopri altri trucchi e suggerimenti per WooCommerce
Ora che sapete come visualizzare i badge dei prodotti in WooCommerce, potreste voler esplorare altri modi per migliorare il vostro negozio online. Ecco alcune guide utili che vi consigliamo:
- Aumentare le vendite con un upselling intelligente – Learn come promuovere strategicamente i prodotti correlati e aumentare il valore medio dell’ordine attraverso efficaci tattiche di upselling.
- Premiare le recensioni dei clienti con coupon – Scoprite come inviare automaticamente coupon di sconto ai clienti che lasciano recensioni sui prodotti, incoraggiando così un maggior numero di feedback e acquisti ripetuti.
- Visualizzare consigli intelligenti sui prodotti – Scoprite come visualizzare i suggerimenti sui prodotti per aumentare le vendite di WooCommerce.
- Aggiungere opzioni avanzate di filtraggio dei prodotti – Imparate ad aiutare i clienti a trovare esattamente ciò che stanno cercando con filtri personalizzati che rendono il negozio più facile e veloce.
- Creare una funzione di wishlist per i clienti – Scoprite come l’aggiunta di una funzione di wishlist può aumentare l’engagement e dare ai clienti un motivo per restituire il vostro negozio, fornendo allo stesso tempo preziose informazioni sulle preferenze dei clienti.
- Nascondere i prezzi in WooCommerce – Imparate a nascondere i prezzi per i clienti all’ingrosso, i cataloghi online e i beni di lusso e chiedete agli acquirenti di contattarvi o di effettuare il login.
Speriamo che questo articolo vi abbia aiutato a capire come aggiungere i badge dei prodotti in WooCommerce. Potreste anche voler selezionare le nostre verifiche sui migliori plugin per griglie di prodotti di WooCommerce e la nostra guida su come accelerare le prestazioni di WooCommerce.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.