Vorresti che la tua pagina di checkout assomigliasse al resto del tuo negozio invece che a un modulo predefinito? Easy Digital Downloads funziona con il page builder Elementor, così puoi ridefinire ogni parte del tuo checkout senza toccare il codice.
Questa guida ti accompagna attraverso il blocco EDD Checkout, il widget EDD Checkout in Elementor e i singoli widget di checkout che utilizzi per ridefinire e riorganizzare la pagina.
Requisiti: I widget Elementor seguenti richiedono il plugin Elementor installato e attivato, e la funzione Contain impostata su Attiva nella schermata Elementor Editor » Impostazioni » Funzionalità.
Partire da un modello di checkout
Se preferisci non creare un checkout da zero, puoi importare un modello di checkout pronto e poi modificarlo con tutto ciò che precede. Ogni modello importato posiziona per te i quattro widget del checkout, quindi i passaggi di stile e riordino in questa guida si applicano direttamente ad esso.
I modelli arrivano con intestazioni segnaposto e testo di esempio attorno ai campi di pagamento attivi, quindi la sostituzione di quel testo con il tuo è solitamente la prima modifica che farai.
Configurazione del blocco EDD Checkout
La pagina Checkout viene creata per te quando attivi Easy Digital Downloads. Si trova nell'elenco delle pagine di WordPress come Checkout e utilizza il blocco EDD Checkout.
Nota: Il Blocco EDD Checkout e le sue impostazioni sono disponibili per ogni utente, indipendentemente dal fatto che tu utilizzi Elementor o meno.
Apri la pagina Checkout e le impostazioni del blocco appariranno sulla destra.
Inizia con l'impostazione Anteprima come Ospite, che ti consente di verificare l'esperienza sia dei visitatori occasionali che dei clienti abituali. Ottieni anche un'anteprima in tempo reale della pagina di checkout e del modulo della carta di credito direttamente nell'editor.
Scegli uno dei tuoi prodotti dal menu Seleziona un Prodotto per vedere come appare il modulo con qualcosa nel carrello.
Le impostazioni del blocco ti consentono di modificare il layout, regolare le dimensioni delle miniature del carrello e mostrare o nascondere il modulo sconto.
Modifica del tuo checkout con Elementor
Elementor crea il proprio widget EDD Checkout, che ti offre un controllo di progettazione molto più approfondito rispetto al solo blocco.
Accesso all'editor di Elementor
Con il plugin Elementor installato e attivato, la tua pagina Checkout offre un'opzione Modifica con Elementor.
Selezionandola si apre l'editor di Elementor.
Aggiunta del widget EDD Checkout
Nel pannello degli elementi a sinistra, cerca EDD Checkout, quindi trascinalo sulla tua pagina.
Un widget appena aggiunto rimane vuoto finché non scegli un layout, che è il passaggio successivo. Una volta fatto, renderizza un'anteprima live del tuo modulo di checkout, così puoi vedere le tue modifiche mentre le fai invece di pubblicare e controllare il front-end.
Questo widget è il contenitore per l'intero checkout. Le sue impostazioni si trovano sotto tre schede: Layout, Stile e Avanzate.
Scelta di un layout di checkout
Nella scheda Layout, apri Layout Checkout. Hai a disposizione cinque disposizioni predefinite tra cui scegliere, che coprono design a colonna singola e a due colonne, e interruttori per mostrare o nascondere il carrello e il modulo sconto.
Nota: Elementor ti avvisa che cambiare layout sostituisce tutti i contenuti del widget. Scegli il tuo layout prima di investire tempo nello stile, in modo che il tuo lavoro venga mantenuto.
Personalizzazione del contenitore del checkout
La scheda Stile gestisce il checkout nel suo complesso, con sezioni per Sfondo, Sovrapposizione Sfondo, Bordo, Divisore di Forma e Elementi Modulo.
Shape Divider è quello che vale la pena conoscere, perché aggiunge una forma decorativa al bordo superiore o inferiore del tuo checkout invece di un confine piatto. Scegli un bordo, quindi scegli una forma.
Personalizzazione dei singoli widget di checkout
Il tuo checkout è composto da quattro widget separati: il carrello, le informazioni personali, le informazioni di pagamento e il modulo di sconto. Ognuno ha le proprie impostazioni, il che ti consente di stilizzare una parte del checkout senza disturbare il resto.
Non troverai questi quattro nel pannello degli elementi, perché non li aggiungi manualmente. Arrivano come parte del widget EDD Checkout. Per accedere alle loro impostazioni, seleziona il pezzo che desideri direttamente sulla pagina.
Il widget carrello
Nella scheda Contenuto, il carrello ti offre un interruttore Intestazione Carrello, un interruttore Anteprima Articolo Carrello e un cursore Dimensione per tali anteprime.
La sua scheda Stile è la più approfondita delle quattro. I controlli sono raggruppati in Intestazione Carrello, Articoli Carrello e Righe Piè di Pagina, in modo da poter stilizzare i totali in modo diverso dagli articoli sopra di essi.
Il widget informazioni personali
Questo widget copre i campi nome ed email, oltre ai collegamenti di accesso e registrazione. La sua scheda Contenuto include Anteprima come Ospite, Allineamento Account e un'opzione Nome Riga Singola che mette nome e cognome su una riga.
Il widget informazioni di pagamento
Questo si occupa dell'area di pagamento. La sua scheda Stile raggruppa i controlli in Pulsante Acquisto, Selettore Gateway, Metodo di Pagamento e Dettagli Carta, in modo che il pulsante su cui cliccano i tuoi clienti possa essere stilizzato da solo.
Il modulo sconto
Il modulo di sconto ha un'unica impostazione di contenuto, Mostra Campo Sconto, e una scheda Stile approfondita che copre il link di attivazione, il campo stesso e il pulsante di applicazione.
Riorganizzazione del tuo checkout
Poiché ogni parte del checkout è un widget a sé stante, puoi cambiare l'ordine in cui appaiono le cose. Seleziona un widget, apri la scheda Avanzate, quindi apri Layout. Il controllo Ordine sposta quell'elemento all'inizio o alla fine del suo contenitore, e un'opzione personalizzata ti consente di impostare una posizione esatta.
Il modo più rapido per selezionare il pezzo desiderato è il pannello Struttura di Elementor, che elenca ogni elemento della pagina. Selezionarne uno lì lo evidenzia sulla tela e carica le sue impostazioni.
Quando sei soddisfatto del risultato, seleziona la freccia accanto a Pubblica, quindi scegli Salva Bozza, Salva come Modello o Visualizza Pagina. Seleziona Pubblica stesso per rendere live le tue modifiche.
Risoluzione dei problemi
Se non vedi il blocco EDD Checkout o le impostazioni del widget descritte sopra, ci sono alcune opzioni da provare.
Il primo è verificare se l'esperimento Flexbox Container di Elementor è attivo. Da Elementor » Editor » Impostazioni » Funzionalità e assicurati che l'opzione Container sia impostata su Attivo.
Inoltre, assicurati che il tuo plugin Easy Digital Downloads sia aggiornato. Controlla gli aggiornamenti in Bacheca » Aggiornamenti.
I singoli widget del checkout e il selettore di layout richiedono Easy Digital Downloads 3.7.0 o superiore. I widget di Elementor richiedono Elementor 3.35.0 o superiore. Altrimenti, potresti vedere un widget chiamato EDD Checkout (Legacy). Continua a funzionare e le sue impostazioni sono raggruppate su un unico widget anziché essere suddivise tra i quattro descritti sopra. Aggiungi l'attuale widget EDD Checkout a una pagina per passare alle impostazioni più recenti.
Per qualsiasi cosa specifica sui controlli di Elementor, la knowledge base dei widget di Elementor li copre in dettaglio.
FAQ: Personalizzazione di EDD Checkout con Elementor
Ecco le risposte ad alcune domande comuni sulla personalizzazione del checkout EDD in Elementor.
Ho bisogno della versione a pagamento di Elementor?
No. Il plugin gratuito di Elementor è sufficiente per il widget EDD Checkout e per tutte le impostazioni trattate qui.
Perché non riesco a trovare il carrello o il modulo sconto nel pannello degli elementi?
Questi quattro widget non vengono aggiunti manualmente. Vengono forniti come parte del widget EDD Checkout, quindi si accede alle loro impostazioni selezionandoli sulla pagina anziché trascinandoli.
Il cambio del layout del checkout annullerà la mia personalizzazione?
Può succedere. Elementor avvisa che il cambio del layout sostituisce tutti i contenuti del widget, quindi scegli il tuo layout per primo e personalizzalo in seguito.
Posso cambiare l'ordine delle sezioni del checkout?
Sì. Seleziona il widget che desideri spostare, quindi utilizza il controllo Ordine nella scheda Avanzate sotto Layout.
Il checkout funziona ancora senza Elementor?
Sì. Il blocco EDD Checkout gestisce il tuo checkout autonomamente e le sue impostazioni sono disponibili per ogni utente. Elementor aggiunge il controllo del design sopra di esso.
