Easy Digital Downloads si dedica a fornire un sistema di eCommerce facile da usare per gli utenti di WordPress. Lavoriamo sodo per raggiungere questo obiettivo quotidianamente. Tuttavia, a causa della sua estensibilità e della variazione inevitabile delle esigenze dei clienti, molte funzionalità vengono lasciate al compito scoraggiante dello sviluppo personalizzato.
Una delle esigenze più comuni che vediamo nel nostro canale di supporto è un modo semplice per creare moduli di checkout personalizzati. Per i non sviluppatori, la creazione di moduli personalizzati è già abbastanza difficile. Introduci la funzionalità eCommerce e anche la folla del fai-da-te fatica.
L'obiettivo di questo articolo è aiutare ogni utente di Easy Digital Downloads, indipendentemente dal livello di competenza, a imparare come creare moduli di checkout personalizzati senza scrivere *alcun* codice.
Plugin minimi richiesti
Ci sono almeno quattro plugin che devono funzionare insieme per far sì che ciò accada. Spiegherò ciascuno di essi di seguito.
Easy Digital Downloads
Mentre Easy Digital Downloads ha la sua funzionalità di checkout principale, il sistema di base supporta solo un modulo di checkout "universale". Anche se personalizzi il modulo, sarà comunque lo stesso modulo per tutte le transazioni indipendentemente da ciò che è nel carrello.
Gravity Forms
Gravity Forms è un costruttore di moduli avanzato per WordPress. Puoi usarlo per creare qualsiasi cosa, dai moduli di contatto più basilari a moduli complessi che servono a qualsiasi scopo. Con funzionalità come la logica condizionale dei campi, l'organizzazione e la presentazione delle voci e il supporto dei componenti aggiuntivi, è senza dubbio uno dei plugin premium più popolari di WordPress sul mercato.
Gravity Forms Checkout
Gravity Forms Checkout è il ponte tra Easy Digital Downloads e Gravity Forms. Per creare moduli di checkout personalizzati multipli per i tuoi prodotti, questa estensione di Easy Digital Downloads è un pezzo necessario del puzzle.
Componente aggiuntivo per pagamenti di Gravity Forms
Infine, i moduli di checkout personalizzati creati tramite Gravity Forms richiedono l'uso di componenti aggiuntivi di Gravity Forms per aggiungere funzionalità aggiuntive ai moduli stessi. Ciò significa che i gateway di pagamento di Easy Digital Downloads non funzioneranno con Gravity Forms Checkout.
Per elaborare i pagamenti, devi utilizzare gateway di pagamento creati per Gravity Forms. In questo articolo, faremo riferimento al componente aggiuntivo Gravity Forms PayPal Payments Standard. Sono disponibili opzioni aggiuntive come Stripe e Authorize.net.
Creazione di moduli di checkout personalizzati
Ora che hai tutti i plugin richiesti, iniziamo. Ti guideremo attraverso la creazione di un modulo di checkout di base per un singolo prodotto. Segui i passaggi se sei pronto a farlo.
A questo punto, dovresti già avere prodotti nel tuo negozio che desideri vendere. Tieni presente che anche se hai gli strumenti sopra menzionati attivati o in uso, il tuo negozio Easy Digital Downloads continuerà a funzionare nel suo modo originale.
Moduli di checkout personalizzati con Gravity Forms Checkout aggiungono semplicemente un'altra opzione. I tuoi prodotti possono ancora essere acquistati nel modo tradizionale.
Crea nuovi moduli con Gravity Forms
Per il processo di creazione dei moduli, pensala come Easy Digital Downloads che si integra con Gravity Forms, invece del contrario. Con questo approccio, ha senso che per creare un nuovo modulo di checkout personalizzato, dovresti prima creare un nuovo modulo in Gravity Forms.
Con Gravity Forms attivato, vai su Moduli -> Nuovo Modulo nella tua bacheca di WordPress. Ti verrà chiesto di dare un titolo e una descrizione opzionale al modulo. Fallo e crea il modulo.
Aggiunta di campi di base
In questa fase, hai creato un'istanza del modulo ma non ha alcun campo. Tutto ciò che ha è un titolo e una descrizione che verranno visualizzati automaticamente per impostazione predefinita, anche se puoi nasconderli se scegli di farlo.
Dovrai raccogliere almeno un indirizzo email dai tuoi clienti. Quindi aggiungeremo un campo per l'indirizzo email al nostro modulo per iniziare.
Sul lato destro dello schermo, vedrai diverse sezioni espandibili di raggruppamenti di campi. Il campo Email si trova nella sezione Campi Avanzati. Per aggiungere il campo Email al tuo modulo, fai semplicemente clic sul pulsante etichettato Email.
Facendo clic sul pulsante, il campo verrà aggiunto al tuo modulo (lato sinistro dello schermo) con contenuti minimi predefiniti. Sposta il cursore sul nuovo campo e quando vedi l'indicatore visivo che stai passando sopra, fai clic singolo sul campo per visualizzare le sue opzioni.
Il campo Email è molto semplice e necessita solo di una regolazione. Nella sezione Regole, contrassegna il campo come Obbligatorio. Con questa configurazione in atto, il modulo di checkout non verrà inviato senza un indirizzo email.
Molti di voi vorranno anche aggiungere campi come nome e cognome. Non li discuteremo in questo articolo, ma il processo è molto simile all'aggiunta del campo Email.
Ora che abbiamo un campo email obbligatorio, aggiungiamo un altro campo prima di passare ai campi relativi ai prodotti.
Solo per struttura e per familiarizzare ulteriormente con Gravity Forms, aggiungeremo un campo al modulo chiamato Sezione. Le sezioni sono un modo semplice per suddividere il modulo in sezioni visive che aiutano nel flusso di compilazione del modulo.
Il campo Sezione si trova nella sezione Campi Standard. Aggiungilo al tuo modulo ed espandilo per visualizzare le sue opzioni.
In base al tipo di campo e al fatto che aggiungeremo un campo Prodotto successivamente, consideriamo questo campo Sezione come un'intestazione per la visualizzazione del campo prodotto.
Regola l'etichetta del campo e i campi Descrizione a tuo piacimento. Qualcosa come "Informazioni sul prodotto" come Etichetta del campo e qualsiasi piccolo dettaglio che desideri divulgare sul prodotto stesso come Descrizione.
In qualsiasi momento durante il processo di creazione, puoi visualizzare in anteprima la struttura del tuo modulo facendo clic sul link Anteprima situato nel menu di navigazione appena sopra il generatore di moduli. Tieni presente che alcuni campi richiedono l'aggiornamento del modulo per l'anteprima.
L'anteprima del tuo modulo non è una rappresentazione di come sarà progettato sul front-end. Utilizza invece l'anteprima per esaminare la struttura e la funzionalità. Al momento, non abbiamo altro che un campo email, un titolo di sezione (etichetta) e una descrizione.
Se non hai ancora familiarità con Gravity Forms, quello che hai fatto finora è il modo in cui utilizzeresti il generatore di moduli per qualsiasi tipo di modulo che crei, non solo con Easy Digital Downloads. Se non ti è chiaro come funziona il generatore di moduli di base, visita la documentazione di Gravity Forms.
In questa fase del processo, l'anteprima del tuo modulo dovrebbe essere simile a questa:
Con il titolo del modulo, la descrizione del modulo, il campo email e la sezione delle informazioni sul prodotto impostati, possiamo aggiungere un prodotto al modulo.
Aggiunta di campi prodotto
Ricorda, questo è un modulo estremamente basilare e il suo scopo è fungere da checkout per un particolare prodotto. Per coloro che preferirebbero un modulo di checkout personalizzato per un prodotto specifico anziché utilizzare il pulsante Aggiungi al carrello e il checkout tradizionale, questo modulo sarebbe un sostituto ideale.
Detto questo, aggiungeremo e visualizzeremo il campo Prodotto al modulo a scopo informativo. Il cliente viene informato a quale prodotto il modulo gli darà accesso insieme al suo prezzo.
Sul lato destro dello schermo, trova la sezione Campi Prezzo. In quella sezione, seleziona per aggiungere un nuovo campo Prodotto facendo clic sul pulsante etichettato Prodotto. Una volta aggiunto, espandi il campo.
Venderò un prodotto chiamato "Prodotto Esempio", che è già stato creato come voce Download. Dopo aver compilato le sezioni Etichetta Campo e Descrizione, collegherò il mio campo Prodotto a Easy Digital Downloads selezionando "Prodotto Esempio" dal menu a discesa Connetti a Download EDD.
Continuando con le impostazioni, imposterò il mio Tipo Campo su "Prodotto Singolo" con un Prezzo di $10. Tieni presente che poiché ho il pieno controllo del modulo, devo impostare il prezzo da solo. Non viene prelevato dalla voce Download.
Infine, selezionerò la casella Disabilita campo quantità e imposterò le uniche Regole come Obbligatorio.
Diamo un'occhiata a un'anteprima aggiornata del mio modulo di checkout personalizzato.
Con solo questi campi impostati, hai creato un modulo pronto per vendere "Prodotto Esempio" ai tuoi clienti. Tutto quello che devi fare ora è aggiungere i campi per accettare il pagamento.
Si noti che il campo Prodotto è opzionale. Sebbene il campo debba essere presente per collegare il modulo al prodotto, è possibile selezionare "Nascosto" come Tipo di campo, il che includerà il campo al momento dell'invio ma il cliente non vedrà mai il campo stesso.
Il motivo per cui potresti volerlo fare è che questo modulo di checkout può essere incorporato (tramite shortcode) in una pagina che fornisce già informazioni importanti sul prodotto, incluso il prezzo. In questo caso, visualizzare il campo Prodotto nel modulo può essere ridondante e persino confuso per il cliente.
Ricorda solo che il campo deve essere presente.
A questo punto, dovresti salvare il tuo modulo. Il passo successivo richiederà la visita di altre pagine per configurare le opzioni di pagamento. Una volta completato, rivisiteremo il modulo.
Aggiunta dei campi di pagamento
Ora siamo liberi di accettare pagamenti dai clienti. Per farlo, dobbiamo impostare il modulo per accettare almeno un metodo di pagamento. Come accennato in precedenza, utilizzeremo il componente aggiuntivo PayPal Payments Standard per Gravity Forms per elaborare i nostri pagamenti.
A seconda del gateway di pagamento scelto, potrebbe essere necessario o meno aggiungere un campo diretto al tuo modulo. Ad esempio, se stai utilizzando il componente aggiuntivo Stripe, aggiungerà un campo Carta di credito al generatore di moduli che puoi selezionare come hai fatto in precedenza.
Tuttavia, il componente aggiuntivo PayPal Payments Standard no. Invece, dovresti seguire le istruzioni direttamente da Gravity Forms per configurare i tuoi moduli per utilizzare PayPal per le transazioni dei clienti.
In questo articolo non tratteremo questi dettagli. Si applicano a Gravity Forms sia che sia integrato con Easy Digital Downloads o meno. Quindi vorrai utilizzare la documentazione di Gravity Forms per trovare la documentazione pertinente alle tue esigenze.
Completa tutti i passaggi richiesti per la configurazione dei tuoi gateway di pagamento. Se è necessario aggiungere un nuovo campo al modulo, fallo seguendo gli stessi metodi descritti sopra.
Aggiunta dell'importo finale del pagamento (totale)
Durante la configurazione delle opzioni di pagamento, ti sarebbe stato indicato di creare un Feed per ogni tipo di pagamento che avresti accettato. Gli utenti di PayPal Payments Standard avrebbero visitato questa documentazione.
Nella creazione di quel Feed, avresti dovuto impostare l'Importo del pagamento per il Feed. Ciò significa che ogni volta che il tuo modulo di checkout viene inviato, al cliente viene richiesto di pagare un certo importo e il Feed deve sapere da dove estrarre tale importo.
L'impostazione Importo del pagamento deve essere impostata per estrarre i dati da uno dei campi del tuo modulo che contiene il valore totale del modulo. Tuttavia, non abbiamo ancora impostato quel campo. Salva i progressi del tuo Feed e torna al tuo modulo salvato in modo da poter aggiungere il campo.
Sul lato destro della schermata del costruttore di moduli, seleziona per aggiungere un campo Totale al tuo modulo dalla sezione Campi Prezzo. Una volta aggiunto, espandi il nuovo campo.
Vedrai che non ci sono molte impostazioni. Il campo è progettato per calcolare automaticamente il totale del modulo in base alle informazioni che riceve dagli altri campi del modulo e dalla possibile interazione del cliente.
Con questo campo aggiunto al tuo modulo e il tuo modulo aggiornato, puoi ora impostare questo campo come Importo Pagamento nel tuo Feed.
Continua a seguire il resto della documentazione di Gravity Forms per finalizzare le impostazioni del tuo Feed e salvare il nuovo Feed.
Utilizzo del tuo modulo di checkout personalizzato
Ora che hai creato un modulo di checkout personalizzato pronto per accettare pagamenti, devi visualizzare il tuo modulo. Gravity Forms lo rende estremamente facile con lo shortcode [[gravityform]]. Su qualsiasi pagina, post o tipo di post personalizzato desideri, fai clic sul pulsante Aggiungi Modulo per aggiungere un modulo al tuo contenuto.
Una volta salvata la tua pagina, il modulo verrà visualizzato nel front-end e sarà pronto per accettare pagamenti per qualsiasi prodotto tu abbia configurato.
Si prega di notare che se PayPal Payments Standard è l'unico gateway che hai configurato, nessun testo relativo a PayPal verrà visualizzato sul modulo (a meno che tu non abbia aggiunto testo personalizzato). Semplicemente compilando il modulo e inviandolo, il cliente verrà reindirizzato a PayPal per completare il pagamento.
Esempi di logica condizionale
Sarebbe impossibile coprire ogni possibile configurazione del modulo in questo unico articolo. Tuttavia, possiamo condividere alcuni esempi per aiutarti a iniziare a rendere il tuo modulo più intelligente e facile da usare.
Diamo un'occhiata a un modulo di esempio che utilizziamo qui sul sito Easy Digital Downloads. Per aiutare i nuovi utenti a scegliere le estensioni di cui hanno bisogno per avviare le loro attività, abbiamo creato il Pacchetto Starter. (Aggiornamento: il nostro Pacchetto Starter non è più attivo, poiché abbiamo apportato modifiche alle nostre opzioni di acquisto generali. Puoi continuare a leggere come se esistesse.)
Questo modulo autonomo non dipende dalla funzionalità del carrello.
Diviso in sezioni logiche che includono selezioni di estensioni, tutto ciò che un cliente deve fare è selezionare le estensioni che si adattano alle esigenze della sua attività, inserire le informazioni personali e di pagamento, accettare i termini e completare l'acquisto.
Non solo il modulo è completamente personalizzato, ma può facilmente essere uno dei tanti moduli di checkout personalizzati sul sito. Con le informazioni di cui sopra, puoi essere sulla buona strada per averne proprio uno.
Pacchetti di prodotti personalizzati
Sul nostro modulo Pacchetto Starter, potresti aver notato l'uso di sezioni di estensioni mirate che consentono al cliente di scegliere determinati prodotti. Diamo un'occhiata in particolare alla sezione Marketing.
Ogni volta che un utente seleziona una casella per una delle nostre estensioni di marketing, l'estensione viene aggiunta al suo pacchetto starter personalizzato, modificando così il totale del modulo.
Per ottenere questo, devi:
- Aggiungi un nuovo campo Caselle di controllo al tuo modulo. Una volta espanso, tre opzioni di casella di controllo predefinite appariranno nella sezione Scelte. Se intendi utilizzare questo campo casella di controllo per consentire la selezione di cinque prodotti, ad esempio, devi creare cinque scelte che rappresentino i nomi dei tuoi cinque prodotti. Rendi questo un campo obbligatorio.
- Aggiungi un nuovo campo Prodotto al tuo modulo. Configura il campo Prodotto per connetterti a uno dei prodotti Easy Digital Downloads che hai referenziato dalle tue scelte di caselle di controllo. Nella scheda Impostazioni generali per il Prodotto, imposta il suo Tipo di campo su “Prodotto singolo” (non può essere nascosto) e dagli un prezzo. Nella scheda Avanzate, seleziona l'impostazione Abilita logica condizionale e imposta il campo in modo che venga visualizzato solo se viene selezionata la “Scelta” corretta dal tuo campo casella di controllo nel passaggio 1.
- Ripeti il passaggio 2 per tutte le Scelte create nel passaggio 1.
Ciò che fa è aggiungere campi Prodotto al modulo solo quando le loro condizioni sono soddisfatte. Quelle condizioni sono Scelte verificate dal campo casella di controllo. Finché quelle Scelte rappresentano i tuoi prodotti e sono collegate ad essi tramite la logica condizionale dei campi, i clienti possono creare i propri pacchetti personalizzati.
Selettore del metodo di pagamento
Verso la fine del nostro modulo Pacchetto iniziale, chiediamo al cliente di selezionare un metodo di pagamento. Accettiamo pagamenti tramite Stripe e PayPal.
Come accennato in precedenza, vengono utilizzati diversi metodi per aggiungere campi al modulo per le informazioni di pagamento. PayPal Payments Standard non richiede un campo, ma Stripe ne richiede diversi. Il campo Carta di credito di Stripe e un campo Indirizzo aggiuntivo devono essere aggiunti al modulo per elaborare i pagamenti con carta di credito.
Per creare questo, devi:
- Aggiungi un nuovo campo Pulsanti di opzione al tuo modulo. Una volta espanso, tre opzioni di pulsante di opzione predefinite appariranno nella sezione Scelte. Poiché consentiamo ai clienti di scegliere tra due metodi di pagamento, devi avere due scelte che rappresentino i nomi dei metodi di pagamento. Nel nostro caso, abbiamo scelto Carta di credito / debito e PayPal come scelte. Rendi questo un campo obbligatorio.
- Aggiungi tutti i campi necessari per accettare pagamenti con carta di credito in base alle istruzioni di Gravity Forms. Configura i campi per raccogliere tutte le informazioni richieste. Nella scheda Avanzate di tutti i campi relativi alle carte di credito, seleziona l'impostazione Abilita logica condizionale e imposta i campi in modo che vengano visualizzati solo se viene selezionata la “Scelta” corretta dal tuo campo pulsanti di opzione nel passaggio 1.
- Poiché PayPal non richiede alcun campo nel modulo, tutto ciò che devi fare è andare al tuo Feed PayPal per il modulo e nelle sue impostazioni, selezionare l'impostazione Abilita logica condizionale e impostare il Feed in modo che venga utilizzato solo se viene selezionata la “Scelta” corretta dal tuo campo pulsanti di opzione nel passaggio 1 (PayPal).
La scelta è tua
Questa è una cosa difficile di cui scrivere perché una volta che si afferra il concetto di logica condizionale dei campi, si ha davvero una tela bianca con cui giocare ogni volta che si crea un modulo di checkout personalizzato.
Possiamo fornire esempi ma le possibilità sono infinite. La chiave di tutto è la logica condizionale e l'uso strategico dei campi Prodotto.
Spetta a te decidere se i tuoi prodotti necessitano di un modulo di checkout più specializzato. Allo stesso modo, creare qualcosa di simile al nostro Pacchetto Starter è una scelta aziendale che solo tu puoi fare.
Gioca con le funzionalità per vedere se ti vengono in mente alcune idee redditizie.
Domande frequenti
Posso usare Gravity Forms Checkout con l'estensione Recurring Payments?
No. Recurring Payments non si integra con la configurazione sopra menzionata.
Che dire delle ricevute via email e della conferma dell'acquisto?
Il reindirizzamento predefinito di conferma acquisto di Easy Digital Downloads non è più applicabile. Tuttavia, Gravity Forms ti permetterà di impostare un comportamento di conferma personalizzato se scegli di farlo. Si consiglia una pagina standard con collegamenti statici.
La ricevuta via email verrà comunque inviata all'utente contenente tutte le informazioni relative al prodotto presenti nel tuo modello di ricevuta. Questo comportamento non cambia.
Suggerimento: da una conferma personalizzata che crei in Gravity Forms, indirizza i tuoi clienti a controllare le loro email dopo l'acquisto e collegali a informazioni importanti che potrebbero ridurre al minimo la confusione.
Se permetto ai clienti di creare pacchetti personalizzati, vengono elaborati come Bundle?
La funzionalità bundle principale di Easy Digital Downloads non si applica. Se un cliente acquista 10 prodotti tramite uno dei tuoi moduli di checkout personalizzati, ogni prodotto è considerato un acquisto separato.
Come uso gli sconti?
Per poter offrire sconti ai clienti che utilizzano il modulo di checkout personalizzato, devi semplicemente impostare i campi Prodotto con un prezzo scontato. I clienti non potranno inserire un codice sconto come nel modulo di checkout predefinito.
Come posso stilizzare i miei moduli di checkout personalizzati?
È importante notare che tutto ciò di cui abbiamo discusso qui riguarda la creazione del modulo e la sua funzionalità. Questi sono elementi generici del modulo e devono essere stilizzati dal tuo tema o dal tuo CSS personalizzato, come qualsiasi altro elemento HTML.
Quando testi il tuo modulo, assicurati di testare la corretta funzionalità. Se abbia un aspetto gradevole o meno non è un'indicazione di come funziona. Come puoi immaginare, la creazione della visualizzazione del Pacchetto Starter ha richiesto diverse ore di lavoro di progettazione personalizzata.
Se hai domande su quanto menzionato in questo articolo, non esitare a lasciare una domanda qui sotto nei commenti.
Per supporto, utilizza il nostro modulo di supporto.
