Dacă doriți să oferiți clienților o experiență mai fluidă în magazinul dvs. WooCommerce, atunci crearea unei pagini de autentificare personalizate este un punct de plecare excelent.
Pagina de autentificare WordPress implicită arată simplu și nu se potrivește cu brandingul magazinului dumneavoastră. Personalizând-o, puteți face procesul de autentificare să pară mai profesionist și mai conform cu marca.
La WPBeginner, am ajutat mulți utilizatori să configureze pagini de conectare personalizate, iar cea mai ușoară modalitate este prin utilizarea unui constructor de pagini precum SeedProd sau un plugin de formulare precum WPForms.
În acest tutorial, vă voi arăta cum să proiectați o pagină de autentificare WooCommerce complet personalizată și vă voi împărtăși un instrument puternic pe care îl puteți folosi și pentru a personaliza pagina de autentificare la finalizarea comenzii.
De ce să creați o pagină de autentificare personalizată pentru clienții WooCommerce?
Personalizarea paginilor de autentificare WooCommerce vă permite să adăugați logo-ul dvs. și să schimbați designul pentru a se potrivi cu site-ul dvs. web. Acest lucru face ca site-ul dvs. să arate mai profesional și oferă o experiență mai bună utilizatorului.
De asemenea, vă permite să adăugați mai multe câmpuri de formular și chiar vă permite să promovați produse specifice sau să afișați oferte speciale clienților.
Altfel, când clienții se autentifică în magazinul dumneavoastră WooCommerce, vor vedea pagina de autentificare WordPress implicită, cu doar sigla și brandingul WordPress.
Această pagină este în regulă dacă doriți doar să accesați tabloul de bord al site-ului dvs. Cu toate acestea, clienții ar putea fi descurajați de designul simplu și ar putea considera suspect faptul că pagina de autentificare nu se potrivește cu aspectul site-ului dvs. web.
Acestea fiind spuse, să vedem cum poți crea o pagină personalizată de autentificare pentru clienți în WooCommerce.
Puteți folosi linkurile rapide de mai jos pentru a sări la diferite metode din tutorialul nostru:
- Metoda 1: Creează o pagină de conectare WooCommerce complet personalizată folosind SeedProd
- Metoda 2: Personalizați formularul de conectare al clienților WooCommerce folosind WPForms
- Sfat bonus: Personalizează pagina de autentificare la finalizarea comenzii WooCommerce
- Întrebări frecvente despre paginile de conectare WooCommerce
Ce metodă ar trebui să alegi?
Acest articol acoperă trei moduri diferite de a vă personaliza pagina de conectare. Iată un rezumat rapid pentru a vă ajuta să alegeți cea mai bună opțiune pentru magazinul dvs.:
- Metoda 1: SeedProd – Cel mai bun pentru crearea unei pagini de autentificare complet personalizate, independente, cu un design unic care se potrivește brandului tău.
- Metoda 2: WPForms – Ideal dacă doriți să adăugați un formular de autentificare flexibil la orice pagină, postare sau bară laterală de pe site-ul dvs. web.
- Bonus: Personalizați autentificarea la finalizarea comenzii – Cea mai bună alegere pentru îmbunătățirea formularului de autentificare pe pagina de finalizare a comenzii WooCommerce pentru a ajuta clienții care revin.
Metoda 1: Creează o pagină de conectare WooCommerce complet personalizată folosind SeedProd
Cea mai bună modalitate de a crea o pagină de autentificare personalizată pentru clienții WooCommerce este prin utilizarea SeedProd. Este cel mai bun constructor de pagini de destinație și teme WordPress pentru WordPress și este incredibil de ușor de utilizat.
Puteți folosi constructorul drag-and-drop al SeedProd pentru a personaliza designul și aspectul unei pagini sau al temei WordPress, fără a atinge o singură linie de cod.
Pentru a afla mai multe, consultați recenzia noastră detaliată despre SeedProd.
Mai întâi, va trebui să instalezi și să activezi pluginul SeedProd. Dacă ai nevoie de ajutor, consultă ghidul nostru despre cum să instalezi un plugin WordPress.
📌 Notă: Pentru acest tutorial, vom folosi licența SeedProd Pro deoarece include șablonul Pagina de autentificare și alte opțiuni avansate de personalizare. Există și o versiune SeedProd Lite pe care o puteți folosi gratuit.
După activare, veți vedea ecranul de întâmpinare SeedProd.
Introduceți cheia de licență și faceți clic pe butonul „Verifică cheia”. Puteți găsi cheia de licență în zona contului SeedProd.
Apoi, poți crea o pagină personalizată de autentificare pentru magazinul tău WooCommerce.
Pur și simplu accesați SeedProd » Pagini de destinație din tabloul de bord WordPress și faceți clic pe butonul „Configurați o pagină de conectare”.
După aceea, SeedProd vă va arăta mai multe șabloane. Puteți selecta rapid unul și îl puteți personaliza conform nevoilor dvs. Acest lucru ajută la economisirea timpului și puteți folosi un design existent pentru a crea propria pagină de autentificare WooCommerce.
Pluginul vă permite, de asemenea, să creați o pagină de autentificare de la zero, folosind un șablon gol.
După ce selectați un șablon, se va deschide o fereastră pop-up.
Continuați și introduceți un nume pentru pagina dvs. și faceți clic pe butonul „Salvează și începe editarea paginii”.
În continuare, veți vedea constructorul de pagini drag-and-drop.
Acum poți personaliza pagina de autentificare adăugând noi blocuri la șablon din meniul din stânga ta.
SeedProd oferă blocuri standard pentru titluri, texte, imagini, butoane și multe altele.
Pe lângă acestea, puteți adăuga blocuri avansate precum un concurs, formular de contact, butoane de partajare socială, formular de abonare și multe altele.
Există, de asemenea, blocuri WooCommerce precum produse recente, produse recomandate și produse cele mai vândute pe care le puteți adăuga la șablonul paginii dvs. de conectare.
Folosind blocurile WooCommerce, puteți recomanda cu ușurință produsele dumneavoastră de top și puteți promova oferte de reduceri pentru a obține mai multe conversii.
În afară de asta, SeedProd îți permite să personalizezi în continuare orice secțiune de pe pagina de autentificare. Pur și simplu dă clic pe secțiune și vei vedea mai multe opțiuni, cum ar fi editarea etichetei, culorii, fontului și spațierii.
Odată ce ați terminat de personalizat pagina de autentificare WooCommerce, nu uitați să faceți clic pe butonul „Salvare” din partea de sus.
După aceea, puteți accesa fila „Setări pagină” și puteți face clic pe comutatorul „Stare pagină” pentru a o schimba din Ciornă în Publicat. Apoi, puteți continua și face clic pe butonul „Salvare” și închideți constructorul de pagini.
De aici, tot ce mai rămâne este să faci ca noua ta pagină personalizată de autentificare WooCommerce să apară pentru utilizatori. Pentru a face acest lucru, accesează SeedProd » Landing Pages din tabloul de bord WordPress.
Pur și simplu faceți clic pe comutatorul de sub „Pagină de conectare” pentru ca acesta să fie verde și să spună „Activ”.
Odată ce acest lucru este activat, noua dvs. pagină de autentificare va apărea pe site-ul dvs. WordPress!
Puteți vizita magazinul dvs. de eCommerce pentru a-l vedea în acțiune.
Metoda 2: Personalizați formularul de conectare al clienților WooCommerce folosind WPForms
Doriți să creați un formular de autentificare care să se potrivească și cu tema site-ului dvs. și să ofere mai multe câmpuri pentru formular?
Formularul de autentificare implicit al WordPress permite utilizatorilor să introducă doar adresa de e-mail sau numele de utilizator, împreună cu o parolă.
Principalul beneficiu al utilizării unui plugin de formulare este flexibilitatea. Acesta vă permite să plasați formularul de autentificare oriunde în magazinul dvs. online, cum ar fi într-o bară laterală sau pe o pagină de produs, făcându-l convenabil pentru clienți.
Cea mai bună modalitate de a face acest lucru este prin utilizarea WPForms. Este cel mai bun constructor de formulare WordPress, ușor de utilizat pentru începători. Peste 6 milioane de site-uri web folosesc WPForms pentru a crea formulare mai inteligente.
La WPBeginner, l-am folosit pentru a crea formulare de contact și sondaje anuale și ne place. Pentru a afla mai multe, vezi recenzia noastră completă despre WPForms.
Puteți crea cu ușurință un formular de autentificare WooCommerce personalizat și îl puteți afișa oriunde pe magazinul dvs. online, cum ar fi bara laterală sau pagina de produs.
Mai întâi, va trebui să instalați și să activați pluginul WPForms. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.
📌 Notă: Pentru acest tutorial, vom folosi planul WPForms Pro deoarece include addon-ul User Registration. Poți încerca și versiunea gratuită a WPForms pentru a începe.
După activare, poți accesa WPForms » Settings din tabloul de bord WordPress și introduce cheia de licență. Poți găsi cheia de licență în zona contului WPForms.
Apoi, va trebui să accesezi WPForms » Addons în panoul de administrare WordPress.
După aceea, derulați în jos la „User Registration Addon” și apoi faceți clic pe butonul „Install Addon”.
Acum, sunteți gata să creați un formular de autentificare personalizat pentru WooCommerce. Pur și simplu accesați WPForms » Add New pentru a lansa constructorul de formulare.
Pe ecranul următor, puteți introduce un nume pentru formularul dvs. în partea de sus. Apoi, căutați șablonul „User Login Form” și faceți clic pe butonul „Use Template”.
După aceea, puteți personaliza șablonul formularului de autentificare a utilizatorului folosind constructorul drag-and-drop. WPForms face foarte ușor să adăugați diferite câmpuri la formular sau să rearanjați câmpurile existente pe șablon.
De exemplu, poți adăuga câmpuri avansate precum numere de telefon, trăgându-le din meniul din stânga și plasându-le pe șablon.
Poți personaliza în continuare fiecare câmp din formular în șablon. Pur și simplu dă clic pe orice câmp și editează eticheta acestuia, adaugă o descriere și fă-l un câmp obligatoriu în formular.
După aceea, poți accesa fila „Setări” din constructorul de formulare. Sub setările generale, poți schimba „Text buton trimitere” în „Autentificare”.
Apoi, puteți accesa fila „Confirmări” pentru a schimba ce se va întâmpla atunci când un utilizator se autentifică cu succes.
Pur și simplu dă clic pe meniul derulant „Tip de confirmare” și selectează o opțiune. Poți afișa clienților un mesaj, afișa o pagină sau redirecționa către un URL specific.
De exemplu, puteți adăuga formularul de conectare WooCommerce la o pagină de produs și puteți permite clienților să se conecteze rapid pentru a achiziționa produsul dvs.
Când ați terminat, pur și simplu faceți clic pe butonul „Salvează” din partea de sus.
În continuare, va trebui să adăugați formularul de autentificare al clienților WooCommerce într-o pagină de pe site-ul dvs.
Pur și simplu faceți clic pe butonul „Încorporare” din partea de sus a constructorului. Puteți apoi alege dacă veți plasa formularul pe o pagină existentă sau veți crea una nouă pentru acesta.
Să alegem deocamdată opțiunea „Creare pagină nouă”.
Apoi, va trebui să introduceți un nume pentru pagina dvs. și să faceți clic pe butonul „Să începem!”.
După aceea, veți vedea formularul de autentificare WPForms în interiorul zonei de conținut WordPress.
De aici, poți personaliza și stiliza formularul de autentificare deschizând panoul de blocuri din partea dreaptă a ecranului. În secțiunea „Teme”, poți alege dintre peste 40 de teme predefinite pentru a oferi formularului tău de autentificare un aspect unic.
Puteți, de asemenea, să schimbați stilul și dimensiunea câmpurilor formularului, etichetelor, butoanelor și multe altele.
Odată ce sunteți mulțumit de design, puteți previzualiza formularul, publica noua pagină și afișa pagina de autentificare personalizată WooCommerce pentru clienții dumneavoastră.
De asemenea, puteți adăuga formularul de conectare WooCommerce în bara laterală a magazinului dvs. În acest fel, formularul dvs. va apărea pe fiecare pagină de produs și va permite clienților să se conecteze rapid.
Pur și simplu accesați Aspect » Widgeturi din tabloul de bord WordPress. Apoi, faceți clic pe butonul „+” și adăugați un bloc de widget WPForms.
După aceea, puteți alege formularul de conectare din meniul derulant și puteți introduce un titlu.
Când ați terminat, faceți clic pe butonul „Actualizare”.
Acum puteți vizita magazinul dvs. online pentru a vedea formularul de conectare în bara laterală.
Pentru mai multe modalități de a crea o pagină de conectare personalizată pentru clienții WooCommerce, poate doriți să consultați ghidul nostru despre cum să creezi o pagină de conectare personalizată pentru WordPress.
În plus, puteți consulta și tutorialul nostru despre cum să adaugi un meniu de navigare în WordPress, astfel încât să poți adăuga pagina ta de conectare WooCommerce la navigarea site-ului tău.
Sfat bonus: Personalizează pagina de autentificare la finalizarea comenzii WooCommerce
WooCommerce permite vizitatorilor care revin să se autentifice în timpul paginii de finalizare a comenzii. Cu toate acestea, un formular de autentificare generic sau greoi pe pagina de finalizare a comenzii poate întrerupe procesul de cumpărare și poate duce la pierderea vânzărilor.
Prin crearea unei experiențe de autentificare fluide și personalizate la acest pas critic, puteți reduce abandonarea coșului și puteți construi mai multă încredere cu clienții dvs.
Cel mai bun mod de a face acest lucru este prin utilizarea unui plugin puternic de creare de funnel-uri precum FunnelKit.
Vine cu șabloane proiectate profesional care înlocuiesc pagina de finalizare a comenzii implicită, oferind clienților care revin o experiență de autentificare mult mai bună și mai ușoară. Acest lucru ajută la reducerea fricțiunii și crește probabilitatea ca aceștia să își finalizeze achizițiile.
Aveți, de asemenea, opțiunea de a testa A/B multiple funnel-uri, pagini de vânzare și oferte de vânzare suplimentară.
FunnelKit vă oferă analize detaliate pentru fiecare pas al funnel-ului dvs. WooCommerce.
De asemenea, vine cu un add-on puternic de automatizare a marketingului, FunnelKit Automations.
Vă permite să personalizați e-mailurile WooCommerce, să trimiteți notificări prin e-mail în loturi în WooCommerce pentru abandonarea coșului, serii de bun venit și multe altele.
Dacă ești serios în privința creșterii magazinului tău WooCommerce, atunci acesta este unul dintre instrumentele obligatorii pe care le recomandăm.
Întrebări frecvente despre paginile de conectare WooCommerce
Iată câteva întrebări pe care cititorii noștri le pun frecvent despre crearea paginilor de autentificare WooCommerce în WordPress:
Pot folosi aceste pagini de autentificare personalizate și pentru utilizatorii obișnuiți de WordPress?
Da, absolut. Metoda care folosește SeedProd înlocuiește pagina de conectare implicită WordPress pentru toți utilizatorii, inclusiv administratori și editori. Metoda WPForms îți permite să plasezi o formulă de conectare oriunde, care poate fi folosită și de orice rol de utilizator.
Trebuie să știu să codez pentru a-mi personaliza pagina de autentificare?
Deloc. Atât SeedProd, cât și WPForms sunt concepute pentru a fi ușor de utilizat, cu constructori drag-and-drop. Puteți crea o pagină de conectare cu aspect profesional fără a atinge o singură linie de cod.
Este gratuit să creezi o pagină de autentificare WooCommerce personalizată?
Ambele pluginuri oferă versiuni gratuite pentru a începe. Cu toate acestea, pentru a accesa șabloanele specifice paginii de autentificare și funcționalitățile avansate prezentate în acest tutorial, veți avea nevoie de versiunile Pro ale SeedProd sau WPForms.
Ce metodă este mai bună pentru magazinul meu, SeedProd sau WPForms?
Depinde de nevoile tale specifice. SeedProd este ideal dacă vrei să creezi o pagină de autentificare complet separată, complet proiectată, care să se potrivească perfect brandului tău.
Pe de altă parte, WPForms este mai bun dacă doriți un formular de autentificare flexibil pe care îl puteți adăuga în diverse locuri de pe site-ul dvs., cum ar fi o bară laterală sau o pagină de finalizare a comenzii.
Sperăm că acest articol v-a ajutat să învățați cum să creați o pagină de autentificare personalizată pentru clienții WooCommerce. Puteți vedea, de asemenea, selecția noastră de experți a celor mai bune pluginuri WooCommerce și ghidul nostru despre cum să limitați încercările de autentificare în WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Jiří Vaněk
Am aderat întotdeauna la regula că site-urile web grozave sunt alcătuite din detalii. Da, pagina de conectare implicită WooCommerce funcționează perfect, dar este neatractivă și, aș spune, destul de plictisitoare. SeedProd adaugă o dimensiune complet nouă și este incredibil de ușor de utilizat, cu un ghid atât de detaliat la îndemână. Așa cum am menționat, sunt aceste detalii, cum ar fi o pagină de conectare personalizată, care transformă un magazin obișnuit într-unul bun și unul bun într-unul grozav. Mulțumesc pentru sfat.
Dennis Muthomi
Thank you for showing the SeedProd method
I like how SeedProd allows adding custom blocks and sections to match my branding.
I have one clarifying question – when I use SeedProd to create the custom customer login page, will it also replace the default admin login, or will the admin login page remain unchanged?
Suport WPBeginner
Da, ar înlocui autentificarea dvs. normală, precum și autentificarea magazinului dvs.
Admin