Easy Digital Downloads se dedică furnizării unui sistem eCommerce ușor de utilizat pentru utilizatorii WordPress. Lucrăm din greu pentru a atinge acest obiectiv zilnic. Cu toate acestea, datorită extensibilității sale și variației inevitabile a nevoilor clienților, o mare parte din funcționalitate este lăsată sarcinii descurajante a dezvoltării personalizate.
Una dintre cele mai comune nevoi pe care le vedem în canalul nostru de suport este o modalitate ușoară de a crea formulare de checkout personalizate. Pentru non-dezvoltatori, construirea de formulare personalizate este suficient de dificilă. Aduceți funcționalitatea eCommerce în imagine și chiar și mulțimea „fă-o singur” se luptă.
Scopul acestui articol este de a ajuta fiecare utilizator Easy Digital Downloads, indiferent de nivelul de calificare, să învețe cum să construiască formulare de checkout personalizate fără a scrie *niciun* cod.
Pluginuri minime necesare
Există cel puțin patru pluginuri care trebuie să funcționeze împreună pentru a realiza acest lucru. Voi explica fiecare dintre ele mai jos.
Easy Digital Downloads
În timp ce Easy Digital Downloads are propria sa funcționalitate de bază de checkout, sistemul de bază suportă doar un singur formular de checkout „universal”. Chiar dacă personalizați formularul, acesta va fi în continuare același formular pentru toate tranzacțiile, indiferent de ceea ce se află în coș.
Gravity Forms
Gravity Forms este un constructor avansat de formulare pentru WordPress. Îl puteți folosi pentru a crea orice, de la cel mai de bază formular de contact la formulare complexe care servesc oricărui scop. Cu funcții precum logica condiționată a câmpurilor, organizarea și prezentarea intrărilor și suportul pentru add-on-uri, nu există nicio îndoială că este unul dintre cele mai populare pluginuri premium WordPress de pe piață.
Gravity Forms Checkout
Gravity Forms Checkout este puntea dintre Easy Digital Downloads și Gravity Forms. Pentru a crea mai multe formulare de checkout personalizate pentru produsele dvs., această extensie Easy Digital Downloads este o piesă necesară a puzzle-ului.
Add-on de plată Gravity Forms
În cele din urmă, formularele de checkout personalizate create prin Gravity Forms necesită utilizarea add-on-urilor Gravity Forms pentru a adăuga funcționalități suplimentare la formularele în sine. Asta înseamnă că porțile de plată Easy Digital Downloads nu vor funcționa cu Gravity Forms Checkout.
Pentru a procesa plățile, trebuie să utilizați porți de plată create pentru Gravity Forms. În acest articol, vom face referire la add-on-ul Gravity Forms PayPal Payments Standard. Există opțiuni suplimentare disponibile, cum ar fi Stripe și Authorize.net.
Crearea formularelor de checkout personalizate
Acum că aveți toate pluginurile necesare, să începem. Vom parcurge crearea unui formular de checkout de bază pentru un singur produs. Urmați pașii dacă sunteți pregătit să faceți acest lucru.
În acest moment, ar trebui să aveți deja produse în magazinul dvs. pe care doriți să le vindeți. Vă rugăm să rețineți că, chiar dacă aveți instrumentele menționate mai sus activate sau în uz, magazinul dvs. Easy Digital Downloads va funcționa în continuare în modul său original.
Formulare de checkout personalizate cu Gravity Forms Checkout adaugă pur și simplu o altă opțiune. Produsele dvs. pot fi achiziționate în continuare în mod tradițional.
Creează formulare noi cu Gravity Forms
Pentru procesul de creare a formularelor, gândește-te la asta ca la Easy Digital Downloads care se integrează cu Gravity Forms, în loc să fie invers. Cu acea abordare, are sens ca pentru a crea un nou formular de checkout personalizat, ar trebui mai întâi să creezi un nou formular în Gravity Forms.
Cu Gravity Forms activat, accesează Formulare -> Formular nou în tabloul de bord WordPress. Vei fi direcționat să dai un titlu și o descriere opțională formularului. Fă acest lucru și creează formularul.
Adăugarea câmpurilor de bază
În această etapă, ai o intrare de formular creată, dar nu are niciun câmp. Tot ce are este un titlu și o descriere care vor fi afișate automat implicit, deși le poți ascunde dacă alegi să faci acest lucru.
Va trebui să colectezi cel puțin o adresă de e-mail de la clienții tăi. Așa că vom adăuga un câmp pentru adresa de e-mail la formularul nostru pentru a începe.
În partea dreaptă a ecranului, vei vedea mai multe secțiuni expandabile de grupări de câmpuri. Câmpul de e-mail se găsește în secțiunea Câmpuri avansate. Pentru a adăuga câmpul de e-mail la formularul tău, pur și simplu apasă pe butonul etichetat E-mail.
Apăsarea butonului va adăuga câmpul la formularul tău (partea stângă a ecranului) cu un conținut minim implicit. Mută cursorul peste noul câmp și când vezi indicatorul vizual că ești deasupra, apasă o singură dată pe câmp pentru a-i vedea opțiunile.
Câmpul de e-mail este foarte simplu și necesită o singură ajustare. Sub secțiunea Reguli, marchează câmpul ca Necesar. Cu această configurație implementată, formularul de checkout nu va fi trimis fără o adresă de e-mail.
Mulți dintre voi veți dori, de asemenea, să adăugați câmpuri precum prenumele și numele de familie. Nu vom discuta despre acestea în acest articol, dar procesul este foarte similar cu adăugarea câmpului de e-mail.
Acum că avem un câmp obligatoriu pentru adresa de e-mail, să adăugăm încă un câmp înainte de a trece la câmpurile legate de produse.
Doar pentru structură și pentru a te familiariza mai mult cu Gravity Forms, vom adăuga un câmp la formular numit Secțiune. Secțiunile sunt o modalitate ușoară de a-ți împărți formularul în secțiuni vizuale care ajută la fluxul completării formularului.
Câmpul Secțiune se găsește în secțiunea Câmpuri standard. Adaugă-l la formularul tău și extinde-l pentru a-i vedea opțiunile.
Bazat pe tipul de câmp și pe faptul că vom adăuga în continuare un câmp de Produs, să considerăm acest câmp Secțiune ca un antet pentru afișarea câmpului de produs.
Ajustează câmpurile Etichetă câmp și Descriere după placul tău. Ceva de genul „Informații despre produs” ca Etichetă câmp și orice detalii mici pe care vrei să le dezvălui despre produsul în sine ca Descriere.
În orice moment în timpul procesului de creare, puteți previzualiza structura formularului dvs. făcând clic pe linkul Prevualizare situat în meniul de navigare chiar deasupra constructorului de formulare. Vă rugăm să rețineți că unele câmpuri necesită actualizarea formularului pentru prevualizare.
Prevualizarea formularului dvs. nu este o reprezentare a modului în care va fi proiectat pe partea frontală. Folosiți prevualizarea pentru a examina structura și funcționalitatea. Deocamdată, nu avem nimic mai mult decât un câmp de e-mail, un titlu de secțiune (etichetă) și o descriere.
Dacă nu sunteți deja familiarizat cu Gravity Forms, ceea ce ați făcut aici până acum este modul în care ați folosi constructorul de formulare pentru orice tip de formular pe care îl creați, nu doar cu Easy Digital Downloads. Dacă nu sunteți clar cu privire la funcționarea constructorului de formulare de bază, vă rugăm să vizitați documentația Gravity Forms.
În această etapă a procesului, prevualizarea formularului dvs. ar trebui să arate similar cu aceasta:
Cu titlul formularului, descrierea formularului, câmpul de e-mail și secțiunea de informații despre produs în vigoare, putem adăuga un produs la formular.
Adăugarea câmpurilor de produs
Amintiți-vă, acesta este un formular extrem de simplu, iar scopul său este de a servi drept checkout pentru un anumit produs. Pentru cei care ar prefera un formular de checkout personalizat pentru un produs specific, în loc să folosească butonul Adăugare în coș și checkout-ul tradițional, acest formular ar fi un înlocuitor ideal.
Acestea fiind spuse, vom adăuga și afișa câmpul Produs pe formular în scopuri informative. Clientul este informat despre ce produs îi va oferi acces formularul, împreună cu prețul acestuia.
În partea dreaptă a ecranului, găsiți secțiunea Câmpuri de preț. În acea secțiune, selectați să adăugați un nou câmp Produs făcând clic pe butonul etichetat Produs. Odată adăugat, extindeți câmpul.
Voi vinde un produs numit „Produs Exemplu”, care a fost deja creat ca o intrare Descărcare. După completarea secțiunilor Etichetă câmp și Descriere, voi conecta câmpul meu Produs la Easy Digital Downloads selectând „Produs Exemplu” din meniul derulant Conectare la descărcare EDD.
Continuând cu setările, voi seta Tipul câmpului meu la „Produs unic” cu un Preț de 10 USD. Vă rugăm să rețineți că, deoarece am control complet asupra formularului, trebuie să stabilesc eu însumi prețul. Acesta nu este preluat din intrarea Descărcare.
În cele din urmă, voi bifa caseta Dezactivare câmp cantitate și voi seta singura Regulă ca Obligatoriu.
Să aruncăm o privire la o prevualizare actualizată a formularului meu de checkout personalizat.
Cu doar aceste câmpuri în vigoare, ați creat un formular pregătit să vândă „Produs Exemplu” clienților dvs. Tot ce trebuie să faceți acum este să adăugați câmpuri pentru a accepta plata.
Vă rugăm să rețineți că afișarea câmpului Produs este opțională. Deși câmpul trebuie să fie prezent pentru a conecta formularul la produs, puteți selecta „Ascuns” ca Tip câmp, ceea ce va include câmpul la trimitere, dar clientul nu va vedea niciodată câmpul în sine.
Motivul pentru care ați dori să faceți acest lucru este că acest formular de checkout poate fi încorporat (prin shortcode) într-o pagină care oferă deja informații importante despre produs, inclusiv prețul. Dacă acesta este cazul, afișarea câmpului Produs în formular poate fi redundantă și chiar confuză pentru client.
Doar amintiți-vă că câmpul trebuie să fie prezent.
În acest moment, ar trebui să vă salvați formularul. Următorul pas va necesita să vizitați alte pagini pentru a configura opțiunile de plată. Odată finalizate, vom reveni la formular.
Adăugarea câmpurilor de plată
Acum suntem liberi să acceptăm plăți de la clienți. Pentru a face acest lucru, trebuie să configurăm formularul pentru a accepta cel puțin o metodă de plată. Așa cum am menționat anterior, vom folosi add-on-ul PayPal Payments Standard pentru Gravity Forms pentru a procesa plățile noastre.
În funcție de gateway-ul de plată pe care îl alegeți, este posibil să fie sau nu necesar să adăugați un câmp direct la formularul dvs. De exemplu, dacă utilizați add-on-ul Stripe, acesta va adăuga un câmp Card de credit în constructorul de formulare pe care îl puteți selecta așa cum ați făcut anterior.
Cu toate acestea, add-on-ul PayPal Payments Standard nu face acest lucru. În schimb, ar trebui să urmați instrucțiunile direct de la Gravity Forms pentru configurarea formularelor dvs. pentru a utiliza PayPal pentru tranzacțiile clienților.
În acest articol, nu vom acoperi aceste detalii. Ele se aplică Gravity Forms, indiferent dacă este integrat cu Easy Digital Downloads sau nu. Deci, veți dori să utilizați documentația Gravity Forms pentru a găsi documentele relevante pentru nevoile dvs.
Completați toți pașii necesari pentru configurarea gateway-urilor dvs. de plată. Dacă trebuie adăugat un nou câmp la formular, faceți acest lucru urmând aceleași metode ca cele descrise mai sus.
Adăugarea sumei finale de plată (total)
În timp ce configurați opțiunea (opțiunile) dvs. de plată, ați fi fost instruiți să creați un Feed pentru fiecare tip de plată pe care ați dori să o acceptați. Utilizatorii PayPal Payments Standard ar fi vizitat această documentație.
În crearea acelui Feed, ar fi trebuit să setați Suma de plată pentru Feed. Ceea ce înseamnă acest lucru este că de fiecare dată când formularul dvs. de checkout este trimis, clientul trebuie să plătească o anumită sumă, iar Feed-ul trebuie să știe de unde extrageți acea sumă.
Setarea Suma de plată trebuie să fie setată să extragă date dintr-unul dintre câmpurile formularului dvs. care deține valoarea totală a formularului. Cu toate acestea, nu am configurat încă acel câmp. Salvați progresul Feed-ului dvs. și reveniți la formularul salvat, astfel încât să putem adăuga câmpul.
În partea dreaptă a ecranului de creare a formularelor, selectați să adăugați un câmp Total la formularul dvs. din secțiunea Câmpuri de preț. Odată adăugat, extindeți noul câmp.
Veți vedea că nu există foarte multe setări. Câmpul este conceput pentru a calcula automat totalul formularului pe baza informațiilor primite de la celelalte câmpuri ale formularului și a interacțiunii posibile a clientului.
Cu acest câmp adăugat la formularul dvs. și formularul actualizat, puteți acum să setați acest câmp ca Suma de plată în Fluxul dvs.
Continuați să urmați restul documentației Gravity Forms pentru a finaliza setările Fluxului și a salva noul Flux.
Utilizarea formularului dvs. de checkout personalizat
Acum că ați creat un formular de checkout personalizat pregătit să accepte plăți, trebuie să afișați formularul. Gravity Forms face acest lucru extrem de ușor cu shortcode-ul [[gravityform]]. Pe orice pagină, postare sau tip de postare personalizată doriți, faceți clic pe butonul Adăugare formular pentru a adăuga un formular la conținutul dvs.
Odată ce pagina dvs. este salvată, formularul va fi afișat în partea frontală și va fi gata să accepte plăți pentru orice produs ați configurat.
Rețineți că dacă PayPal Payments Standard este singura poartă de plată pe care ați configurat-o, niciun text legat de PayPal nu va fi afișat pe formular (decât dacă ați adăugat text personalizat). Pur și simplu completarea formularului și trimiterea acestuia va redirecționa clientul către PayPal pentru a finaliza plata.
Exemple de logică condițională
Ar fi imposibil să acoperim fiecare configurație posibilă a formularului într-un singur articol. Cu toate acestea, putem oferi câteva exemple pentru a vă ajuta să începeți să faceți formularul dvs. mai inteligent și mai ușor de utilizat.
Să analizăm un formular exemplu pe care îl folosim aici pe site-ul Easy Digital Downloads. Pentru a ajuta noii utilizatori să aleagă extensiile de care au nevoie pentru a-și pune la punct magazinele, am creat Pachetul de pornire. (Actualizare: Pachetul nostru de pornire nu mai este activ, deoarece am făcut modificări la opțiunile noastre generale de achiziție. Puteți continua să citiți ca și cum ar exista.)
Acest formular independent nu depinde de funcționalitatea coșului de cumpărături.
Împărțit în secțiuni logice care includ selecții de extensii, tot ce trebuie să facă un client este să selecteze extensiile care se potrivesc nevoilor afacerii sale, să introducă informațiile personale și de plată, să fie de acord cu termenii și să finalizeze achiziția.
Nu numai că formularul este complet personalizat, dar poate fi cu ușurință unul dintre multele formulare de checkout personalizate de pe site. Cu informațiile de mai sus, puteți fi pe drumul cel bun pentru a avea exact asta.
Pachete de produse personalizate
Pe formularul nostru Pachet de pornire, ați putea fi observat utilizarea secțiunilor de extensii concentrate care permit clientului să aleagă anumite produse. Să analizăm în mod specific secțiunea Marketing.
Ori de câte ori un utilizator bifează o căsuță pentru una dintre extensiile noastre de marketing, extensia este adăugată la pachetul său de pornire personalizat, schimbând astfel totalul formularului.
Pentru a realiza acest lucru, trebuie să:
- Adaugă un nou câmp de tip Bifare (Checkboxes) în formularul tău. Odată extins, trei opțiuni implicite de bifare vor apărea în secțiunea Opțiuni (Choices). Dacă intenționezi să folosești acest câmp de bifare pentru a permite selectarea a cinci produse, de exemplu, trebuie să creezi cinci opțiuni care să reprezinte numele celor cinci produse. Fă din acesta un câmp obligatoriu.
- Adaugă un nou câmp de tip Produs (Product) în formularul tău. Configurează câmpul Produs pentru a se conecta la unul dintre produsele Easy Digital Downloads pe care le-ai referențiat din opțiunile de bifare. Pe fila Setări generale pentru Produs, setează Tipul câmpului (Field Type) la „Produs unic” (Single Product) (nu poate fi ascuns) și atribuie-i un preț. Pe fila Avansat, bifează setarea Activare logică condițională (Enable Conditional Logic) și setează câmpul să apară doar dacă este selectată „Opțiunea” corectă din câmpul tău de bifare de la pasul 1.
- Repetă pasul 2 pentru toate Opțiunile create la pasul 1.
Acest lucru adaugă doar câmpuri de Produs în formular atunci când condițiile lor sunt îndeplinite. Acele condiții sunt Opțiuni verificate din câmpul de bifare. Atâta timp cât acele Opțiuni reprezintă produsele tale și sunt legate de acestea prin logica condițională a câmpului, clienții pot crea propriile pachete personalizate.
Selector de metode de plată
Spre sfârșitul formularului nostru Pachet Starter, instruim clientul să selecteze o metodă de plată. Acceptăm plăți prin Stripe și PayPal.
Așa cum am menționat mai sus, sunt utilizate metode diferite pentru a adăuga câmpuri în formular pentru informațiile de plată. PayPal Payments Standard nu necesită un câmp, dar Stripe necesită mai multe. Câmpul Card de credit de la Stripe și un câmp suplimentar de Adresă trebuie adăugate în formular pentru a procesa plățile cu cardul de credit.
Pentru a crea acest lucru, trebuie să:
- Adaugă un nou câmp de tip Butoane radio (Radio Buttons) în formularul tău. Odată extins, trei opțiuni implicite de radio vor apărea în secțiunea Opțiuni (Choices). Deoarece permitem clienților să aleagă între două metode de plată, trebuie să ai două opțiuni care să reprezinte numele metodelor de plată. În cazul nostru, am ales Card de credit / debit și PayPal ca opțiuni. Fă din acesta un câmp obligatoriu.
- Adaugă toate câmpurile necesare pentru acceptarea plăților cu cardul de credit pe baza instrucțiunilor de la Gravity Forms. Configurează câmpurile pentru a colecta toate informațiile necesare. Pe fila Avansat a tuturor câmpurilor legate de cardul de credit, bifează setarea Activare logică condițională (Enable Conditional Logic) și setează câmpurile să apară doar dacă este selectată „Opțiunea” corectă din câmpul tău de butoane radio de la pasul 1.
- Deoarece PayPal nu necesită niciun câmp în formular, tot ce trebuie să faci este să mergi la Fluxul tău PayPal (PayPal Feed) pentru formular și, în setările acestuia, să bifezi setarea Activare logică condițională (Enable Conditional Logic) și să setezi Fluxul să fie utilizat doar dacă este selectată „Opțiunea” corectă din câmpul tău de butoane radio de la pasul 1 (PayPal).
Alegerea îți aparține
Acesta este un subiect dificil despre care să scrii, deoarece odată ce înțelegi conceptul de logică condițională a câmpurilor, ai cu adevărat o pânză goală cu care să lucrezi de fiecare dată când creezi un formular de plată personalizat.
Putem oferi exemple, dar posibilitățile sunt nesfârșite. Cheia pentru toate acestea este logica condițională și utilizarea strategică a câmpurilor de produs.
Depinde de tine să decizi dacă produsele tale au nevoie de un formular de plată mai specializat. Similar, crearea a ceva asemănător Pachetului nostru de pornire este o alegere de afaceri pe care numai tu o poți face.
Experimentează cu funcționalitățile pentru a vedea dacă îți stârnește câteva idei profitabile.
Întrebări frecvente
Pot folosi Gravity Forms Checkout cu extensia Recurring Payments?
Nu. Recurring Payments nu se integrează cu configurația de mai sus.
Ce se întâmplă cu chitanțele prin e-mail și confirmarea achiziției?
Redirecționarea implicită de confirmare a achiziției Easy Digital Downloads nu se mai aplică. Cu toate acestea, Gravity Forms vă va permite să configurați un comportament de confirmare personalizat dacă alegeți să faceți acest lucru. Se recomandă o pagină standard cu linkuri statice.
Chitanța prin e-mail va fi trimisă în continuare utilizatorului, conținând orice informații legate de produs pe care le aveți în șablonul chitanței. Acest comportament nu se schimbă.
Sfat: dintr-o confirmare personalizată pe care o creați în Gravity Forms, direcționați clienții să își verifice e-mailurile după achiziție și legați-i la informații importante care ar putea minimiza confuzia.
Dacă permit clienților să creeze pachete personalizate, sunt acestea procesate ca Pachete (Bundles)?
Funcționalitatea de bază a pachetelor Easy Digital Downloads nu se aplică. Dacă un client achiziționează 10 produse printr-unul dintre formularele dvs. de plată personalizate, fiecare produs este considerat o achiziție separată.
Cum folosesc reducerile?
Pentru a oferi reduceri clienților care folosesc formularul de plată personalizat, trebuie pur și simplu să setați câmpurile de produs să aibă un preț redus. Clienții nu vor putea introduce un cod de reducere, așa cum se întâmplă la formularul de plată implicit.
Cum stilizez formularele mele de plată personalizate?
Este important de menționat că tot ce am discutat aici se referă la construirea formularului și a funcționalității acestuia. Acestea sunt elemente generice de formular și trebuie stilizate de tema dvs. sau de propriul CSS personalizat, la fel ca orice alt element HTML.
Când testați formularul, asigurați-vă că testați funcționalitatea corespunzătoare. Indiferent dacă arată plăcut ochiului sau nu, nu este o indicație a modului în care funcționează. Așa cum v-ați imagina, crearea afișajului Pachetului de pornire a necesitat câteva ore de muncă de design personalizat.
Dacă aveți întrebări despre ceea ce s-a menționat în acest articol, vă rugăm să nu ezitați să lăsați o întrebare mai jos, în comentarii.
Pentru suport, vă rugăm să folosiți formularul nostru de suport.
