Come aggiungere badge prodotto in WooCommerce (veloce e facile)

Ogni negozio online di successo ha una cosa in comune: rende facile per i clienti trovare i loro migliori prodotti.

Ma ecco la sfida: quando tutti i tuoi prodotti sembrano uguali, come fanno gli acquirenti a sapere quali sono in saldo, aggiunti di recente o le tue migliori raccomandazioni? Le etichette dei prodotti sono la risposta.

Questi piccoli elementi visivi comunicano istantaneamente cosa c'è di speciale in ogni prodotto. Una semplice etichetta 'Nuovo' può stimolare la curiosità, mentre un'etichetta 'Sconto del 50%' crea urgenza.

Sulla base della nostra esperienza nell'aiutare i proprietari di negozi a ottimizzare i loro siti WooCommerce, le etichette dei prodotti sono uno di quei piccoli cambiamenti che offrono grandi risultati.

Abbiamo testato vari approcci e trovato 2 metodi che funzionano perfettamente sia per i principianti che per gli utenti esperti. Immergiamoci nei modi più semplici per iniziare.

Cosa sono le etichette dei prodotti WooCommerce?

Hai mai notato quelle piccole etichette 'In saldo' o 'Nuovo' che compaiono sui prodotti durante lo shopping online?

Quelle sono le etichette dei prodotti, ed sono incredibilmente utili per far risaltare alcuni articoli nel tuo negozio online.

Pensali come adesivi virtuali che attirano l'attenzione dei tuoi clienti sui dettagli importanti del prodotto come saldi, nuovi arrivi o offerte a tempo limitato.

Abbiamo visto proprietari di negozi utilizzare badge prodotto in modi davvero creativi per mostrare offerte speciali, evidenziare i bestseller o contrassegnare articoli che stanno per esaurirsi.

Ora, se stai già utilizzando WooCommerce, potresti aver notato che include una funzionalità di base per i badge di vendita che appare automaticamente quando riduci il prezzo di un prodotto.

Mentre il badge di vendita di WooCommerce funziona bene per esigenze semplici, siamo onesti: è piuttosto limitato in termini di ciò che puoi farci.

Non puoi cambiare facilmente l'aspetto del badge, aggiungere nuovi tipi di badge o controllare esattamente dove appaiono sulle tue immagini prodotto.

Nel frattempo, i badge prodotto personalizzati ti consentono di mostrare maggiormente la personalità del tuo marchio. Soprattutto, però, i badge originali possono attirare più efficacemente l'attenzione sui prodotti speciali.

In questo modo, puoi aumentare le vendite nel tuo negozio online. 💰

In questa guida, ti illustreremo 2 metodi comprovati per aggiungere e personalizzare i badge prodotto in WooCommerce. Entrambi gli approcci ti daranno il controllo completo su come appaiono e funzionano.

Puoi utilizzare i collegamenti rapidi qui sotto per saltare al tuo metodo preferito:

• Metodo 1: Utilizza YITH WooCommerce Badge Management (Più personalizzabile)
• Metodo 2: Utilizza codice personalizzato (Gratuito e semplice)
• Scopri altri suggerimenti e trucchi per WooCommerce
• Domande frequenti: Badge prodotto in WooCommerce

Metodo 1: Utilizza YITH WooCommerce Badge Management (Più personalizzabile)

Iniziamo con il nostro strumento preferito per aggiungere badge prodotto personalizzati al tuo negozio WooCommerce.

Ti consigliamo di utilizzare YITH WooCommerce Badge Management perché rende super facile aggiungere e personalizzare badge prodotto nel tuo negozio online.

Inoltre, abbiamo testato molti plugin YITH nel corso degli anni, come quelli per aggiungere abbonamenti e video prodotto, e hanno sempre funzionato benissimo per i nostri utenti.

Vuoi mostrare un badge speciale durante le festività? O magari mostrare quanti soldi risparmieranno i clienti? Questo plugin può fare tutto questo. Puoi persino impostare i badge in modo che vengano visualizzati in determinati momenti e poi nascosti.

Puoi iniziare con la versione gratuita o premium del plugin. Il piano gratuito è perfetto se vuoi solo aggiungere semplici badge di testo o immagine ai tuoi prodotti.

In questa guida, ti mostreremo come utilizzare la versione premium, ma la maggior parte dei passaggi funzionerà allo stesso modo per entrambe. Ricorda solo che alcune funzionalità interessanti, come i badge che mostrano automaticamente gli importi degli sconti, sono disponibili solo nella versione premium.

Pronto per iniziare? Per prima cosa, dovrai acquistare il plugin dal sito web di YITH.

Quindi accedi al tuo account YITH, vai alla scheda 'Licenze e download' e fai clic sul pulsante 'Scarica plugin' per scaricare il file.

Ecco un consiglio: non chiudere questa pagina dopo aver scaricato, perché avrai bisogno della chiave di licenza che viene visualizzata lì.

Successivamente, vai alla tua bacheca di WordPress e installa il plugin. Per ulteriori informazioni, abbiamo una guida passo passo su come installare un plugin WordPress.

Quando è attivo, vedrai una schermata di configurazione che ti chiederà la tua email YITH e la chiave di licenza. Copiale semplicemente dal sito web YITH e fai clic su 'Attiva licenza'.

Una volta visualizzato il messaggio che indica che la tua licenza è attiva, sei pronto!

Ora, fai clic su 'Vai alla dashboard del plugin' e potrai iniziare a creare il tuo primo badge personalizzato.

Passaggio 1: Nascondi il badge di vendita predefinito di WooCommerce

Innanzitutto, dobbiamo nascondere il badge di vendita integrato di WooCommerce in modo che non entri in conflitto con i nostri badge di prodotto personalizzati. 

Il processo è davvero semplice. Vai alla tua dashboard di WordPress e fai clic su YITH » Gestione Badge. Quindi, vai alla scheda 'Impostazioni generali'.

Qui troverai un'opzione che dice 'Nascondi badge WooCommerce "In saldo"'. Procedi e attivala.

Quindi, sotto 'Nascondi "In saldo" su:', seleziona 'Tutti i prodotti' per assicurarti che il badge predefinito non venga visualizzato da nessuna parte nel tuo negozio.

Mentre sei nelle impostazioni, potresti notare altre opzioni utili. Puoi scegliere di nascondere i tuoi badge personalizzati in determinati punti, come la barra laterale o le singole pagine dei prodotti.

Questo è ottimo se vuoi mantenere il tuo negozio pulito e organizzato. Ad esempio, se il tuo sito mobile sembra troppo affollato, puoi nascondere i badge anche lì.

Non dimenticare di fare clic sul pulsante 'Salva opzioni' in fondo alla pagina quando hai finito.

Passaggio 2: Crea il tuo badge personalizzato

Ora arriva la parte divertente: creare il tuo primo badge di prodotto personalizzato in WooCommerce!

Vai alla scheda 'Badge' e fai clic sul pulsante 'Crea Badge' per iniziare.

Il plugin ti offre 4 diversi tipi di badge tra cui scegliere: badge di testo, badge immagine, badge CSS o badge avanzato per prodotti in saldo.

Ogni tipo ti consente di creare modi unici per evidenziare i tuoi prodotti. Ad esempio, se vuoi contrassegnare i prodotti come "Nuovo arrivo" o "Vegano", le prime tre opzioni funzionano benissimo.

Ma ecco un consiglio: se stai creando badge sconto, ti consigliamo vivamente di utilizzare l'opzione avanzata, che si aggiorna automaticamente in base alle modifiche di prezzo del tuo prodotto.

Dopo aver scelto il tipo di badge, dagli un nome che ti aiuti a ricordare a cosa serve.

Se hai scelto un'immagine, CSS o un badge avanzato, vedrai un'intera collezione di design di badge predefiniti direttamente nel plugin.

Puoi scegliere quello che preferisci. Questi badge pronti all'uso ti fanno risparmiare tempo e puoi comunque personalizzarli per abbinarli allo stile delle tue pagine WooCommerce.

Questo plugin brilla davvero nelle sue opzioni di personalizzazione. A seconda del tipo di badge che hai scelto, puoi regolare tutti i tipi di impostazioni per far apparire il tuo badge perfetto sulle immagini dei tuoi prodotti.

Vuoi cambiare il colore? Facile.

Hai bisogno di regolare la trasparenza? Nessun problema.

Puoi persino ruotare il badge o spostarlo sui tuoi prodotti finché non si trova nella posizione giusta.

Per il nostro esempio, abbiamo fatto risaltare il badge modificandone il 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 tuoi badge attirano l'attenzione delle persone.

Quando sei soddisfatto dell'aspetto di tutto, fai semplicemente clic su 'Salva badge' per completare.

Passaggio 3: Crea una regola per visualizzare il tuo badge

Ora che abbiamo creato il nostro badge personalizzato, diciamo a WooCommerce esattamente dove e quando mostrarlo.

Vai alla scheda 'Regole badge' e fai clic su 'Imposta regola'.

Pensa alle regole come a istruzioni che dicono ai tuoi badge quando apparire sulle immagini dei tuoi prodotti.

Il plugin ti offre 4 modi principali per controllare dove compaiono i tuoi badge: badge prodotti, badge categoria, badge tag e badge classe di spedizione.

Puoi scegliere la regola 'Badge prodotti' per aggiungere badge a determinati articoli o la regola 'Badge categoria' per coprire intere categorie di prodotti.

Nel frattempo, la regola del badge tag mostra i badge sui prodotti che condividono lo stesso tag WooCommerce, e la regola del badge classe di spedizione visualizza i badge in base alle opzioni di spedizione.

Ogni regola si rivolge a diversi aspetti del prodotto, ma funzionano tutte in modo simile. Quindi, devi solo scegliere ciò che funziona meglio per le tue esigenze.

Utilizziamo la regola del badge prodotti per questo esempio, poiché è la scelta più comune.

Successivamente, dai un nome semplice alla tua regola in modo da poterla trovare facilmente in seguito.

Quindi, cerca l'impostazione 'Mostra badge in:'. È qui che decidi quali prodotti riceveranno il tuo badge. Puoi scegliere di mostrarlo su tutti i prodotti, aggiunte recenti, articoli in saldo, prodotti popolari in evidenza, o anche solo sui prodotti disponibili.

Supponiamo che tu stia creando una regola per gli articoli in saldo. Se selezioni 'Prodotti in saldo', il tuo badge apparirà automaticamente ogni volta che contrassegni un prodotto come in saldo. È così semplice!

Ma alcune opzioni vengono fornite con impostazioni aggiuntive da configurare. Ad esempio, se scegli 'Solo prodotti recenti', puoi impostare i badge in modo che appaiano sugli articoli aggiunti negli ultimi giorni (come 7, 14 o 30 giorni).

Questo rende super facile evidenziare automaticamente le nuove arrivate nel tuo negozio senza dover aggiungere manualmente i badge a ogni prodotto.

A volte, potresti voler escludere alcuni prodotti dall'applicazione dei badge. È qui che l'impostazione 'Escludi prodotti' si rivela utile.

Basta abilitare questa impostazione e digitare i nomi di eventuali prodotti per i quali non si desidera mostrare il badge. Questi articoli rimarranno senza badge anche se corrispondono alle tue altre regole.

Successivamente, seleziona quale design del badge desideri utilizzare nel menu a discesa 'Badge da assegnare'.

Ora, ecco dove diventa davvero flessibile. Puoi programmare quando appaiono i tuoi badge e scegliere chi può vederli.

L'opzione 'Programma regola' è perfetta per le offerte a tempo limitato.

Quando la abiliti, il plugin ti chiederà di impostare le date di inizio e fine per i tuoi badge.

E se vuoi mostrare badge speciali a determinati clienti, come visualizzare un badge "Sconto VIP" solo ai clienti più fedeli, puoi farlo anche tu.

Per fare ciò, seleziona semplicemente ‘Solo utenti specifici o ruoli utente’ nell'impostazione ‘Mostra badge a’. Quindi, digita i tuoi ruoli utente preferiti o i singoli nomi utente al di sotto.

Quando tutto sembra corretto, fai clic su ‘Salva regola’ e il gioco è fatto!

Sentiti libero di visitare il front-end del tuo negozio per vedere i tuoi nuovi badge prodotto in azione.

Se stai utilizzando il tipo di badge avanzato per gli articoli in saldo, lo vedrai visualizzare sia la percentuale di sconto che il denaro effettivo risparmiato, aiutando i clienti a individuare rapidamente le migliori offerte.

Metodo 2: Utilizza codice personalizzato (Gratuito e semplice)

Se non hai bisogno delle opzioni avanzate del primo metodo, o se stai cercando un'opzione completamente gratuita, allora abbiamo un semplice metodo basato sul codice che non ti costerà nulla.

E se non ti senti a tuo agio con il codice, non preoccuparti! Utilizzeremo il plugin WPCode per rendere tutto super facile e sicuro. Ti permette di aggiungere snippet di codice personalizzati in WordPress senza essere uno sviluppatore o rischiare di danneggiare il tuo sito web.

Utilizzeremo la versione gratuita di WPCode per questo tutorial perché funziona perfettamente per le nostre esigenze. Detto questo, esiste una versione premium con funzionalità interessanti come la generazione di codice AI e la modalità di test.

Per maggiori informazioni, dai un'occhiata alla nostra recensione approfondita di WPCode.

Innanzitutto, devi installare il plugin WordPress nella tua area amministrativa.

Quindi, vai su Snippet di codice » + Aggiungi snippet. Passa il mouse sulla sezione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e quindi fai clic sul pulsante '+ Aggiungi snippet personalizzato'.

Successivamente, scegli 'Snippet PHP' quando ti viene chiesto il tipo di codice.

Questo dice a WordPress che tipo di codice stiamo utilizzando.

Ora, devi dare al tuo snippet un nome che ti aiuti a ricordare cosa fa.

Poiché questo codice rimuoverà il badge di vendita predefinito di WooCommerce e aggiungerà sia nuovi badge prodotto che badge sconto dinamici, potresti chiamarlo qualcosa come “Badge WooCommerce Personalizzati”.

Una volta fatto, incolla lo snippet di codice che ti abbiamo fornito di seguito 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 “Nuovo” ai prodotti aggiunti negli ultimi 7 giorni.

// 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;
        }
    }
}

Vuoi regolare per quanto tempo un prodotto è considerato “nuovo”? Cerca la riga in cui dice $newness = 7 nel codice. Puoi cambiare quel numero 7 con quanti giorni desideri, ad esempio 14 per due settimane o 30 per un mese.

Per finire, fai clic sul pulsante ‘Inattivo’ finché non cambia in ‘Attivo’, quindi premi ‘Salva snippet’.

Successivamente, dobbiamo stilizzare i nostri badge per farli apparire al meglio sui tuoi prodotti. Aggiungiamo un po’ di CSS per regolarne l’aspetto.

Per aggiungere un nuovo snippet, segui gli stessi passaggi di prima, ma questa volta, scegli ‘Snippet CSS’ quando richiesto.

Dai al tuo snippet un nome descrittivo, come “Stili Badge Prodotto”. Questo ti aiuterà a trovarlo facilmente se dovrai apportare modifiche in seguito.

Ecco il codice CSS che renderà i tuoi badge dall’aspetto professionale. Incolla semplicemente questo nella casella ‘Anteprima codice’:

/* 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 */
}

Analizziamo cosa puoi personalizzare in questo codice.

Vuoi i tuoi badge in una posizione diversa? Per farlo, puoi modificare i valori top e right. Ad esempio, cambiare top: -10px in top: 10px sposterà il badge verso il basso.

Non ti piacciono i colori? È facilissimo cambiarli. Trova le righe background-color e sostituisci i codici colore.

Ad esempio, se desideri un badge di vendita blu invece di uno rosso, cambia #FF0000 in #0000FF. Puoi anche rendere i badge più grandi o più piccoli regolando il valore font-size.

Vuoi saperne di più su come modificare questi stili? Dai un'occhiata alla nostra guida per principianti su CSS in WordPress.

Una volta terminato, fai clic sul pulsante 'Inattivo' per renderlo 'Attivo', quindi premi 'Salva snippet'.

Ecco fatto!

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

Scopri altri suggerimenti e trucchi per WooCommerce

Ora che sai come visualizzare i badge dei prodotti in WooCommerce, potresti voler esplorare altri modi per migliorare il tuo negozio online. Ecco alcune guide utili che ti consigliamo:

• Aumenta le vendite con upselling intelligenti – Scopri come promuovere strategicamente prodotti correlati e aumentare il valore medio del tuo ordine attraverso efficaci tattiche di upselling.
• Premia le recensioni dei clienti con coupon – Scopri come inviare automaticamente coupon sconto ai clienti che lasciano recensioni sui prodotti, incoraggiando più feedback e acquisti ripetuti.
• Mostra raccomandazioni intelligenti sui prodotti – Scopri come mostrare suggerimenti sui prodotti per far decollare le tue vendite WooCommerce.
• Mostra prodotti acquistati frequentemente insieme – Impara come visualizzare i prodotti acquistati frequentemente insieme in WooCommerce per aumentare le vendite.
• Aggiungi opzioni avanzate di filtraggio dei prodotti – Impara ad aiutare i clienti a trovare esattamente ciò che cercano con filtri prodotto personalizzabili che rendono lo shopping più facile e veloce.
• Crea una funzione di lista dei desideri per i clienti – Scopri come l'aggiunta di una funzione di lista dei desideri può aumentare l'engagement e dare agli acquirenti un motivo per tornare nel tuo negozio, fornendo al contempo preziose informazioni sulle preferenze dei clienti.
• Nascondi i prezzi in WooCommerce – Scopri come nascondere i prezzi per i clienti all'ingrosso, i cataloghi online e i beni di lusso e chiedere invece agli acquirenti di contattarti o di accedere.

Domande frequenti: Badge prodotto in WooCommerce

Ecco alcune domande frequenti dei nostri lettori sull'aggiunta di badge prodotto in WooCommerce:

Posso creare badge personalizzati come 'In offerta', 'Novità' o 'Scorte limitate'?

Sì, la maggior parte dei plugin per badge prodotto ti consente di creare badge personalizzati con testo, colori e icone propri. Ciò significa che non sei limitato a etichette generiche come 'In offerta' o 'Novità'.

Ad esempio, puoi creare badge come:

• In tendenza ora!
• Solo 2 rimasti!
• Scelta dello staff
• 100% Biologico

Alcuni strumenti ti consentono persino di caricare le tue immagini di badge o di utilizzare etichette dinamiche basate sui dati di magazzino o sui prezzi.

I badge prodotto funzionano sui dispositivi mobili?

Sì, la maggior parte dei plugin per badge è responsive, il che significa che i tuoi badge appariranno correttamente su tutte le dimensioni dello schermo, inclusi smartphone e tablet.

Tuttavia, il posizionamento e il design del badge possono dipendere dal tuo tema.

È una buona idea testare il tuo negozio sui dispositivi mobili dopo aver aggiunto i badge per assicurarti che non si sovrappongano a contenuti importanti o rendano le immagini dei prodotti difficili da vedere.

Posso visualizzare più badge sullo stesso prodotto?

Dipende dal plugin o dal metodo che stai utilizzando. Ad esempio, il plugin YITH WooCommerce Badge Management supporta più badge per prodotto, mentre altri potrebbero consentirne solo uno alla volta.

Se vuoi mostrare più etichette come 'In offerta' e 'Miglior venditore' insieme, cerca un plugin che offra la stratificazione o l'impilamento dei badge. Controlla sempre le impostazioni o la documentazione del plugin per confermare che questa funzionalità sia supportata.

I badge prodotto rallenteranno il mio negozio WooCommerce?

Di solito no, specialmente se utilizzi un plugin ben codificato. Tuttavia, evita di utilizzare file di immagini di grandi dimensioni per i badge e non sovraccaricare le tue pagine prodotto con badge multipli o animazioni.

Per mantenere il tuo negozio veloce:

• Scegli plugin leggeri e ottimizzati
• Utilizza badge basati su testo quando possibile
• Limita l'uso dei badge ai prodotti o alle categorie in evidenza

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere badge prodotto in WooCommerce. Potresti anche voler consultare le nostre scelte di esperti dei migliori plugin per griglie prodotto per WooCommerce e la nostra guida su come velocizzare le prestazioni di WooCommerce.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.