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 e etichetta mostrata dopo che un prodotto è stato aggiunto
- Stile Frontend – l'impostazione Caricamento CSS Frontend che controlla quanto CSS del plugin viene caricato sul tuo storefront (trattato nella sezione Caricamento CSS Frontend sottostante)
- Pagina Prodotto – posizionamento e stile del pulsante nelle pagine dei singoli prodotti
- Pagina Negozio – posizionamento e stile del pulsante negli elenchi dei prodotti
- Pagina Carrello – stile ed etichetta per il pulsante “Salva Carrello nella Wishlist”
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.
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 è Sotto il pulsante Aggiungi al carrello, ma puoi anche scegliere Sopra il pulsante Aggiungi al carrello, Sopra il titolo del prodotto, Sotto il titolo del prodotto, In alto a destra dell'immagine del prodotto o In alto a sinistra dell'immagine del prodotto.
⚠️ Prodotti senza prezzo o esauriti: Dalla versione 1.0.7, i posizionamenti Sopra il pulsante Aggiungi al carrello e Sotto il pulsante Aggiungi al carrello mostrano il pulsante della wishlist anche per i prodotti che non hanno prezzo, sono esauriti o sono in modalità catalogo. Questi prodotti normalmente nascondono il modulo WooCommerce Aggiungi al carrello, quindi il pulsante ora viene visualizzato in una posizione vicina nel riepilogo del prodotto invece di scomparire.
L'impostazione successiva è l'opzione Modalità di configurazione. Scegli Usa predefiniti per selezionare tra combinazioni di stili già pronte, oppure scegli Impostazioni personalizzate per accedere manualmente al selettore di colori completo, ai font e ai controlli delle dimensioni.
Suggerimento Pro: Usa l'anteprima dal vivo per vedere come appare il tuo pulsante negli stati normale e 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 del pulsante è impostato di default sotto il pulsante Aggiungi al carrello, ma puoi anche posizionare il pulsante negli angoli in alto delle immagini dei prodotti o sopra/sotto i titoli dei prodotti. Per un look pulito e moderno nelle pagine a griglia, la posizione nell'angolo in alto tende a funzionare molto bene.
Come la sezione Pagina Prodotto, ha l'opzione Modalità di configurazione. Scegli Usa predefiniti per una configurazione rapida con combinazioni già pronte, oppure Impostazioni personalizzate per mettere a punto ogni colore, dimensione del font, larghezza del bordo e stile del testo per abbinarlo al branding del tuo negozio.
Suggerimento Pro: Per una pagina negozio elegante e moderna, prova i pulsanti Solo icona negli angoli in alto. Risparmia spazio mantenendo visibile l'opzione wishlist.
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 è impostata di default su “Salva Carrello nella Wishlist”. Puoi cambiarla in qualcosa di più amichevole come Salva Carrello per Dopo o ♥ Salva il Mio Carrello. Le stesse opzioni di stile, colore, font e dimensione disponibili nelle pagine prodotto e negozio si applicano qui, quindi puoi mantenere le cose coerenti in tutto il tuo negozio.
Anche questa sezione ha l'opzione Modalità di configurazione: scegli Usa predefiniti per una configurazione rapida, oppure Impostazioni personalizzate per controllare tu stesso colori, font e dimensioni.
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 sovrascritture
!important, in modo che il CSS del tuo tema possa prevalere dove è in conflitto. Prova prima questa opzione se il pulsante della wishlist è in conflitto con il tuo tema. - Nessuno stile — eredita colori e font dal tema attivo. Rimuove i colori e i font del plugin in modo che il pulsante li prenda dal tuo tema. Ideale per sviluppatori che realizzano 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 → Generale) per controllare cosa succede dopo un clic. Usa Posizionamento pulsanti e stili per impostare etichette, posizionamento, colori e caricamento CSS per ogni pagina in cui appare il pulsante, con Redirigi, Popup o Dissolvenza che controllano cosa succede dopo un clic.
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.
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
