Cum personalizăm paginile de autentificare WooCommerce (3 metode)

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ă pară mai profesionist ș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.

În caz contrar, atunci când clienții se autentifică în magazinul dvs. WooCommerce, vor vedea pagina de autentificare implicită WordPress, doar cu logo-ul ș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.

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.:

Metodă	Cel mai bun pentru	Caracteristici cheie/Flexibilitate
SeedProd	Crearea unei pagini de autentificare complet personalizate, independente, cu un design care se potrivește mărcii tale.	Constructor drag-and-drop, personalizare completă a paginii, blocuri WooCommerce (produse, oferte).
WPForms	Adăugarea unui formular de autentificare flexibil pe orice pagină, postare sau bară laterală de pe site-ul tău.	Constructor de formulare drag-and-drop, formulare ușor de încorporat, addon pentru înregistrarea utilizatorilor, câmpuri personalizabile.
FunnelKit (Autentificare la finalizarea comenzii)	Îmbunătățirea formularului de autentificare de pe pagina de finalizare a comenzii WooCommerce pentru a ajuta clienții care revin.	Șabloane de finalizare a comenzii proiectate profesional, experiență de autentificare fluidă în timpul finalizării comenzii, testare A/B, analize.

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

Cel mai bun mod de a crea o pagină de autentificare complet personalizată este prin utilizarea SeedProd. Este cel mai bun constructor de pagini de destinație WordPress care înlocuiește autentificarea implicită WordPress pentru magazinul tău WooCommerce cu un design personalizat.

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.

Pasul 1: Instalați și activați SeedProd

Mai întâi, va trebui să instalați și să activați plugin-ul SeedProd. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

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.

Pasul 2: Configurați o nouă pagină de autentificare

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”.

Pasul 3: Personalizează designul paginii de autentificare

Î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ă și 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 autentificare.

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.

Pe lângă aceste blocuri, SeedProd îți permite, de asemenea, să personalizezi în continuare orice secțiune de pe pagina de autentificare. Pur și simplu faceți clic pe secțiune și veți vedea mai multe opțiuni, cum ar fi editarea etichetei, culorii, fontului și spațiului.

Pasul 4: Publicați pagina dvs. de conectare personalizată

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.

Pasul 5: Activează noua pagină de autentificare

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. web și să ofere mai multe câmpuri de 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 utilizând 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, consultați 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.

Pasul 1: Instalați și activați WPForms

Mai întâi, va trebui să instalați și să activați pluginul WPForms. Dacă aveți nevoie de ajutor, vă rugăm să consultați ghidul nostru despre cum să instalați un plugin WordPress.

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.

Pasul 2: Instalează addon-ul de înregistrare a utilizatorilor

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”.

Pasul 3: Creează un nou formular de autentificare a utilizatorilor

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”.

Pasul 4: Personalizează câmpurile formularului de autentificare

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.

Poți adăuga câmpuri suplimentare dacă dorești să combini autentificarea cu alte acțiuni sau pur și simplu să rearanjezi câmpurile existente din ș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.

Pasul 5: Configurează setările și confirmările formularului

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.

Pasul 6: Încorporează și publică formularul de autentificare

Î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ă.

Pasul 7: (Opțional) Adaugă formularul în bara laterală

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 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ă personalizată de autentificare pentru clienții WooCommerce, poate doriți să consultați ghidul nostru despre cum să creați o pagină personalizată de autentificare WordPress.

În plus, puteți consulta și tutorialul nostru despre cum să adăugați un meniu de navigare în WordPress, astfel încât să puteți adăuga pagina dvs. de autentificare WooCommerce la navigarea site-ului dvs.

Metoda 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.

Cea mai bună modalitate de a face acest lucru este utilizând un plugin puternic de construire a pâlniei, cum ar fi 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 pâlnii, pagini de vânzări și oferte suplimentare.

FunnelKit vă oferă analize detaliate pentru fiecare pas al funnel-ului dvs. WooCommerce.

Vine, de asemenea, cu un addon 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 utilizează SeedProd înlocuiește pagina de autentificare implicită WordPress pentru toți utilizatorii, inclusiv administratori și editori. Metoda WPForms vă permite să plasați un formular de autentificare 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ă personalizată de autentificare a clienților 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ă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.