Stai creando le tue pagine prodotto in Elementor e il pulsante della wishlist non si posiziona dove vuoi? SaveTo Wishlist fornisce un widget nativo per Elementor, così puoi trascinare il pulsante esattamente dove appartiene invece di fare affidamento sul posizionamento automatico del plugin. Questa guida copre l'aggiunta del widget, la sua stilizzazione, il suo utilizzo all'interno delle griglie prodotto e la risoluzione dei problemi che si presentano più spesso.
Cosa ti servirà
- Elementor, gratuito o Pro.
- SaveTo Wishlist versione Lite 1.1.3 o successiva. Le versioni precedenti non includono il widget.
- WooCommerce, con almeno un prodotto pubblicato.
- Un template o una pagina che ha un prodotto con cui lavorare, come un template di singolo prodotto o un loop di prodotti.
Il widget legge le tue impostazioni della wishlist esistenti, quindi non c'è nulla da configurare prima. Trascinalo su un template e renderà lo stesso pulsante che il tuo negozio mostra già.
Aggiungi il widget a un template prodotto
- Apri il template o la pagina prodotto che vuoi modificare in Elementor.
- Nel pannello dei widget, cerca Salva nella Wishlist.
- Trascina il widget sul tuo layout dove vuoi che appaia il pulsante.
- Fai clic su Aggiorna per salvare.
Il widget appare sia nella categoria WooCommerce che in quella Generale nel pannello, quindi una delle due funziona se preferisci sfogliare piuttosto che cercare.
Il pulsante viene visualizzato immediatamente utilizzando le tue impostazioni attuali della wishlist. Se non appare nulla, consulta la sezione risoluzione problemi qui sotto.
Scegli il tipo di pulsante
Apri la sezione Pulsante Wishlist nella scheda Contenuto. Contiene un'impostazione.
- Imposta Tipo di pulsante sullo stile che desideri.
- Il valore predefinito è lo stile del pulsante prodotto impostato nelle impostazioni della wishlist.
- Modificarlo qui influisce solo su questo widget, non sul resto del tuo negozio.
Sono disponibili dieci stili:
- 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
Le varianti Pill usano angoli completamente arrotondati. Solid riempie la forma dell'icona e Minimal usa un contorno più leggero.
Imposta l'allineamento
L'allineamento si trova nella scheda Stile, dove Elementor mantiene l'allineamento per i propri widget.
- Apri la sezione Layout nella scheda Stile.
- Imposta Allineamento su Sinistra, Centro o Destra.
L'allineamento è impostato su Sinistra per impostazione predefinita.
Cambia i colori del pulsante
Apri la sezione Colori nella scheda Stile. Hai a disposizione otto controlli colore, ognuno con uno stato normale e uno al passaggio del mouse:
- Colore Testo e Colore Testo (Hover)
- Colore Sfondo e Colore Sfondo (Hover)
- Colore Bordo e Colore Bordo (Hover)
- Colore Icona e Colore Icona (Hover)
Ognuno parte dal colore già salvato nelle impostazioni della tua wishlist, quindi un widget non modificato appare esattamente come il resto del tuo negozio. Modificane uno e questo sovrascriverà quel colore solo per questo widget.
I colori sono l'unica cosa che il widget sovrascrive. La dimensione del pulsante, il padding, la larghezza del bordo e la forma dell'icona continuano a provenire dalle impostazioni della tua wishlist, quindi modificali in SaveTo Wishlist > Impostazioni > Posizionamento e Stili Pulsante.
I selettori colore accettano solo colori solidi. Non c'è un cursore di trasparenza né una scheda colori globali, perché il pulsante della wishlist memorizza semplici colori esadecimali.
Mostra il pulsante in Loop Grid e Loop Carousel
Se usi Elementor Pro, il pulsante della wishlist funziona anche all'interno dei widget Loop Grid e Loop Carousel. Hai due modi per inserirlo lì.
Lascia fare al plugin. Il posizionamento del pulsante della tua pagina negozio si applica già alle schede loop, quindi il pulsante appare su ogni scheda senza che tu debba aggiungere nulla.
Posizionalo tu stesso. Modifica il modello dell'elemento loop, quindi aggiungi il widget Salva nella Wishlist al layout della scheda. Questo ti dà il controllo su dove esattamente sulla scheda si trova il pulsante.
Quando posizioni il widget da solo all'interno di un elemento loop, il plugin interrompe il rendering del proprio pulsante automatico su quelle schede, quindi ottieni un pulsante per scheda invece di due. L'unica eccezione è quando il posizionamento del pulsante del tuo negozio è impostato su Non mostrare. In tal caso, il plugin lascia le schede invariate, perché rimuovere il pulsante automatico senza sostituirlo sarebbe un passo indietro.
Quale metodo dovresti usare?
SaveTo Wishlist ti offre tre modi per inserire le funzionalità della wishlist in una pagina e svolgono lavori diversi. La differenza più importante: il widget Elementor posiziona il pulsante su un prodotto, mentre lo shortcode e il blocco visualizzano la wishlist stessa. La maggior parte dei negozi usa entrambi.
Il widget di Elementor posiziona il pulsante Salva nella Wishlist ovunque lo trascini. Usalo quando crei modelli di prodotto in Elementor. È l'unico dei tre con i propri controlli di stile.
Lo shortcode [saveto_wishlist] visualizza la wishlist di un cliente. Usalo quando la wishlist deve apparire al di fuori di un layout di Elementor, come una pagina dell'editor classico, un widget di testo o un builder senza un elemento nativo. Vedi Come usare lo shortcode della Wishlist.
Il blocco della Wishlist svolge lo stesso lavoro dello shortcode, nell'editor a blocchi di WordPress. Usalo quando modifichi pagine con blocchi anziché con un page builder. Vedi Come usare il blocco Gutenberg della Wishlist.
Risoluzione dei problemi
Il pulsante non appare affatto
Procedi con questi in ordine.
- Nessun prodotto nel contesto. Il widget viene visualizzato solo dove WooCommerce ha un prodotto con cui lavorare. Una pagina semplice o un modello non collegato a un prodotto non gli fornisce nulla da visualizzare, quindi rimane vuoto. Posizionalo su un modello di singolo prodotto, un modello di elemento del loop o una pagina che imposta un prodotto.
- Le wishlist per gli ospiti sono disattivate. Se Disabilita Wishlist Ospiti è abilitato nelle impostazioni della tua wishlist e stai visualizzando il sito disconnesso, il pulsante viene nascosto appositamente. Accedi o disattiva quell'impostazione per vederlo.
- SaveTo Wishlist è precedente alla versione 1.1.3. Il widget non esiste nelle versioni precedenti. Aggiorna il plugin.
Appaiono due pulsanti della wishlist nella pagina del prodotto
Questo di solito si risolve da solo. Quando il tuo modello di prodotto Elementor contiene il widget, il plugin annulla la registrazione del proprio posizionamento sul singolo prodotto, quindi viene visualizzato solo il pulsante che hai posizionato.
Prodotti correlati, upsell e cross-sell vengono deliberatamente lasciati invariati, poiché quelle schede vengono visualizzate tramite il posizionamento nel negozio. Se vedi un secondo pulsante su quelli, è il posizionamento nel negozio che fa il suo lavoro. Modificalo in SaveTo Wishlist > Impostazioni > Posizionamento e Stili del Pulsante.
I selettori di colore non hanno effetto
Due impostazioni disattivano i controlli del colore, e ognuna mostra un messaggio nel pannello che spiega il perché.
Se la modalità pulsante prodotto è impostata su Predefinito del Tema, il pulsante eredita lo stile del pulsante del tuo tema e il plugin non applica alcun colore proprio. Cambia la modalità pulsante prodotto in Predefinito nelle impostazioni della wishlist per controllare i colori.
Se la tua icona della wishlist è un'immagine caricata personalizzata, Colore Icona e Colore Icona (Hover) non fanno nulla, perché un'immagine caricata non può essere colorata. Sostituiscila con una forma di icona integrata nelle impostazioni della wishlist se desideri il controllo del colore.
Appare un layout del blog invece della wishlist
Se apri un link della wishlist e vedi il design del tuo archivio post invece della wishlist, un modello di archivio Elementor Theme Builder sta prendendo il sopravvento sulla pagina. Questo accade quando la condizione di visualizzazione di quel modello ha come target l'archivio post, che corrisponde anche alle singole visualizzazioni della wishlist.
Per aggirare il problema:
- Apri Modelli > Theme Builder e seleziona il tuo modello di archivio.
- Apri le sue Condizioni di visualizzazione.
- Rimuovi la condizione che ha come target l'archivio dei post.
- Crea il tuo archivio post come pagina standalone invece che come modello di Theme Builder.
Domande frequenti
Ho bisogno di Elementor Pro per usare il widget?
No. Il widget Salva nella Wishlist funziona in Elementor gratuito. Elementor Pro è necessario solo per i widget Loop Grid e Loop Carousel e per i modelli di Theme Builder.
Il widget sovrascriverà le impostazioni della mia wishlist?
Solo gli otto colori, e solo per quel singolo widget. Anche il tipo e l'allineamento del pulsante sono per widget. Tutto il resto, inclusi dimensioni, spaziatura, spessore del bordo e forma dell'icona, proviene ancora dalle impostazioni della tua wishlist.
Posso usare il widget e il posizionamento automatico insieme?
Sì. Il plugin gestisce la sovrapposizione per te. Su un modello di prodotto contenente il widget, disattiva il proprio posizionamento sul singolo prodotto e, all'interno degli elementi del loop, si disattiva in modo che ogni scheda mostri un pulsante.
Perché non c'è un cursore di trasparenza nei selettori di colore?
Il pulsante della wishlist memorizza solo colori esadecimali solidi. Un colore trasparente o globale verrebbe visualizzato correttamente nell'editor e poi tornerebbe al colore salvato sulla pagina live, quindi tali opzioni sono disattivate piuttosto che lasciate a ingannarti.
Serve aiuto?
Se hai una domanda o riscontri problemi, siamo qui per aiutarti.
- Utenti Premium: Apri un ticket di supporto
- Utenti Gratuiti: Visita il nostro forum della community
