Il badge predefinito "In saldo!" di WooCommerce dice agli acquirenti che un prodotto è scontato, ma non quanto stanno risparmiando. Uno sconto del 10% e uno sconto del 40% possono apparire esattamente uguali sulla pagina del negozio, anche se rappresentano risparmi molto diversi.
Quel contesto aggiuntivo è importante quando gli acquirenti cercano attivamente un buon affare. Secondo il Sondaggio sulle festività nel commercio al dettaglio di Deloitte del 2025, l'89% dei consumatori intervistati ha pianificato di cercare offerte per far quadrare i propri budget. Mostrare lo sconto effettivo fornisce loro informazioni più utili a colpo d'occhio rispetto a un'etichetta generica di saldo.
Con Advanced Promo Kit, puoi far mostrare a WooCommerce badge con percentuale di sconto utilizzando dati di prodotto in tempo reale, in modo che il numero si aggiorni quando il prezzo cambia. Puoi anche mostrare l'importo risparmiato, limitare i badge a sconti maggiori ed esporre offerte coupon o "Acquista 1, prendi 1 gratis" direttamente sulla griglia dei prodotti.
Cosa può e non può mostrare il badge di saldo predefinito di WooCommerce
Di base, WooCommerce mostra un badge generico di offerta sui prodotti attualmente in saldo. Può apparire nelle pagine del negozio e del prodotto, ma il badge predefinito non indica agli acquirenti quanto è grande lo sconto.
È una scelta progettuale. WooCommerce decide se un prodotto è in saldo, quindi il badge predefinito visualizza un'etichetta generica "In saldo!". Non calcola la percentuale o l'importo risparmiato per l'acquirente e non rappresenta gli sconti dei coupon.
Se il tuo tema non offre la dicitura del badge di cui hai bisogno, due opzioni comuni sono uno snippet di codice che riscrive il testo del badge di offerta o un plugin per etichette che genera il testo dai dati del prodotto. Entrambi gli approcci sono trattati di seguito.
Il Metodo Snippet e i suoi Limiti
Un approccio snippet comune per i modelli classici di WooCommerce si aggancia al filtro woocommerce_sale_flash e sostituisce "In saldo!" con una percentuale calcolata. L'output del badge di offerta basato su blocchi più recenti utilizza invece woocommerce_sale_badge_text, quindi uno snippet per modelli classici potrebbe non influire su tutte le superfici del badge. In entrambi i casi, il codice legge i dati dei prezzi, calcola una percentuale e la restituisce come testo del badge.
Per un prodotto semplice con una coppia di prezzi, questo approccio funziona bene.
Uno snippet di base diventa più complicato in tre punti:
- Prodotti variabili e raggruppati: non esiste un singolo prezzo normale e di offerta per l'intero prodotto. Il codice deve decidere come rappresentare più prezzi o varianti in un unico badge, quindi una singola percentuale può essere fuorviante.
- Aggiornamenti del tema: se aggiungi lo snippet direttamente al file functions.php di un tema padre, un aggiornamento del tema può sovrascriverlo. Un tema figlio o un plugin per snippet mantiene il codice personalizzato separato.
- Coupon: uno snippet di prezzo di offerta di base confronta solo i prezzi dei prodotti. Non conosce automaticamente un coupon sconto del 20% o un'offerta BOGO memorizzata nelle impostazioni del coupon.
Aggiungi una soglia ("mostra solo articoli con oltre il 25% di sconto") o una data di fine programmata, e lo snippet diventa più complesso da mantenere.
Come Advanced Promo Kit Genera Badge di Sconto
Advanced Promo Kit genera il testo del badge da segnaposto che si risolvono rispetto ai dati del prodotto al caricamento della pagina. Scrivi l'etichetta una volta, con {discount_percent} dove va il numero, e il segnaposto calcola la cifra dai dati del prezzo corrente del prodotto quando si risolve.
Tre funzionalità sono particolarmente utili per questo flusso di lavoro:
- I segnaposto si risolvono in tempo reale: {product_price}, {regular_price}, {sale_price}, {discount_percent} e {discount_amount} vengono estratti dal prodotto al momento del rendering, formattati con le impostazioni della valuta di WooCommerce. Sui prodotti semplici, la modifica del prezzo aggiorna automaticamente i segnaposto di sconto.
- I segnaposto vuoti nascondono l'etichetta: se un segnaposto si risolve in nulla (ad esempio, {discount_percent} su un prodotto non in saldo), l'intera etichetta viene nascosta su quel prodotto. Non otterrai mai un badge che dice "Risparmia !" su un articolo a prezzo pieno.
- Le condizioni determinano dove viene visualizzato: la scheda Condizioni include In saldo (Sì / No) e una condizione Percentuale di sconto con operatori Uguale a, Diverso da, Maggiore di, Maggiore o uguale a, Minore di e Minore o uguale a, raggruppati con logica AND/OR.
Advanced Promo Kit ha anche un'integrazione opzionale con Advanced Coupons. Con il plugin gratuito Advanced Coupons attivo, il segnaposto {ac_coupon-COUPONCODE} renderizza lo sconto di un coupon Advanced Coupons, inclusi gli accordi BOGO. Questo va oltre ciò che gestisce uno snippet di prezzo di vendita di base.
Questa guida presuppone che tu abbia già creato un'etichetta di base. Se non l'hai fatto, inizia con la nostra guida per creare badge personalizzati per i prodotti e poi torna qui. D'ora in poi si tratta solo di segnaposto e condizioni.
Passaggio 1: Mostra un badge percentuale sugli articoli in saldo
Per i prodotti semplici, puoi mostrare la percentuale di sconto sugli articoli in saldo con un'etichetta il cui testo è -{discount_percent} e la cui unica condizione è In saldo con l'operatore Sì. Ecco la sequenza.
- Vai su Promo Kit > Crea etichetta. Dai all'etichetta un nome che riconoscerai nell'elenco Gestisci etichette, come "Percentuale di sconto".
- Nel campo Etichetta badge, digita un trattino. Quindi espandi Variabile: Prodotto nel pannello Variabili sotto il campo e fai clic su {discount_percent}. I segnaposto fanno distinzione tra maiuscole e minuscole, quindi usa il pannello o copia il codice esatto in minuscolo.
- Controlla l'Anteprima badge sulla destra. Senza alcun prodotto scelto, mostra -25%, da valori di esempio fissi (prezzo normale $39,99, prezzo in saldo $29,99). Scegli un prodotto dal menu a discesa sopra l'anteprima e verrà risolto rispetto ai prezzi effettivi di quel prodotto.
- Apri la scheda Condizioni e aggiungi In saldo con l'operatore Sì. Non richiede alcun valore.
- Scegli uno stile e una posizione del badge nella scheda Stile (maggiori dettagli di seguito). Le nuove etichette iniziano come Inattive, quindi attiva l'interruttore in cima alla schermata su Attivo, quindi Salva.
Seleziona un prodotto reale nell'anteprima, quindi conferma lo stesso valore sullo storefront dopo aver salvato.
Visita una categoria con alcuni prodotti semplici in saldo. Ognuno mostra la propria percentuale e gli articoli a prezzo pieno non mostrano nulla, perché {discount_percent} è vuoto per loro. A rigor di termini, la condizione In saldo è una protezione aggiuntiva qui, poiché la regola di nascondi automaticamente terrebbe già l'etichetta lontana dai prodotti a prezzo pieno. Tienila comunque, in modo che l'elenco delle etichette sia chiaro a colpo d'occhio.
Un errore comune è digitare {discount_percent}% di sconto, che renderizza "25%% di sconto" sullo storefront e fa sembrare il segnaposto danneggiato. Il segnaposto contiene già il segno di percentuale, quindi scrivi -{discount_percent} o {discount_percent} di sconto. Una percentuale può anche apparire inaspettatamente grande su uno sconto fisso ripido: uno sconto di $10 su un prodotto da $12 renderizza come "-83%". Per questi articoli, usa il segnaposto dell'importo nel passaggio 2.
L'elenco completo dei segnaposto predefiniti, con le maiuscole/minuscole esatte necessarie e quando ciascuno viene risolto in vuoto, si trova nel nostro riferimento ai segnaposto per contenuti dinamici.
Passaggio 2: Mostra l'importo risparmiato o solo sopra una soglia
Usa {discount_amount} quando vuoi enfatizzare l'importo risparmiato e aggiungi una condizione di Percentuale di Sconto quando vuoi badge solo sopra una soglia di sconto specifica.
Secondo Baymard Institute (2022), il 18%+ dei siti e-commerce rientra in almeno una di quattro insidie quando mostra sconti sul prezzo nella pagina del prodotto e, nel loro test su larga scala, la visualizzazione sia dello sconto assoluto che di quello relativo funziona meglio. Indicano anche la "Regola del 100": una percentuale per articoli inferiori a $100 e un importo in dollari sopra tale soglia, quindi "$100 di sconto" su un articolo da $1.000 può sembrare più sostanziale di "10% di sconto". Una seconda etichetta con il testo Risparmia {discount_amount} viene visualizzata come "Risparmia $10,00" nella valuta del tuo negozio, e nient'altro riguardo alla configurazione cambia.
Per una soglia, apri la scheda Condizioni e aggiungi Percentuale di Sconto con l'operatore Maggiore o uguale. Ad esempio, inserisci 15 se vuoi il badge solo sui prodotti scontati almeno del 15%. Scegli una soglia che si adatti alla tua promozione. A titolo di riferimento, l'analisi di Adobe sulla stagione delle festività del 2025 ha riportato sconti massimi del 30,9% nell'elettronica e del 29,6% nei giocattoli. Se stai decidendo quale percentuale di sconto offrire, il nostro post sui dati relativi alla percentuale di sconto più efficace lo tratta separatamente.
Per i prodotti variabili, usa testo fisso come "Opzioni selezionate in saldo", mantieni la condizione Percentuale di Sconto e aggiungi una condizione Tipo di Prodotto. Quindi imposta Corrispondenza Prodotto Variabile (Promo Kit > Impostazioni > Generali) su Corrispondi a qualsiasi variante, in modo che l'etichetta appaia quando almeno una variante soddisfa la soglia.
Ecco come si presenta nella pratica (dati di esempio):
| Obiettivo | Segnaposto / condizione | Testo del badge che digiti | Cosa vedono gli acquirenti |
|---|---|---|---|
| Percentuale di sconto su un articolo in saldo semplice | In Saldo, È + {discount_percent} | -{discount_percent} | -25% |
| Importo risparmiato | {discount_amount} | Risparmia {discount_amount} | Risparmia $10,00 |
| Solo grandi ribassi | Percentuale di Sconto >= 25 + {discount_percent} | Svuoto -{discount_percent} | Svuoto -40% |
| Offerta coupon sulla griglia | {ac_coupon-SUMMER20} | {ac_coupon-SUMMER20} di sconto con SUMMER20 | 20% di sconto con SUMMER20 |
| Coupon BOGO | {ac_coupon-BOGO2FOR1} | {ac_coupon-BOGO2FOR1} | Compra 1 Ottieni 1 Gratis |
Esempio di testo del badge. L'output risolto viene generato dai prezzi live di ciascun prodotto e dalle impostazioni del coupon.
Passaggio 3: Mostra coupon e offerte BOGO come badge
Un badge coupon utilizza il segnaposto {ac_coupon-COUPONCODE}, che visualizza lo sconto di un coupon Advanced Coupons specifico sui tuoi badge prodotto. Un semplice snippet di prezzo di saldo non produce questo perché l'offerta risiede nel coupon anziché nel prezzo del prodotto.
- Vai su Promo Kit > Impostazioni, apri la scheda Integrazioni e attiva la riga Advanced Coupons for WooCommerce. L'interruttore è disattivato se Advanced Coupons non è attivo. Appare una sotto-opzione Valida Coupon; lasciala disattivata per ora.
- Crea o modifica un'etichetta. Nel pannello Variabili, scorri fino alla sezione Advanced Coupons for WooCommerce, digita almeno due caratteri del codice coupon, scegli il coupon dal menu a discesa e fai clic su Inserisci Variabile. Il segnaposto, ad esempio {ac_coupon-SUMMER20}, viene aggiunto al testo del badge.
- Costruisci la dicitura attorno ad esso, come {ac_coupon-SUMMER20} di sconto con SUMMER20. L'anteprima lo risolve subito.
Ciò che stampa il segnaposto dipende dal tipo di coupon:
- Coupon percentuale: 25%
- Sconto fisso sul carrello: $10.00
- Sconto fisso sul prodotto: $5.00, e solo sui prodotti a cui si applica il coupon
- Offerta BOGO: Compra 2 Ottieni 1 Gratis, o Compra 2 Ottieni 1 al 50% di sconto, e solo sui prodotti "da acquistare" dell'offerta. L'offerta necessita di prodotti specifici o categorie di prodotti come trigger; le offerte attivate da qualsiasi prodotto, o impostate per dare lo stesso prodotto, non renderizzano un badge
- Cashback di credito negozio (Advanced Coupons Premium): 15% di Cashback o $10.00 di Cashback
I badge con sconto fisso sul prodotto e BOGO appaiono solo sui prodotti coperti dall'offerta; ovunque altrove il segnaposto è vuoto e l'etichetta è nascosta, la stessa regola di prima. I coupon percentuali, con sconto fisso sul carrello e cashback non controllano le restrizioni sui prodotti, quindi il loro badge viene mostrato su ogni prodotto raggiunto dall'etichetta. Se uno di questi coupon copre solo una categoria, aggiungi una condizione di Categoria Prodotto corrispondente all'etichetta. Se stai usando un coupon WooCommerce BOGO creato con il plugin gratuito Advanced Coupons, il badge può annunciare l'offerta ovunque appaia un prodotto "da acquistare" supportato.
L'opzione Valida Coupon è facoltativa e disattivata per impostazione predefinita. Attivala e Advanced Promo Kit verificherà che il coupon sia valido e non scaduto prima di mostrare l'etichetta, e un coupon che non supera il controllo nasconderà l'etichetta. Questo è adatto per codici con date di scadenza. Lasciala disattivata per codici evergreen che vuoi pubblicizzare indipendentemente.
Se la tua promozione ha date fisse ma vuoi che il badge appaia prima che il coupon sia attivo, usa invece la scheda Pianificazione. Ogni etichetta accetta una Data di Inizio e una Data di Fine facoltative, confrontate nel fuso orario del tuo sito, e si nasconde al di fuori di quella finestra. Integrazioni correlate aggiungono altri due segnaposto: {lp_points} mostra i punti fedeltà che un prodotto guadagna tramite Advanced Loyalty Program, mentre {agc_gift_card_value} mostra il valore di un prodotto buono regalo tramite Advanced Gift Cards. Il riferimento tipo per tipo per l'output dei coupon è nella nostra guida per visualizzare le informazioni sullo sconto dei coupon sulle etichette dei prodotti.
Styling, Stacking E Test Dei Tuoi Badge Dinamici
I valori dinamici possono occupare più spazio del testo segnaposto che vedi nell'editor. Per etichette come "Risparmia $10.00", un punto di partenza pratico è di circa 240-280 pixel di larghezza e 36-40 pixel di altezza. Puoi perfezionare le dimensioni nella scheda Stile una volta visualizzato il testo risolto.
Dodici forme di badge si trovano nella scheda Generale (Rettangolo Orizzontale, Rettangolo Verticale, Pillola, Cerchio, Quadrato, Nastro Sinistro, Nastro Destro, Tag, Esagono, Stella, Banner e un'Immagine Personalizzata), insieme al colore del testo, alla dimensione del carattere e al peso. La scheda Stile aggiunge colore del badge, larghezza, altezza, raggio del bordo, spaziatura interna, opacità e rotazione, il tutto con un'anteprima dal vivo. Sono presenti anche sfondi sfumati, ombre, animazioni, un URL cliccabile e un tooltip al passaggio del mouse. Il posizionamento è su Immagine o Fuori Immagine, in uno dei quattro angoli con offset in pixel. Per idee su forme e colori, il nostro riepilogo di design di badge di vendita che convertono ha quindici esempi pratici.
L'impilamento è attivo per impostazione predefinita. Etichette Massime per Prodotto è impostato su tre per impostazione predefinita e Spaziatura Etichette è impostata su cinque pixel; entrambi possono essere regolati in Impostazioni > Generale. La Priorità è un ordine di trascinamento in Impostazioni > Ordine Priorità, dove le etichette più in alto nell'elenco vengono mostrate per prime, quindi trascina "Percentuale di sconto" sopra "Offerta coupon".
Prima di considerarlo finito, controlla cinque prodotti sia sulla griglia del negozio che sulla pagina del singolo prodotto:
- Prodotto semplice in saldo: mostra la sua percentuale
- Prodotto variabile con sconti misti: mostra la tua etichetta di testo fisso se una variante è idonea
- Prodotto a prezzo pieno: non mostra nulla
- Prodotto a cui il tuo coupon non si applica: nessun badge BOGO o prodotto fisso, e nessun badge percentuale, carrello fisso o cashback se l'hai limitato con una condizione
- Prodotto idoneo per ogni etichetta: rispetta l'impostazione Etichette Massime per Prodotto e l'ordine di priorità impostato
Domande Frequenti
Come posso mostrare la percentuale di sconto sul badge di WooCommerce in saldo?
Il badge di WooCommerce in saldo predefinito non mostra la percentuale di sconto. Per aggiungerne uno, puoi usare codice o un plugin per etichette. Per i prodotti semplici in Advanced Promo Kit, crea un'etichetta con il testo -{discount_percent} e aggiungi una condizione In saldo con l'operatore È. La percentuale viene ricalcolata dai prezzi attuali del prodotto ogni volta che la pagina viene caricata.
Il badge di saldo può mostrare l'importo risparmiato invece della percentuale?
Sì. Usa il segnaposto {discount_amount}, che stampa la differenza tra il prezzo normale e quello in saldo formattata nella valuta del tuo negozio, quindi Salva {discount_amount} verrà visualizzato come "Risparmia $10,00". Baymard indica la "Regola del 100": quando mostri un solo formato, i risparmi in percentuale possono sembrare più convincenti sotto i $100, mentre i risparmi in dollari possono sembrare più convincenti sopra i $100. Puoi eseguire un'etichetta per ciascuno con una condizione sul prezzo del prodotto per dividerli.
Un badge di WooCommerce può mostrare un coupon o un'offerta "Acquista 1, prendi 1 gratis"?
Sì, tramite l'integrazione Advanced Coupons in Advanced Promo Kit. Attivala in Promo Kit > Impostazioni > Integrazioni, quindi inserisci {ac_coupon-YOURCODE} in un'etichetta. I coupon con percentuale, importo fisso sul carrello, importo fisso sul prodotto, "Acquista 1, prendi 1 gratis" e cashback con credito negozio (Premium) visualizzano ciascuno la propria dicitura, come "Acquista 2, ricevi 1 gratis". Le etichette per importo fisso sul prodotto e "Acquista 1, prendi 1 gratis" appaiono solo sui prodotti coperti dall'offerta; per i coupon con percentuale, importo fisso sul carrello e cashback, aggiungi una condizione per limitare dove viene visualizzata l'etichetta.
Il badge si aggiornerà quando cambierò il prezzo?
Sì. Sui prodotti semplici, i segnaposto dei prezzi vengono risolti rispetto al prezzo normale e in saldo corrente del prodotto quando la pagina viene caricata, quindi la modifica di un prezzo cambia il badge senza modificare l'etichetta. Se rimuovi completamente il prezzo in saldo, {discount_percent} verrà risolto come vuoto e l'etichetta scomparirà automaticamente da quel prodotto.
Preparazione dei tuoi badge sconto
L'obiettivo è mantenere ogni badge allineato alla promozione che descrive. I segnaposto dinamici riducono il testo del badge che devi aggiornare manualmente quando i prezzi dei prodotti cambiano.
Ecco cosa fare dopo:
- Cosa il badge di vendita predefinito di WooCommerce può e non può mostrare: decidi se l'etichetta predefinita "In saldo!" fornisce ai clienti dettagli sufficienti sullo sconto.
- Il metodo Snippet e i suoi limiti: se stai già utilizzando uno snippet, controllalo su un prodotto variabile prima di fidarti.
- Mostra un badge percentuale sugli articoli in saldo: crea l'etichetta percentuale e ricorda che il segnaposto porta il suo simbolo %.
- Mostra l'importo risparmiato o solo sopra una soglia: aggiungi un'etichetta di importo e una Soglia Sconto Percentuale >=.
- Metti offerte coupon e BOGO sulla griglia: attiva l'integrazione e applica il badge al tuo miglior coupon.
Se desideri che WooCommerce mostri la percentuale di sconto senza uno snippet personalizzato da mantenere, configura i badge di vendita dinamici di Advanced Promo Kit e mantieni il testo del tuo badge collegato ai dati del tuo prodotto.
