Cum să adăugați câmpuri condiționate la finalizarea comenzii WooCommerce

Doriți să creați o logică condiționată pentru magazinul dvs.? Ai venit la locul potrivit. În acest ghid, veți învăța cum să adăugați câmpuri condiționate la finalizarea comenzii WooCommerce .

Checkout este una dintre cele mai importante pagini pentru orice magazin de comerț electronic. Există milioane de site-uri care concurează pentru aceiași utilizatori. Așadar, pentru a fi în fața concurenților, ar trebui să personalizați și să vă optimizați cât mai mult posibil checkout. Una dintre cele mai interesante opțiuni pentru a face acest lucru este să adăugați câmpuri condiționate la finalizarea plății WooCommerce .

Aceste câmpuri vă permit să creați o logică condiționată și să afișați doar câmpurile pe care clienții trebuie să le completeze în pagina de finalizare a comenzii pentru a accelera procesul de cumpărare. Deci, să înțelegem mai bine ce sunt câmpurile condiționate și cum vă pot ajuta să vă duceți magazinul la nivelul următor.

Ce sunt câmpurile condiționate?

Câmpurile condiționate sunt câmpuri care au o logică condiționată, astfel încât atunci când condiția este îndeplinită, un alt câmp apare sau este ascuns. Pentru a crea o logică condiționată, aveți nevoie de cel puțin un câmp părinte și unul sau mai multe câmpuri copil care depind de valorile pe care le ia câmpul părinte . De exemplu, dacă oferiți clienților posibilitatea de a plăti cu PayPal sau card de credit, este posibil să doriți să afișați câmpurile cu detaliile cardului de credit doar dacă utilizatorii selectează opțiunea Card de credit . Dacă vor să plătească cu PayPal, acele câmpuri nu vor apărea. În acest fel, îmbunătățiți experiența utilizatorului pe site-ul dvs. și creșteți ratele de conversie.

Ce este logica condiționată?

Trebuie să aveți o idee clară despre ce este logica condiționată înainte de a începe, așa că să săpăm puțin mai adânc. Când creați o logică condiționată, doriți ca câmpul condiționat să facă X dacă condiția este îndeplinită sau adevărată, dar faceți Y dacă condiția este falsă sau nu este îndeplinită .

Urmând exemplul cardului nostru de credit, dorim să apară câmpurile cu detaliile cardului de credit numai dacă clientul selectează opțiunea de plată cu cardul de credit. Acest exemplu este destul de ușor, dar logica condiționată poate atinge un nivel mai ridicat de complexitate atunci când lucrați cu mai multe tipuri de câmpuri și/sau adăugați mai multe condiții și acțiuni.

Pe pagina de plată WooCommerce, puteți seta o condiție pentru un singur câmp. Valoarea pe care clientul o introduce în acel câmp va fi verificată în raport cu setările și dacă condiția este îndeplinită, acțiunea ar fi afișarea câmpului.

Pentru a crea o logică condiționată pe pagina de plată, trebuie să utilizați cel puțin două câmpuri. Un părinte și copilul lui. Câmpul în care sunt verificate valorile se numește câmpul părinte . Iar cel în care creați logica condiționată pentru a o face să apară sau nu numai dacă condiția este adevărată este câmpul copil . După cum vom vedea în acest ghid, un câmp părinte poate avea mai multe câmpuri copil și mai multe condiționale aplicate.

Cum să adăugați câmpuri condiționate la finalizarea comenzii WooCommerce

În această secțiune, vom vedea cum să folosim și să adăugați logica condiționată și câmpuri condiționate la finalizarea comenzii în WooCommerce. Crearea unei logici condiționate utile din punct de vedere programatic necesită multă codare, așa că vă recomandăm să utilizați un plugin. Pentru această demonstrație, vom folosi Checkout Manager.

Acest plugin vă permite să adăugați, să personalizați și să ștergeți diferite tipuri de câmpuri pe pagina de finalizare a achiziției. În plus, puteți aplica validări condiționate nelimitate folosind mai multe câmpuri personalizate pe pagina de finalizare a plății WooCommerce. Cu peste 80.000 de descărcări active , este unul dintre cele mai bune pluginuri de plată disponibile. Are o versiune gratuită cu funcții de bază pe care le puteți descărca de aici și trei planuri premium care încep de la 19 USD.

Am împărțit postarea în diferite secțiuni, astfel încât să puteți sări direct la secțiunea care vă interesează. Fără prea mult timp, să vedem cum să adăugați câmpuri condiționate la pagina de finalizare a comenzii în WooCommerce .

1. Cum se creează o logică condiționată
2. Logica condiționată cu mai multe câmpuri personalizate copil
3. Cum să utilizați mai multe câmpuri personalizate și condiționale înlănțuite
4. Ce nu poți face când folosești logica condiționată

1. Cum se creează o logică condiționată

Deci, acum că aveți o idee clară despre ce este logica condiționată și cum funcționează, să vedem cum să creați un câmp de logică condiționată folosind plugin-ul WooCommerce Checkout Manager. Să creăm o condiție pentru a afișa un mesaj atunci când un utilizator tasta „ admin ” ca prenume în formularul de facturare. Pentru a face asta, mai întâi, accesați WooCommerce > Checkout > Facturare în tabloul de bord WordPress. Acolo, apăsați butonul Adăugare câmp nou .

Se va deschide o fereastră. Acesta este editorul de câmp al noului câmp. Acolo, selectați Mesaj ca tip și completați opțiunile precum Etichetă, Tip și Mesaj. În plus, selectați Prenumele ca câmp părinte din coloana din dreapta. În cele din urmă, scrieți „ admin ” sub Prenume și apăsați pe Salvare .

După cum puteți vedea, setăm câmpul Prenume ca câmp părinte. Acum este timpul să-l testăm. Așadar, accesați pagina de finalizare a comenzii de pe front-end și tastați „ admin ” în câmpul pentru prenume. Ar trebui să vedeți un mesaj de avertizare ca acesta.

Acesta este un exemplu simplu, dar condiționalele pot include multe câmpuri și lucrurile pot deveni foarte complexe atunci când se folosesc multe condiționale și câmpuri personalizate. Așadar, pentru a le gestiona cu ușurință, puteți vedea ce câmp are o condiție și câmpul părinte în ecranul manager de câmp al formularului de finalizare a comenzii corespunzător ( Facturare, expediere, suplimentar ).

Așa puteți adăuga un câmp condiționat la finalizarea comenzii în WooCommerce utilizând Managerul de plată. Acum, să aruncăm o privire la un exemplu mai complex. Și, desigur, cel mai bun dintre toate este că nu există nicio limitare cu privire la numărul de câmpuri personalizate care pot aplica aceleași condiții sau condiții diferite aceluiași câmp părinte.

2. Logica condiționată cu mai multe câmpuri copil personalizate

Acum, să presupunem că doriți să oferiți cumpărătorilor opțiunea de a primi produsele pe care le-au achiziționat într-unul dintre centrele dvs. de distribuție sau de a alege o livrare standard într-o anumită locație. Pentru aceasta, puteți folosi un câmp de tip radio, astfel încât clienții să poată alege una dintre cele două opțiuni.

Creați un câmp părinte nou

Deci, mai întâi, accesați WooCommerce > Checkout și creați un câmp de tip radio. Pentru acest exemplu, vom numi acest câmp „Livrare”. Apoi introduceți Opțiuni. Le vom numi Takeaway și Delivery. Aici, puteți, de asemenea, să selectați un preț pentru fiecare opțiune și să setați unul ca implicit. Deoarece dorim să afișăm diferite câmpuri clienților, în funcție de caseta de selectare pe care o selectează, vom folosi unele dintre câmpurile implicite de finalizare a plății WooCommerce pentru opțiunea Livrare . În acest fel, cumpărătorii își pot completa detaliile pentru a-și primi produsele la adresa pe care o aleagă. Deci, editați câmpurile WooCommerce implicite: stat, oraș, cod poștal și adresă. Apoi, creați aceeași logică condiționată pentru fiecare dintre ele. În plus, vom crea un condițional și vom selecta tipul de câmp radio Livrare ca câmp părinte și vom afișa câmpul de stat dacă utilizatorii selectează opțiunea Livrare. Desigur, puteți face același lucru pentru toate aceste domenii sau pentru unele dintre ele. În acest exemplu, vom crea un condițional următoarele câmpuri:

• stat_facturare
• oras_facturare
• codul_poștal_facturare
• adresa_facturare_1

Creați un câmp copil personalizat

Apoi, trebuie să creați un nou câmp personalizat care va apărea atunci când clientul selectează opțiunea Takeaway , astfel încât să puteți trimite produsul la unul dintre centrele de distribuție. Încă o dată, accesați setările pluginului și creați un tip de câmp Select . Activați caseta de selectare condiționată, selectați Livrare ca părinte și apelați-o Take away sub Livrare . După aceea, trebuie să creați adresele pentru centrele de distribuție. Deci, accesați secțiunea Opțiuni și adăugați câteva adrese. În cele din urmă, salvați modificările. Acum, este timpul să verificați interfața. Accesați pagina de finalizare a comenzii și selectați unele dintre opțiunile pe care tocmai le-ați creat. De exemplu, atunci când utilizatorii selectează opțiunea Takeaway, puteți alege unul dintre centrele de distribuție. Pe de altă parte, dacă selectează Livrare , trebuie să introducă adresa la care doresc să primească produsele. NOTĂ : Am adăugat încă două câmpuri pentru a afișa mesajul informațional, câte unul pentru fiecare opțiune, folosind aceleași condiții pe care le-am folosit în celelalte câmpuri. Acum știți cum să adăugați câmpuri condiționate la finalizarea WooCommerce folosind o logică mai complexă. Cu toate acestea, puteți să o duceți puțin mai departe și să creați o logică și mai complexă. Să vedem cum să creăm condiționale înlănțuite .

3. Cum să utilizați mai multe câmpuri personalizate și condiționale înlănțuite

Când lucrați cu multe condiționale care sunt legate, lucrurile pot deveni destul de complexe. Condiționalele înlănțuite sunt un exemplu excelent în acest sens. Este atunci când există o condițională aplicată unui câmp care are o altă condițională pe un câmp diferit. Pentru a o înțelege mai bine, vă puteți gândi la un condițional cu un subcondițional, care are un alt subcondițional și așa mai departe. Nivelul ierarhic al condițiilor și numărul de câmpuri personalizate pe care le puteți utiliza este nelimitat, astfel încât să puteți crea o logică foarte complexă cu multe dependențe.

Crearea unui condițional înlănțuit

Deci, să creăm un exemplu mai complex folosind condiționale înlănțuite. Să presupunem că doriți să oferiți clienților opțiunea de a adăuga un pachet suplimentar la comanda lor. Opțiunile vor fi Carton, Cadou și Styrofoam. Mai întâi, adăugați un tip de câmp de casetă de selectare, astfel încât clientul să poată solicita pachetul suplimentar. În fila Preț a editorului de câmpuri, introduceți prețul pe care doriți să-l adăugați la comanda curentă atunci când clientul selectează caseta de selectare Pachet suplimentar. Apoi, trebuie să lucrați la opțiunile de ambalare pe care le veți oferi clienților. Vom permite cumpărătorilor să selecteze mai multe opțiuni, așa că vom crea un tip de câmp cu selecție multiplă. Adăugați o etichetă și selectați Pachet suplimentar ca câmp părinte, astfel încât logica dumneavoastră condiționată să arate astfel: Apoi, accesați fila Opțiuni și creați opțiunile pentru clienții dvs. Pe acest ecran, puteți seta un preț diferit pentru fiecare alternativă. Deoarece am stabilit deja prețul când am creat câmpul casetei de selectare, nu vom folosi această opțiune aici. Odată ce ați terminat, este timpul să verificați interfața. Dacă totul funcționează corect, ar trebui să puteți selecta mai multe opțiuni atunci când bifați câmpul Ambalare suplimentară : Am folosit un singur condițional aici pentru a afișa un câmp cu selecție multiplă. Acum, să creăm un condițional înlănțuit cu fiecare dintre opțiunile/valorile câmpului părinte.

Adăugați mai multe opțiuni

Deci, să alegem opțiunea Pachet cadou și să aplicăm câteva condiții. Să creăm un câmp personalizat radio și să completăm editorul după cum urmează. Vom oferi mai multe printuri pe hârtie pentru împachetări de cadouri, așa că vom folosi acest câmp pentru a permite clienților să aleagă unul dintre ele. Pentru a face acest lucru, accesați secțiunea Opțiuni și configurați imprimările pe hârtie pentru câmpul radio. Am configurat opțiunile astfel: Și pe front-end, veți vedea ceva de genul acesta: Pe măsură ce afișăm împachetări cadou, este mai bine să arătăm imagini în loc de text. Pentru a afișa imagini în fiecare opțiune, am folosit câteva imagini pe care le-am încărcat anterior în bibliotecă. Puteți introduce imagini pentru eticheta fiecărei opțiuni cu următorul cod: <img class=”paper-style” src=”#path of your image url”> Până acum, ați creat o logică condiționată înlănțuită care include două niveluri și două condiții care depind una de alta. Ambalaj suplimentar ->(condiția 1)-> Tip ambalaj ->(condiția 2)-> Pachet cadou

Adăugarea unui alt nivel condiționat

Să ducem lucrurile puțin mai departe și să adăugăm un nou nivel de condițional. În ultima captură de ecran, veți vedea că există un câmp nou numit Gift Card pentru a oferi utilizatorilor opțiunea de a adăuga un card cadou dedicat la pachet. Pentru asta, vom percepe încă 4 USD. În plus, vom folosi o condiție pentru a afișa un nou câmp personalizat și pentru a le permite utilizatorilor să introducă textul pe care doresc să-l imprime pe cardul cadou. Deci, să creăm un nou câmp de casetă de selectare și să-l setăm după cum urmează: Puteți vedea cum ne referim la același câmp părinte și utilizăm aceeași condiție pe care am folosit-o pentru ambalajul cadou în pasul anterior. Apoi, adăugați o zonă de text, astfel încât utilizatorii să poată introduce textul pe care doresc să-l vadă în cardul cadou și să îl configureze astfel: Acesta este ultimul condiționat. Are câmpul personalizat Card cadou ca câmp părinte și Textul cardului cadou ca câmp secundar. Așa că acum, când cumpărătorii selectează opțiunea Card cadou, vor vedea asta: Și așa creezi o logică complexă și adaugi mai multe câmpuri condiționate la pagina de plată în WooCommerce. Am înlănțuit trei condiții și mai multe câmpuri personalizate în această ordine: Ambalare suplimentară ->(condiția 1)-> Tip ambalaj ->(condiția 2)-> Pachet cadou ->(condiția 3)->Card cadou

4. Ce nu poți face când folosești logica condiționată

Utilizați câmpuri din diferite forme

În WooCommerce, câmpurile condiționate trebuie să se refere la un câmp părinte situat în același formular. Există trei formulare pe pagina de finalizare a comenzii: Formulare de facturare, livrare și formulare suplimentare. Fiecare dintre ele funcționează ca un formular separat și nu poate avea condiționale care depind de câmpurile dintr-un alt formular.

Condiționat de câmpurile fără valoare (buton, titlu, mesaje)

Nu puteți utiliza butoanele, mesajele și tipurile de câmpuri de antet ca câmpuri părinte, deoarece nu au nicio valoare pentru a verifica dacă condiția este îndeplinită.

Editați ID-urile sau numele câmpurilor

Pentru a asigura o integrare adecvată cu WooCommerce, nu puteți edita numele și ID-urile câmpurilor. Acest lucru se aplică atât câmpurilor WooCommerce implicite, cât și oricăror câmpuri personalizate pe care le adăugați.

Declanșați o acțiune diferită, în afară de afișarea/ascunderea unui câmp

În WooCommerce, câmpurile condiționale pot face o singură acțiune: afișați câmpul specificat atunci când condiția este adevărată. Aceasta înseamnă că, din păcate, nu puteți adăuga o reducere, un produs, nu puteți edita comanda sau nu puteți face orice altă acțiune atunci când condiția este îndeplinită.

Aplicați condiționale la valorile câmpurilor din afara plății

În cele din urmă, condiționalele pot verifica doar valorile unui alt câmp de plată din același formular. Așadar, nu puteți verifica condițiile care verifică cantitatea de produs, prețul total, rolul utilizatorului sau orice altceva care nu este o valoare a câmpului de plată.

Concluzie

Una peste alta, logica condiționată vă poate ajuta să îmbunătățiți experiența utilizatorului și să creșteți ratele de conversie pe site-ul dvs. De aceea, adăugarea de câmpuri condiționate la finalizarea plății WooCommerce este o modalitate excelentă de a vă duce magazinul la următorul nivel.

În acest ghid, ați învățat cum să creați și să configurați câmpuri suplimentare folosind pluginul WooCommerce Checkout Manager. Am adăugat câmpuri personalizate și am creat atât o logică condiționată simplă, cât și exemple mai complexe cu condiționale înlănțuite. În cele din urmă, am aruncat o privire asupra limitărilor logicii condiționate în WooCommerce.

Aici, am văzut câteva exemple, dar acesta este doar vârful aisbergului. Există o mulțime de lucruri pe care le puteți face cu câmpurile condiționate pentru a vă îmbunătăți finalizarea plății. Așadar, vă recomandăm să creați câmpuri personalizate și să vă jucați cu condiționalul.

Pentru mai multe informații despre cum să profitați la maximum de finalizarea plății dvs., puteți consulta ghidul nostru pentru a optimiza finalizarea plății WooCommerce și tutorialul nostru pentru a dezactiva validarea codului poștal. Anunțați-ne dacă aveți întrebări sau îndoieli pentru a adăuga câmpuri condiționate la finalizarea comenzii. Vom fi bucuroși să vă ajutăm!