Il tuo negozio ha un suo look, con i suoi colori, font e layout. Questa guida ti mostra come abbinare il pulsante SaveTo Wishlist ad esso, nelle pagine del prodotto, del negozio e del carrello, senza toccare alcun codice.
Prerequisiti
- WooCommerce installato e configurato.
- SaveTo Wishlist Lite installato e attivo.
- Accesso amministrativo alla tua bacheca WordPress.
Azione wishlist
L'impostazione Pulsante Aggiungi alla wishlist controlla cosa succede quando un cliente fa clic sul pulsante della wishlist. La troverai in SaveTo Wishlist → Impostazioni → Generali → Azione Wishlist.
Ci sono tre opzioni:
- Reindirizzamento: invia il cliente direttamente alla pagina della sua wishlist dopo aver fatto clic. Ottimo per i negozi in cui vuoi che i clienti rivedano subito la loro wishlist.
- Popup: mostra un popup di conferma senza allontanare dalla pagina. Utile quando vuoi che gli acquirenti rimangano sulla pagina e continuino a navigare.
- Dissolvenza: un piccolo messaggio di conferma appare e scompare accanto al pulsante per confermare che il prodotto è stato salvato, senza navigazione o popup. È l'opzione più discreta, ideale quando vuoi un'interruzione minima del flusso di acquisto.
Dove trovare le impostazioni
Vai alla tua Bacheca WordPress → SaveTo Wishlist → Impostazioni → Posizionamento e Stili Pulsante.
Vedrai cinque sezioni principali:
- Impostazioni pulsante: etichetta del pulsante wishlist, etichetta mostrata dopo l'aggiunta di un prodotto e interruttori on/off per plugin supportati come Quick View per WooCommerce (questi appaiono solo mentre quel plugin è attivo)
- Stile frontend: l'impostazione Caricamento CSS frontend che controlla quanto del CSS del plugin viene caricato sul tuo storefront (trattato nella sezione Caricamento CSS frontend di seguito)
- Pagina prodotto: posizionamento e stile del pulsante nelle pagine prodotto singole
- Pagina negozio: posizionamento e stile del pulsante nelle liste prodotto
- Pagina carrello: stile ed etichetta per il pulsante "Salva carrello nella Wishlist"
Dopo aver modificato qualsiasi impostazione in questa scheda, fai clic su Salva modifiche.
Impostazioni pulsante
Etichetta Pulsante Wishlist imposta il testo predefinito per tutti i pulsanti della wishlist nel tuo negozio. Il predefinito è Salva nella Wishlist, ma puoi cambiarlo in qualsiasi cosa si adatti, come Aggiungi ai Preferiti o Salva per Dopo. Mantienilo breve e chiaro.
Etichetta Pulsante Wishlist Selezionato ti permette di mostrare un'etichetta diversa una volta che un prodotto è stato aggiunto alla wishlist. Il predefinito è Rimuovi dalla Wishlist, che permette agli acquirenti di rimuovere l'articolo con un clic. Puoi cambiarlo in qualsiasi cosa si adatti al tuo negozio.
Azione del pulsante Lista dei desideri selezionata controlla cosa succede quando un acquirente fa clic sul pulsante di un prodotto che è già nella sua lista dei desideri. L'impostazione predefinita è Rimuovi dalla lista dei desideri, che rimuove il prodotto in un clic. Passa a Visualizza lista dei desideri per inviare l'acquirente alla pagina della sua lista dei desideri.
Se un plugin supportato come Quick View per WooCommerce è attivo, anche questa sezione mostra un interruttore on/off per esso. Vedi Utilizzo del pulsante con Quick View per WooCommerce di seguito.
Suggerimento Pro: Mantieni le etichette dei pulsanti brevi e orientate all'azione per rendere facile agli acquirenti intraprendere azioni.
Pagina prodotto
La sezione Pagina Prodotto controlla come appare il pulsante della wishlist nelle pagine dei singoli prodotti dove gli acquirenti visualizzano un singolo prodotto prima dell'acquisto.
Posizionamento del pulsante decide dove appare il pulsante nella pagina del prodotto. L'impostazione predefinita è In alto a destra dell'immagine del prodotto, ma puoi anche scegliere In alto a sinistra dell'immagine del prodotto, Sopra il pulsante Aggiungi al carrello, Sotto il pulsante Aggiungi al carrello, Allineato con il pulsante Aggiungi al carrello, Sopra il titolo del prodotto o Sotto il titolo del prodotto. Per nascondere completamente il pulsante della wishlist nelle pagine dei singoli prodotti, scegli Non mostrare.
La scelta di Allineato con il pulsante Aggiungi al carrello rivela un campo Spaziatura pulsanti, il distanziamento in pixel tra il pulsante Aggiungi al carrello e il pulsante della wishlist. L'impostazione predefinita è 16px e può essere impostata da 0 a 60px. Il tuo valore si applica su ogni dispositivo. Sui touchscreen, uno spazio inferiore a 8px viene aumentato a 8px, in modo che i clienti non tocchino il pulsante sbagliato.
⚠️ Prodotti senza prezzo o esauriti: Dalla versione 1.0.7, i posizionamenti Sopra il pulsante Aggiungi al carrello, Sotto il pulsante Aggiungi al carrello e In linea con il pulsante Aggiungi al carrello mostrano il pulsante wishlist anche sui prodotti che non hanno prezzo, sono esauriti o sono in modalità catalogo. Questi prodotti normalmente nascondono il modulo Aggiungi al carrello di WooCommerce, quindi il pulsante viene posizionato in un punto vicino nel riepilogo del prodotto invece di scomparire.
L'impostazione successiva è Modalità di configurazione. Scegli Usa predefiniti per selezionare tra combinazioni di stili pronte all'uso, Impostazioni personalizzate per impostare tu stesso colori, bordi e testo, o Predefinito tema per ereditare l'aspetto dei pulsanti del tuo tema attivo.
Imposta colori e bordi dei pulsanti
I campi colore e bordo appaiono sotto Personalizza il pulsante della wishlist nella pagina prodotto, e solo quando Modalità di configurazione è impostata su Impostazioni personalizzate. Ogni campo colore apre un selettore di colori.
| Campo | Cosa cambia | Predefinito |
|---|---|---|
| Colore testo pulsante | Il colore del testo del pulsante. Si applica ai tipi di pulsante che mostrano testo. | #1F2937 |
| Colore testo al passaggio del mouse sul pulsante | Il colore del testo mentre un acquirente passa il mouse sul pulsante. | #DC2626 |
| Colore sfondo pulsante | Il colore di riempimento dietro il pulsante. | #FFFFFF |
| Colore sfondo al passaggio del mouse sul pulsante | Il colore di riempimento mentre un acquirente passa il mouse sul pulsante. | #F9FAFB |
| Colore bordo pulsante | Il colore del bordo del pulsante. | #E5E7EB |
| Colore bordo al passaggio del mouse sul pulsante | Il colore del bordo mentre un acquirente passa il mouse sul pulsante. | #DC2626 |
| Spessore bordo pulsante | Lo spessore del bordo in pixel, da 0 a 5. | 1 |
| Raggio bordo pulsante | Quanto sono arrotondati gli angoli del pulsante, in pixel, da 0 a 50. Usa 0 per angoli quadrati. | 4 |
| Spaziatura verticale pulsante | Lo spazio sopra e sotto il contenuto del pulsante, in pixel, da 0 a 30. | 3 |
| Spaziatura orizzontale pulsante | Lo spazio a sinistra e a destra del contenuto del pulsante, in pixel, da 0 a 40. | 8 |
Non tutti i campi si applicano a ogni tipo di pulsante. Il colore e lo spessore del bordo vengono visualizzati solo su Solo testo e sui tre tipi di pulsante Pill. I colori di sfondo, il raggio del bordo e la spaziatura non si applicano a Solo icona, Icona piena o Icona minima.
Scegli il tipo di pulsante e lo stile del testo
Altri tre campi si trovano in fondo alle impostazioni personalizzate. Dimensione testo pulsante imposta la dimensione del testo del pulsante in pixel, da 10 a 24 (predefinito 14). Stile testo pulsante alterna il testo tra Normale (predefinito) e Corsivo.
Tipo pulsante decide cosa mostra il pulsante e come appare. Il predefinito è Icona e testo minimi. Le opzioni sono:
- Solo testo
- Solo icona
- Icona e testo
- Icona e testo a pillola
- Icona piena
- Icona piena e testo
- Icona piena e testo a pillola
- Icona minimale
- Icona minimale e testo
- Icona minimale e testo a pillola
Solo icona, Icona piena e Icona minima mostrano solo l'icona, quindi il testo, lo sfondo, il bordo e i campi di spaziatura non hanno nulla da cambiare per loro. Per scegliere la forma dell'icona stessa, vedi Scelta di un'icona del pulsante di seguito.
Suggerimento Pro: Con Impostazioni personalizzate selezionato, usa l'anteprima live per vedere come appare il tuo pulsante sia nello stato normale che al passaggio del mouse prima di salvare le modifiche.
Pagina Negozio
La sezione Pagina Negozio controlla come appaiono i pulsanti della wishlist nelle tue griglie di prodotti, nelle pagine delle categorie e nelle pagine di archivio, ovunque gli acquirenti sfogliano più prodotti contemporaneamente.
Posizionamento pulsante predefinito è in alto a destra dell'immagine del prodotto, ma puoi anche posizionarlo nell'angolo in alto a sinistra, sopra o sotto il pulsante Aggiungi al carrello, o sopra o sotto il titolo del prodotto. Le posizioni negli angoli si adattano meglio alle pagine a griglia. Per nascondere il pulsante wishlist nelle pagine negozio, categoria e archivio, scegli Non mostrare.
Come la sezione Pagina prodotto, ha l'opzione Modalità configurazione. Scegli Usa predefiniti per una configurazione rapida con combinazioni pronte all'uso, Impostazioni personalizzate per mettere a punto ogni colore, dimensione del carattere, larghezza del bordo e stile del testo per abbinarli al marchio del tuo negozio, o Predefinito tema per ereditare l'aspetto del pulsante del tuo tema attivo. I campi personalizzati corrispondono a quelli della Pagina prodotto, tranne per il fatto che Tipo pulsante qui si chiama Stile pulsante.
Suggerimento Pro: Per una pagina negozio elegante e moderna, seleziona Impostazioni personalizzate, imposta Stile pulsante su Solo icona e usa un posizionamento nell'angolo in alto. Risparmia spazio mantenendo visibile l'opzione wishlist.
Utilizzo del pulsante con i page builder
Se costruisci il layout del tuo negozio o delle categorie con i widget Loop Grid o Loop Carousel di Elementor Pro, il pulsante della wishlist viene visualizzato automaticamente all'interno di ogni scheda prodotto, utilizzando il posizionamento impostato sopra in Pagina Negozio. Non è necessaria alcuna impostazione separata, ma Elementor Pro deve essere attivo.
Anche le griglie e i caroselli di prodotti di Premium Addons for Elementor ottengono il pulsante automaticamente, seguendo il posizionamento della tua Pagina Negozio. In alto a destra dell'immagine del prodotto e In alto a sinistra dell'immagine del prodotto mostrano il pulsante in alto nell'area dei dettagli della scheda invece che sull'immagine. Vedi Come aggiungere il pulsante della wishlist con il widget Elementor per i dettagli.
Se stai posizionando il pulsante da solo con i widget o i moduli del tuo builder invece di queste impostazioni, consulta la guida dedicata per il tuo builder: Come aggiungere il pulsante wishlist con il widget Elementor, Come aggiungere la wishlist ai layout di Divi Builder, o Come aggiungere la wishlist a una pagina con UX Builder di Flatsome.
Utilizzo del pulsante con Blocksy
Se il tuo negozio utilizza il tema Blocksy o un tema child di Blocksy, non avrai bisogno di alcun CSS personalizzato. SaveTo Wishlist carica automaticamente il proprio stile Blocksy, quindi il pulsante si adatta alle pagine dei prodotti del negozio, d'archivio e singole di Blocksy.
Nella Pagina Negozio, ogni posizionamento funziona in questo modo su Blocksy:
- In alto a destra dell'immagine del prodotto, l'impostazione predefinita, è la più adatta, perché Blocksy utilizza l'angolo in alto a sinistra della card per il suo badge Saldo.
- In alto a sinistra dell'immagine del prodotto sposta il pulsante sotto un badge Saldo, esaurito o personalizzato di Blocksy, in modo che non lo copra. Se il badge è molto grande, o se mostri più badge in quell'angolo, usa In alto a destra dell'immagine del prodotto.
- Sia Sopra il titolo del prodotto che Sotto il titolo del prodotto mostrano il pulsante tra l'immagine del prodotto e il titolo, perché Blocksy renderizza il proprio titolo. Sopra il pulsante Aggiungi al carrello lo mostra direttamente sotto il titolo. Sotto il pulsante Aggiungi al carrello lo mostra dopo il pulsante Aggiungi al carrello. Tutti e quattro seguono l'allineamento della tua card Blocksy: sinistra, centro o destra.
Nella Pagina Prodotto, tutti e sette i posizionamenti funzionano. Allineato con il pulsante Aggiungi al carrello si posiziona accanto al pulsante Aggiungi al carrello sul desktop e si sposta sotto di esso su schermi stretti. In alto a sinistra dell'immagine del prodotto si sposta anche sotto un badge in quell'angolo, come sulla pagina del negozio.
Utilizzo del pulsante con Quick View per WooCommerce
Se il tuo negozio utilizza Reno Quick View di ShapedPlugin (precedentemente Quick View per WooCommerce), il pulsante Salva nella Wishlist appare anche all'interno del popup quick view. I clienti possono salvare un prodotto senza aprire la sua pagina prodotto. Questo richiede SaveTo Wishlist Lite 1.1.7 o versioni successive.
Il popup utilizza il posizionamento e lo stile della tua Pagina Prodotto, quindi non c'è nulla di aggiuntivo da configurare. Alcune cose funzionano in modo leggermente diverso nel popup:
- In alto a destra dell'immagine del prodotto e In alto a sinistra dell'immagine del prodotto mostrano il pulsante sopra il titolo del prodotto, non sull'immagine.
- Su un prodotto variabile, il pulsante segue la variazione scelta dal cliente nel popup.
- Se il posizionamento della Pagina Prodotto è Non mostrare, anche il popup non mostra il pulsante.
Per mantenere il pulsante fuori dal popup ma lasciarlo sulle tue pagine prodotto:
- Vai su SaveTo Wishlist → Impostazioni → Posizionamento e Stili Pulsante → Impostazioni Pulsante.
- Disattiva Mostra in Quick View per WooCommerce.
- Fai clic su Salva Modifiche.
L'interruttore è attivo per impostazione predefinita. Appare solo quando Quick View per WooCommerce è attivo.
Pagina Carrello
La sezione Pagina Carrello è per il pulsante “Salva Carrello nella Wishlist”, il pulsante che consente agli acquirenti di salvare l'intero carrello in una volta. È ottimo per i clienti che vogliono tornare più tardi o condividere le loro scelte.
L'etichetta Etichetta pulsante carrello è predefinita come “Salva carrello nella lista dei desideri”. Puoi cambiarla in qualcosa di più amichevole come Salva carrello per dopo o ♥ Salva il mio carrello. Le stesse opzioni di stile del pulsante, colore, bordo e testo disponibili nelle pagine del prodotto e del negozio si applicano qui, in modo da poter mantenere la coerenza in tutto il tuo negozio.
Questa sezione ha anche l'opzione Modalità configurazione: scegli Usa predefiniti per una configurazione rapida, Impostazioni personalizzate per controllare tu stesso colori, bordi e testo, o Predefinito tema per ereditare l'aspetto del pulsante del tuo tema attivo. Come nella Pagina negozio, Tipo pulsante qui si chiama Stile pulsante.
Scelta di un'icona per il pulsante
Passando la Modalità di configurazione a Impostazioni personalizzate sulla pagina Prodotto, Negozio o Carrello rivela un'impostazione Icona pulsante per quella pagina. Scegli tra Cuore (predefinito), Stella, Segnalibro o Più, oppure scegli Immagine personalizzata per rivelare un caricatore Icona pulsante personalizzata. Il pulsante continuerà a mostrare un cuore finché non verrà caricata un'immagine.
Le stesse impostazioni personalizzate includono anche Colore icona pulsante e Colore icona al passaggio del mouse (entrambi #DC2626 per impostazione predefinita), e Dimensione icona pulsante, da 12 a 40 pixel (predefinito 20). I campi del colore dell'icona sono nascosti quando scegli Immagine personalizzata, perché non possono modificare un'immagine caricata.
Caricamento CSS frontend
L'impostazione Caricamento CSS frontend controlla quanto del foglio di stile del plugin viene caricato sul tuo storefront. La troverai in SaveTo Wishlist → Impostazioni → Posizionamento pulsanti e stili → Stile frontend.
Ci sono tre opzioni:
- Stile completo: usa i colori e i font del plugin (predefinito). Carica il foglio di stile completo del plugin. Funziona subito per la maggior parte dei negozi.
- Stile minimo: lascia che il tuo tema sovrascriva colori e font. Carica colori e sfondi senza override
!important, in modo che il CSS del tuo tema possa prevalere dove è in conflitto. Prova prima questa opzione se il pulsante della lista dei desideri è in conflitto con il tuo tema. - Nessuno stile: eredita colori e font dal tema attivo. Rimuove colori e font del plugin in modo che il pulsante li prenda dal tuo tema. Ideale per sviluppatori che eseguono una build completamente personalizzata. Le dimensioni, le posizioni e il CSS di layout del pulsante del plugin sono preservati in ogni modalità.
Riepilogo
Usa Azione Wishlist (Impostazioni → Generali) per controllare cosa succede dopo un clic. Usa Posizionamento e stili pulsante per impostare etichette, posizionamento, colori e caricamento CSS per ogni pagina in cui appare il pulsante.
Migliori pratiche
- Abbina colori e stile del pulsante al tema del tuo negozio
- Mantieni le etichette brevi e orientate all'azione
- Testa i pulsanti su dispositivi mobili per leggibilità e dimensioni del tocco
- Usa l'anteprima live per confermare le tue impostazioni prima di salvare
Risoluzione dei problemi
Lo stile del pulsante non si aggiorna dopo il salvataggio
Se modifichi le impostazioni e il pulsante appare uguale sul frontend, prova a cambiare la Modalità di configurazione da Usa preset a Impostazioni personalizzate (o viceversa) e salva di nuovo. Svuota anche la cache di eventuali plugin di caching o la cache CDN. Il CSS memorizzato nella cache può impedire la visualizzazione delle modifiche di stile.
Il pulsante della wishlist è in conflitto con il CSS del tema
Se il pulsante appare danneggiato o è in conflitto con gli stili del tuo tema, vai su SaveTo Wishlist → Impostazioni → Posizionamento pulsanti e stili → Stile frontend e cambia Caricamento CSS frontend da Stile completo a Stile minimo. Questo permette al CSS del tuo tema di sovrascrivere colori e font dove sono in conflitto. Per una build completamente personalizzata, Nessuno stile ti offre una base pulita.
Pulsante Wishlist mancante dal popup quick view
Vai su SaveTo Wishlist → Impostazioni → Posizionamento e Stili Pulsante → Impostazioni Pulsante e verifica che Mostra in Quick View per WooCommerce sia attivo. Quindi verifica che il posizionamento della Pagina Prodotto non sia impostato su Non mostrare. Se solo gli acquirenti non registrati non riescono a vederlo, Disabilita Wishlist Ospite sotto Impostazioni → Opzioni Ospite è probabilmente attivo, il che nasconde il pulsante agli ospiti ovunque.
Domande frequenti
Qual è la differenza tra Usa preset e Impostazioni personalizzate?
I preset offrono un set di combinazioni di stili già pronti, quindi un clic applica un look coordinato. Le impostazioni personalizzate sbloccano controlli individuali per colore, dimensione del font, larghezza del bordo, icona ed effetti al passaggio del mouse, in modo da poter perfezionare tutto manualmente.
Cosa fa Fade visivamente?
Nelle pagine dei prodotti e del negozio, fare clic sul pulsante della wishlist mostra un piccolo messaggio di conferma (un'icona di spunta e “Aggiunto a [nome wishlist]”) che appare gradualmente accanto al pulsante, rimane per circa due secondi, quindi scompare gradualmente. Il pulsante stesso rimane visibile per tutto il tempo. Nella pagina del carrello, il pulsante Salva carrello nella wishlist svanisce brevemente per confermare il salvataggio. Non ci sono popup né reindirizzamenti della pagina.
Le mie personalizzazioni verranno mantenute se cambio tema?
Sì. Gli stili dei pulsanti sono salvati nelle impostazioni del plugin, non nel tuo tema. Il cambio di tema non reimposterà il testo dell'etichetta, i colori o le scelte di posizionamento. Detto questo, alcuni temi sovrascrivono gli stili dei pulsanti con il proprio CSS, quindi vale la pena controllare l'aspetto dopo una modifica del tema.
Serve aiuto?
- Utenti Premium: Apri un ticket di supporto
- Utenti Gratuiti: Visita il nostro forum della community
