La tua pagina della wishlist è spesso l'ultima tappa per un cliente prima che decida di acquistare. Se quella pagina sembra un plugin generico che stride con i colori e i font del tuo brand scelti con cura, può creare una "disconnessione" che danneggia la fiducia.
Per impostazione predefinita, la pagina della wishlist utilizza uno schema di colori blu che non sempre corrisponde a ogni tema di WordPress. Le impostazioni Personalizzazione stile pagina wishlist di SaveTo Wishlist ti consentono di modificare la tipografia e i colori della pagina della wishlist in modo che corrispondano al branding del tuo negozio, senza scrivere alcun CSS.
Questa guida illustra le impostazioni di stile disponibili e come applicarle.
💡 Nota:
Queste impostazioni influiscono specificamente sulla Pagina Wishlist principale (dove i clienti visualizzano i loro articoli salvati) anziché sui pulsanti "Aggiungi alla Wishlist" presenti nelle pagine dei prodotti.
🔗 Risorsa esterna:
Se non sei sicuro di quali colori utilizzare, ti consigliamo di consultare Adobe Color per l'ispirazione di palette accessibili.
Prerequisiti
Prima di iniziare, assicurati di avere:
- SaveTo Wishlist Lite installato e attivato sul tuo negozio
- Una pagina della wishlist già configurata (il plugin ne crea una automaticamente all'attivazione)
Passo dopo passo: Progettare la tua pagina wishlist personalizzata
1. Individua le impostazioni di stile
Tutti i tuoi strumenti di progettazione sono raggruppati per un facile accesso.
- Vai su SaveTo Wishlist → Impostazioni.
- Fai clic sulla scheda Pagina Wishlist e scorri fino alla sezione Stili.
2. Personalizza intestazioni e titoli
L'intestazione è la prima cosa che i tuoi clienti vedono. Falla risaltare:
- Dimensione e colore del titolo dell'intestazione: Regola la Dimensione del titolo dell'intestazione e il Colore del titolo dell'intestazione per farli corrispondere ai tag H1 o H2 principali del tuo sito.
- Dimensione e colore del testo dell'intestazione: Controlla l'area del sottotesto o della descrizione per assicurarti che sia leggibile e corrisponda al colore del font del corpo del tuo brand.
3. Stile della tabella della wishlist
È qui che risiedono i dati del prodotto. Ora puoi perfezionare l'aspetto "tecnico" dell'elenco:
- Dimensione testo colonne tabella: Cambia la dimensione del testo per le intestazioni come "Nome prodotto" o "Prezzo".
- Dimensione testo righe tabella: Regola la dimensione del font dei dettagli dell'articolo all'interno dell'elenco per una migliore leggibilità su desktop e mobile.
4. Progetta la modale popup
Se utilizzi l'azione Popup, assicurati che la finestra corrisponda all'estetica del tuo sito:
- Dimensione e colore titolo popup: Imposta la dimensione del font e il colore del titolo del tuo popup.
- Dimensione e colore testo popup: Usa questi controlli per assicurarti che le istruzioni siano chiare.
- Pulsanti Salva e Annulla popup: Usa i selettori di colore per i pulsanti Salva e Annulla.
💡 Nota:
Usa il colore principale del tuo brand per il pulsante Salva, poiché attira l'attenzione sull'azione.
5. Stile dei pulsanti
Regola le dimensioni e i colori dei pulsanti nella pagina della wishlist:
- Dimensione testo pulsante: Rendi il tuo pulsante “Aggiungi al carrello” più grande o più piccolo per adattarlo al tuo linguaggio di design.
- Colore testo pulsante: Assicurati un elevato contrasto (ad es. testo bianco su sfondo scuro) selezionando un colore personalizzato.
- Colore sfondo pulsante: Cambia il blu predefinito con il colore principale del tuo brand.
6. Anteprima e salva
- Fai clic su Salva Modifiche in fondo alla pagina.
- Apri la tua pagina wishlist in una nuova finestra di navigazione in incognito per vedere le modifiche esattamente come le vedranno i tuoi clienti.
✨ Suggerimento bonus: Corrispondenza dei link della wishlist
Per impostazione predefinita, i link sulla tua pagina Wishlist (come i titoli dei prodotti) solitamente ereditano le impostazioni globali dei link del tuo tema. Se desideri modificare questi colori per abbinarli meglio ai tuoi nuovi stili dei pulsanti, in genere puoi trovare queste impostazioni nella tua Bacheca WordPress sotto Aspetto → Personalizza → Tipografia → Colore link / accento.
💡 Nota:
Ogni tema è costruito in modo diverso! A seconda del tema che hai installato, questa impostazione potrebbe trovarsi anche sotto “Colori globali” o “Stili pulsanti e link”.
Lasciare che il tuo tema controlli lo stile
Le impostazioni di Stile sopra ti danno il controllo tramite le opzioni di colore e font del plugin stesso. Ma se preferisci lasciare che il tuo tema detti tutto ciò, o se il CSS del tuo tema sta già facendo il grosso del lavoro, puoi dire a SaveTo Wishlist di farsi da parte.
Vai su SaveTo Wishlist → Impostazioni → Posizionamento e stili dei pulsanti → Stile frontend. Lì troverai l'impostazione Caricamento CSS frontend con tre opzioni:
- Stile completo — usa i colori e i font del plugin (predefinito). Il plugin carica il suo foglio di stile completo di colori e font. Questa è l'esperienza standard.
- Stile minimo — lascia che il tuo tema sovrascriva colori e font. Il foglio di stile viene comunque caricato, ma
!importantnon viene utilizzato su proprietà decorative come colore, sfondo e bordo, quindi il CSS del tuo tema può vincere la cascata. - Nessuno stile — eredita colori e font dal tema attivo. Dimensioni, posizioni e layout dei pulsanti sono preservati in ogni modalità. Cambia solo lo stile visivo.
💡 Nota:
Gli stili dell'amministratore non sono interessati da questa impostazione. Controlla solo come viene caricato il foglio di stile frontend per i tuoi clienti.
Prima e dopo: Abbinare la pagina wishlist al tuo branding
Di seguito viene mostrato un confronto prima e dopo, che illustra come la pagina wishlist può essere personalizzata per abbinarsi meglio al tema del tuo negozio.
Passare dalla visualizzazione tabella a quella griglia
I tuoi clienti non sono bloccati in un unico layout. Sulla pagina wishlist, vedranno un selettore di visualizzazione accanto alla barra di ricerca. Un clic passa dalla visualizzazione standard a tabella a una visualizzazione a griglia (a riquadri).
La visualizzazione a griglia mostra gli articoli della wishlist come riquadri di prodotto reattivi. Il layout si adatta alla larghezza dello schermo, mostrando una singola colonna sugli schermi mobili piccoli e passando a due, poi tre e infine quattro colonne sugli schermi più larghi. Ogni riquadro mostra l'immagine del prodotto, il nome, il prezzo, lo stato dello stock, la quantità e un pulsante Aggiungi al carrello. Tutte le solite azioni dell'articolo (il menu a tre punti) sono ancora disponibili.
Qualunque visualizzazione scelga un cliente viene salvata nel suo browser, quindi sarà ancora lì la prossima volta che visiterà dallo stesso dispositivo.
Risoluzione dei problemi del tuo design
Le mie modifiche non vengono visualizzate sul sito
Ciò è quasi sempre dovuto alla cache. Se utilizzi un plugin come WP Rocket, LiteSpeed Cache o un CDN come Cloudflare, assicurati di Svuotare/Pulire la Cache dopo aver salvato i tuoi stili. Puoi anche fare riferimento alla guida ufficiale di WooCommerce sulla cache.
Lo stile del carattere non corrisponde esattamente al mio tema
Il plugin utilizza per impostazione predefinita la famiglia di caratteri ereditata dal tuo tema. Queste impostazioni ti consentono di modificare la dimensione e il colore. Se la famiglia di caratteri stessa sembra errata, assicurati che il CSS globale del tuo tema venga caricato correttamente.
I colori appaiono diversi sul cellulare
Verifica se il tuo telefono ha la modalità "Dark Mode" attivata, poiché alcuni browser tentano di invertire automaticamente i colori. I colori impostati nelle impostazioni di stile sono progettati per sovrascrivere la maggior parte di queste regolazioni automatiche del browser.
Domande frequenti
➤ Ho bisogno di conoscere il CSS per cambiare questi colori?
Assolutamente no! Abbiamo creato un'interfaccia user-friendly con selettori di colore e slider, quindi non dovrai mai toccare una riga di codice.
➤ Queste impostazioni rallenteranno la mia pagina?
No. Questi stili sono leggeri e non influenzeranno in modo percettibile il caricamento della pagina.
Serve aiuto?
- Utenti Premium: invia un ticket di supporto e il nostro team ti aiuterà.
- Utenti gratuiti: pubblica nel forum di supporto di WordPress.org.
