Cum să vă personalizați pagina de plată WooCommerce în 2025

Cumpărătorilor le place o comandă rapidă și fără probleme. Dar dacă există chiar și o mică distragere a atenției, își vor abandona căruțele fără să se gândească. Atât de repede pierzi o vânzare.

Cu pagina implicită de finalizare a plății WooCommerce, este posibil să pierdeți deja clienți prețioși. Personalizarea acestuia poate oferi o experiență de branding consecventă, poate elimina distragerile și simplifica finalizarea achizițiilor pentru clienții dvs. Așa vă puteți îmbunătăți valoarea medie a comenzii și puteți crește vânzările.

Continuați să citiți această postare, deoarece vă arătăm cum să personalizați cât mai ușor o pagină de plată WooCommerce și să vă ghidăm prin optimizarea acesteia pentru rate de conversie îmbunătățite.

De ce să personalizați o pagină de plată WooCommerce

Câștigați venituri numai atunci când fac check-out, așa că finalizarea dvs. trebuie optimizată cu atenție. Cu WooCommerce, obțineți deja o plată pre-proiectată împreună cu alte pagini, dar este simplă și inutil de lungă, ceea ce riscă ca clienții dvs. să plece fără a efectua nicio acțiune dorită.

Cu toate acestea, dacă finalizarea plății este personalizată, vă ajută să:

• Creșteți valoarea medie a comenzii (AOV): simplificați procesul de plată al clienților dvs. eliminând pașii inutile, permițând comenzile pe o pagină și completarea automată a detaliilor de bază. Acest lucru grăbește finalizarea plății și îi face pe clienți să dorească să comande mai des.
• Îmbunătățiți experiența utilizatorului: optimizați finalizarea comenzii în funcție de tipul de produs. Pentru un singur produs, îi lăsați să verifice ca oaspete. Pentru abonamentele lunare SaaS, le permiteți să se conecteze cu detaliile contului lor Google. Pentru închiriere sau alte rezervări online cu un proces îndelungat (dar esențial), activați o comandă în mai mulți pași pentru a defalca.
• Păstrați consecvența mărcii: Checkout face parte în continuare din afacerea dvs., așa că personalizarea acesteia pentru a vă adăuga branding și pentru a elimina elementele care distrag atenția, cum ar fi subsolul și antetul, este o modalitate excelentă de a vă asigura că clienții își finalizează achizițiile.

Modalități de a personaliza pagina de plată WooCommerce

În funcție de cât de mult doriți să personalizați, puteți utiliza Editorul de site WordPress sau un constructor WooCommerce pentru a vă modifica pagina de plată. De exemplu, cu WooCommerce Blocks, puteți face modificări minore în branding, cum ar fi culorile, fonturile și dimensiunea. Dar cu un constructor WooCommerce precum Divi, puteți modifica fiecare centimetru din pagina dvs. de plată.

Îți voi arăta cum să o faci în ambele moduri.

1. Utilizarea Site Editor și WooCommerce Blocks

Rețineți că puteți accesa WordPress Site Editor numai dacă aveți o temă Block instalată, ceea ce înseamnă că nu va funcționa dacă utilizați o temă clasică sau o temă terță parte. Pentru exemplul nostru, folosim tema Douăzeci și douăzeci și patru.

Accesați Aspect > Editor > Pagini > Finalizare > Editare pentru a accesa Editorul site-ului. (Dacă utilizați o temă clasică, puteți modifica pagina de finalizare a comenzii accesând tabloul de bord WordPress > Pagini > Finalizare > Editați. )

Veți vedea codul scurt de plată WooCommerce implicit. Ștergeți -l pentru că nu îl puteți personaliza deloc.

Adăugați blocul Checkout WooCommerce făcând clic pe pictograma plus.

Eliminați unele dintre elementele blocului, cum ar fi notele de comandă, termenii și condițiile, numerele de telefon, titlurile secțiunilor, linkurile de revenire la coș etc. Pentru a șterge un element, faceți clic pe cele trei puncte (setări) și apoi pe Ștergere.

Examinați șablonul și decideți ce elemente să eliminați. Nu exagerați, totuși, deoarece eliminarea pașilor critici vă poate împiedica să obțineți informațiile necesare pentru clienții dvs. De exemplu, puteți elimina linia Adresa 2, deoarece clienții o lasă în mare parte goală, dar nu și coloana numărului de telefon dacă intenționați să trimiteți mesaje de marketing prin SMS sau WhatsApp.

Deoarece WooCommerce's Checkout este un bloc părinte realizat prin combinarea mai multor blocuri copii, nu puteți modifica direct setările de stil, cum ar fi fontul și culoarea. Pe măsură ce blocurile părinte adaptează stilurile din setările globale ale temei, WordPress Gutenberg este limitat în personalizare. Nu puteți personaliza prea mult decât dacă codificați sau cumpărați extensii, ceea ce duce în cele din urmă la cheltuirea mai multor bani.

2. Utilizarea unui WooCommerce Builder precum Divi

Dacă vă place controlul complet asupra designului magazinului dvs. online și economisirea de bani, personalizarea plății (și a altor pagini) cu un constructor WooCommerce precum Divi este ceea ce aveți nevoie. Simplifică personalizarea, oferă flexibilitate nelimitată și vă permite să modificați fiecare colț al magazinului dvs. online, inclusiv pagina de plată.

Divi este ideal pentru personalizarea paginilor de plată WooCommerce (și construirea de site-uri de comerț electronic) datorită constructorului său fără cod, drag-and-drop pentru ușurință pentru începători, elementelor dinamice de plată WooCommerce pentru funcționalitate și aranjamentelor uimitoare de plată și site-uri prefabricate , ceea ce facilitează proiectarea. Divi se împerechează perfect cu WooCommerce, datorită instrumentelor sale de marketing precum Divi Leads, care vă permit să rulați teste împărțite și Condiții care vă ajută să vă optimizați pentru diferite călătorii ale utilizatorilor.

De asemenea, obțineți instrumente unice, cum ar fi Divi Quick Sites, pentru a crea o pagină de plată, un magazin online sau un site web în două minute și Divi AI pentru a crea machete de pagină, o copie optimizată care se potrivește cu stilul mărcii dvs. și imagini frumoase în câteva minute. Divi are tot ce ai nevoie pentru a rula și a-ți dezvolta magazinul online fără a investi în extensii terțe pentru a adăuga funcționalitate.

Începeți cu Divi

De ce Divi este perfect pentru personalizarea paginilor de plată WooCommerce

Împreună cu WooCommerce, Divi este o soluție perfectă de comerț electronic care vă ajută să creați magazine online de marcă și pagini de plată fără efort. Acesta completează WooCommerce datorită acestor caracteristici puternice:

1. Site-uri rapide Divi pentru a genera un site WooCommerce (cu un șablon de plată)

Divi Quick Sites este o salvare pentru proprietarii de site-uri cărora nu le place să-și proiecteze site-ul de la zero. Nici măcar nu vei atinge o linie de cod și nici nu vei muta cursorul. Divi Quick Sites va construi un magazin online de marcă pentru dvs. în mai puțin de două minute. Tot ce trebuie să faceți este să activați butonul Magazin în timp ce completați detaliile site-ului dvs. și va instala și activa WooCommerce automat. De asemenea, creează șabloane de pagină WooCommerce de marcă, cum ar fi produs, coș și achiziție .

Accesați Divi > Generați un site nou > Alegeți un șablon prefabricat.

Site-ul dvs. este gata! Accesați Divi > Theme Builder > Checkout pentru a accesa șablonul de pagină Checkout. Faceți clic pe pictograma creion de lângă Corpul personalizat pentru a-l edita.

2. Aspecte de site WooCommerce concepute profesional

Dacă urăști să te uiți la ecranul gol ca mine, Divi te ascunde. Cu peste 2000 de aspecte Divi, puteți importa pachete de layout pentru site-uri web concepute profesional pentru site-uri web de comerț electronic din orice industrie. Odată ce importați unul, acesta poate fi personalizat folosind Divi Builder și modulele WooCommerce, ceea ce facilitează proiectarea unui șablon de plată de marcă.

Să nu uităm de șabloanele gratuite de plată pe care le-am lansat pentru a simplifica și mai mult. Importați șablonul, ajustați brandingul și gata! Experții Divi (care cunosc dezavantajele designului web și optimizării UX) au creat aceste șabloane, astfel încât fiecare design este optimizat pentru conversie pentru a vă aduce mai multe vânzări.

3. Modulele Native WooCommerce Checkout Divi

Divi are peste 200 de module native și peste 30 de module WooCommerce, inclusiv module de plată, astfel încât să puteți evita să le construiți de la zero. Modulele Divi Checkout includ doar câmpurile necesare pentru a menține rapid și scurt pentru clienții dvs.

Spre deosebire de blocul Checkout al WooCommerce din Editorul site-ului, care era un bloc părinte cu multe blocuri copii care nu pot fi editate separat, modulele Divi sunt separate, așa că decideți ce elemente să includeți. De exemplu, adăugați Woo Checkout Information numai dacă vindeți produse personalizate și aveți nevoie de contribuția clienților.

4. Divi Theme Builder la site-urile WooCommerce rapid

Divi Theme Builder vă permite să vă proiectați și să personalizați întregul site web și paginile WooCommerce la nivel de site utilizând generatorul Divi de tip drag-and-drop. De exemplu, creați un șablon de pagină Checkout (care depinde în mare măsură de cărucioarele clienților), iar Divi Theme Builder, combinat cu capacitatea de conținut dinamic al Divi, vă ajută să oferiți clienților o experiență de branding consistentă fără efort manual din partea dvs.

Când faceți modificări într-un șablon, acestea sunt actualizate peste tot. Acest lucru este excelent pentru magazinele cu mai multe produse, deoarece personalizați doar șablonul de produs pentru a modifica toate paginile de produse. În mod similar, puteți crea și personaliza șabloane pentru alte pagini WooCommerce, cum ar fi coșul și chiar paginile de destinație specifice produsului.

5. Instrumente de marketing încorporate pentru optimizarea paginilor de plată

Divi are instrumente de marketing puternice ca funcții încorporate pentru a vă ajuta să vă optimizați paginile de plată pentru rate de conversie mai bune. De exemplu, Divi Leads vă permite să efectuați teste împărțite și să alegeți un câștigător între două elemente. Puteți testa pagini întregi de plată, titluri, copii ale descrierilor, CTA sau alte componente.

Să presupunem că nu sunteți sigur dacă să ascundeți antetul site-ului la finalizarea comenzii. Puteți crea cu ușurință un test divizat și puteți alege un câștigător pe baza unei rate de conversie ridicate între cele două.

În mod similar, Conditions vă permite să creați experiențe de cumpărare personalizate. De exemplu, puteți afișa utilizatorilor mesaje dinamice, cum ar fi „Bun venit înapoi!” pentru clienții autentificați sau „Reduceri exclusive pentru membri! Creează-ți contul acum!” la vizitatorii începători. Divi include, de asemenea, pluginuri premium precum Bloom pentru a crea opțiuni de e-mail cu conversie mare și Monarch pentru a comercializa și a genera mai mult trafic.

Obțineți Divi + WooCommerce

Cum să vă personalizați pagina de plată WooCommerce (pas cu pas)

Acest tutorial se concentrează pe personalizarea unei pagini de plată WooCommerce. Pentru un proces pas cu pas pentru deschiderea unui magazin online, citiți ghidul nostru despre crearea unui magazin de comerț electronic.

Aveți nevoie de tema Divi instalată și activă în magazinul dvs. online pentru a continua acest tutorial.

Abonamentul anual Divi costă 89 USD, dar îl puteți obține pe viață la o plată unică de 249 USD. Odată ce ați achiziționat Divi, conectați-vă cu acreditările dvs. Elegant Themes și descărcați fișierul Divi.zip. Încărcați folderul zip în Aspectul dvs. WordPress > Teme > Adăugați fila nouă . În cele din urmă, activează-ți licența Divi.

Iată un tutorial pas cu pas despre instalarea și activarea Divi:

Obțineți Divi + WooCommerce

1. Creați un șablon de pagină de plată

Accesați Divi > Theme Builder > Adăugați un șablon nou pentru a crea de la zero.

Alegeți Checkout din WooCommerce Pages ca sursă.

Următoarea fereastră este generatorul Divi cu glisare și plasare pentru a vă proiecta șablonul de plată. Treceți cu mouse-ul peste el și faceți clic pe pictograma plus pentru a adăuga un rând și a crea un șablon de pagină de plată folosind Divi Theme Builder.

Dacă nu doriți să creați unul, importați un șablon pre-proiectat sau cereți Divi AI să creeze unul folosind Build with AI.

Amintiți-vă că nu trebuie să construiți de la zero dacă nu știți de unde să începeți. Puteți genera oricând un șablon de plată de marcă cu Divi Quick Sites.

2. Personalizați șablonul paginii dvs. de plată

Voi folosi șablonul de plată Divi Quick Sites pe care l-am generat mai sus pentru a vă arăta procesul de personalizare. Iată cum arată:

După cum puteți vedea, șablonul generat de Divi Quick Sites include deja modulele necesare de plată WooCommerce, așa că nu va trebui să faceți altceva decât să adăugați metodele de plată ( WooCommerce > Setări > Plăți ) pentru a-l face funcțional înainte de publicare.

Sfat profesionist: Instalați extensia WooPayments pentru a le permite clienților să folosească metodele de plată locale preferate, cum ar fi Paytm în India și Pix în Brazilia. De asemenea, oferă multe beneficii, cum ar fi depozite bancare automate și suport pentru mai multe valute. Adăugarea mai multor metode de plată crește șansele ca clienții dvs. să finalizeze procesul de plată.

Utilizați modulele de plată WooCommerce ale Divi

Să revizuim modulele de plată WooCommerce Divi la care aveți acces. Spre deosebire de WooCommerce Blocks de la WordPress Gutenberg, modulele WooCommerce Divi sunt optimizate pentru viteză. De exemplu, modulul Woo Checkout Bill include doar câmpurile necesare, cu etichete de câmp (opțional) și titluri dacă acestea nu sunt esențiale.

În afară de asta, în loc de un bloc părinte, modulele de plată Divi sunt separate, așa că decideți dacă adăugați o altă adresă de expediere cu Woo Checkout Shipping sau adăugați note de comandă cu Woo Checkout Information .

Puteți personaliza cu ușurință stilul unui modul făcând clic pe pictograma roată (setări) și trecând la Design din conținut . Puteți schimba rapid culorile, fonturile, butoanele și alte setări.

Cea mai bună parte a utilizării Divi sunt cele peste 200 de module de conținut nativ pentru a vă îmbunătăți pagina de plată pentru mai multe conversii. În secțiunile următoare, vom folosi diferite setări și module Divi pentru a optimiza acest șablon de plată.

Adăugați o mărturie pentru a construi credibilitatea

Afișarea dovezilor sociale la finalizarea comenzii este o modalitate excelentă de a ajuta cumpărătorii să depășească îndoielile de ultimă oră și să își finalizeze achizițiile. Folosind modulul de mărturie nativ al Divi, puteți adăuga o mărturie permanentă a clientului pentru a construi credibilitatea. Accesați setările sale pentru a-l scoate în evidență adăugând o culoare de fundal sau un chenar sau schimbând fontul, culorile etc.

Deoarece nu este dinamic, mărturia va apărea la fel pentru toți clienții, așa că asigurați-vă că alegeți o mărturie specifică mărcii în loc de una specifică produsului - ceva care descrie marca ca fiind de încredere și de încredere.

Creați o secțiune de garanție

De asemenea, puteți crea o secțiune de garanție la finalizarea comenzii pentru a le reaminti clienților de ce ar trebui să aibă încredere în cumpărături cu marca dvs. De exemplu, aici, la Elegant Themes, oferim o garanție de rambursare a banilor de 30 de zile cu o politică fără întrebări . Asta pentru că credem că, odată ce clienții noștri se obișnuiesc cu Divi, le va plăcea instantaneu și vor uita de o rambursare.

De asemenea, puteți afișa ceva simplu, cum ar fi valorile companiei dvs., numărul de clienți etc., pentru a vă evidenția autoritatea mărcii.

Pentru a crea o secțiune ca aceasta, utilizați modulele native Titlu, Pictogramă și Text ale Divi. Urmați acest tutorial pentru a utiliza Divi Builder și module pentru a adăuga și personaliza elemente.

Creați un banner de reducere de ultimă oră folosind funcționalitatea de conținut dinamic Divi

Un alt lucru grozav despre modulele Divi este că sunt dinamice, ceea ce înseamnă că extrag automat date de la anumite produse, fără a fi necesar să le introduceți manual. De exemplu, atunci când clienții tăi configurează coșul și selectează produsele, informațiile sunt completate automat în modulul Divi's Woo Checkout Details .

De asemenea, puteți modifica setările de conținut dinamic în anumite elemente pentru a personaliza și mai mult experiența utilizatorilor. De exemplu, creați un banner de reducere de ultimă oră cu o limită de timp pentru a crea urgență și pentru a încuraja utilizatorii să-și finalizeze achizițiile. Pentru aceasta, utilizați modulul Countdown Timer . Iată cum să-l personalizați:

Afișați reduceri speciale pentru clienții conectați care folosesc condițiile Divi

Condițiile Divi este o altă funcție puternică pentru optimizarea călătoriilor de cumpărare în funcție de diferiți clienți. De exemplu, creați o fereastră pop-up banner de reducere cu intenția de ieșire pentru a redirecționa clienții care nu au finalizat achiziția după ce au accesat pagina de finalizare a achiziției. Sau prezentați un cod de reducere doar pentru utilizator conectat sau o ofertă de livrare gratuită clienților care și-au creat un cont de client.

Mai întâi, creați un banner imagine și adăugați-l folosind modulul Image Divi. Apoi, accesați Setări > Avansat > Condiții. Acum, alegeți Autentificare pentru starea de utilizator. Iată cum să prezentați un cod de reducere pentru utilizatorii conectați.

Eliminați antetul și subsolul site-ului pentru a evita distragerile

Eliminarea distragerilor de la finalizarea achiziției este necesară pentru a vă asigura că clienții dvs. sunt concentrați pe finalizarea achiziției. Aceste elemente care distrag atenția ar putea fi butoane sau link-uri care ar putea să vă îndepărteze clienții de la finalizarea comenzii, în general în antetul și subsolul site-ului dvs. Deci, ascunde-le. Dar cum vă asigurați că sunt vizibile pe alte pagini, cu excepția comenzii și a coșului? A face acest lucru cu Divi este foarte ușor, datorită Divi Theme Builder.

În timp ce creați șabloane cu Divi Theme Builder, creați și atribuiți anumite pagini țintă pe care le veți folosi. De exemplu, am atribuit Checkout de la WooCommerce Pages șablonului nostru de plată, astfel încât orice modificare va afecta numai paginile de finalizare.

Pentru a ascunde antetul și subsolul din șablonul de finalizare a achiziției, dați clic pe pictograma ochi de lângă ele și Salvați modificările . Pictograma ochi reprezintă vizibilitatea și, din moment ce am dezactivat-o, înseamnă că nu sunt vizibile.

Dacă nu doriți să ascundeți complet antetul și subsolul, puteți crea versiuni mai simplificate pentru pagina dvs. de plată. Doar faceți clic pentru a edita antetul sau zona de subsol a șablonului paginii dvs. de plată și utilizați generatorul pentru a face ajustări.

Opțional: Adăugarea unui formular pop-up pentru e-mail

De asemenea, puteți utiliza pluginul Bloom de la Divi pentru a crea un pop-up de înscriere prin e-mail cu cupoane de reducere exclusiv pentru abonații de e-mail. Bloom are multe tipuri de afișare diferite, inclusiv ferestre pop-up specifice declanșatorului. De exemplu, puteți afișa fereastra pop-up dacă un utilizator este inactiv pe pagina produsului. Sau declanșează o fereastră pop-up personalizată pe pagina de mulțumire după ce finalizează achiziția. Acesta ar fi un moment minunat pentru a oferi o reducere pentru a vă alătura listei de e-mail, astfel încât să puteți obține mai multe vânzări.

Obțineți Divi + WooCommerce

3. Salvați și previzualizați șablonul dvs. de plată

Odată mulțumit de designul dvs., faceți clic pe butonul Salvați din dreapta jos a Divi Builder.

Obțineți Divi + WooCommerce

Mai multe moduri de a optimiza șabloanele de plată WooCommerce

În afară de personalizarea plății tale WooCommerce cu Divi, iată câteva plugin-uri esențiale și extensii WooCommerce care te vor ajuta să-ți optimizezi și mai mult achiziția:

• Bloom: pentru a reduce tarifele coșului abandonat, colectați clienți potențiali direct de pe paginile dvs. de finalizare a achiziției, oferind reduceri speciale sau actualizări în schimbul înscrierilor prin e-mail.
• FunnelKit: Optimizați călătoria de cumpărare a clientului dvs. creând canale automate de vânzări și plăți de o pagină.
• DiviFlash: Creșteți-vă vânzările cu machete WooCommerce uimitoare, optimizate pentru conversii, pentru magazine, produse, coșuri și pagini de plată. De asemenea, consultați Ultimate WooCommerce UI Kit.
• Divi Checkout: Oferiți mai multe opțiuni de plată, inclusiv Google Pay și Apple Pay, pentru a simplifica procesarea plăților pentru clienții dvs.
• WooCommerce One-Page Checkout: Reduceți timpul petrecut la finalizarea comenzii prin crearea proceselor de finalizare a plății pe o singură pagină.
• WooPayments: Acceptați plăți în peste 135 de valute și integrați peste 100 de metode de plată pentru a oferi clienților alegerile lor preferate.
• Manager câmpuri de plată: personalizați cu ușurință etichetele câmpurilor de achiziție WooCommerce.
• Câmpuri personalizate WooCommerce: Adăugați câmpuri personalizate derulante, casete de selectare și selectare multiplă la blocul WooCommerce Checkout implicit.
• Pluginuri WooCommerce SEO: Optimizați-vă site-ul pentru WooCommerce SEO folosind plugin-uri care simplifică procesul de indexare și optimizare a produselor, categoriilor și a altor pagini WooCommerce.

De asemenea, dacă nu v-ați hotărât încă asupra unei teme, puteți consulta aceste teme WooCommerce, care oferă mai multă personalizare de la cutie.

Instrumente necesare pentru a construi șabloane de plată WooCommerce

Divi + WooCommerce este soluția supremă de comerț electronic

Divi și WooCommerce sunt tot ce ai nevoie pentru a construi un magazin de comerț electronic unic și funcțional, de care clienții tăi sunt entuziasmați. Personalizarea Divi perfecționează funcționalitatea de comerț electronic a WooCommerce, astfel încât să puteți crea pagini de plată rapide și fluide, să le optimizați pentru mai multe conversii și să reduceți ratele coșului abandonat.

Obțineți Divi + WooCommerce

Întrebări frecvente despre personalizarea paginilor de plată WooCommerce

Cum pot personaliza pagina de plată WooCommerce fără un plugin?

Puteți personaliza pagina de achiziție WooCommerce fără un plugin folosind Editorul de site WordPress , dar puteți face doar atât de multe cu el. Pentru a obține control complet asupra designului paginii dvs. de achiziție, o modalitate mai bună este să utilizați o temă personalizabilă precum Divi, care funcționează cu WooCommerce și vă permite să modificați fiecare centimetru din magazinul dvs. online.

Cum îmi pot îmbunătăți conversiile la finalizarea plății?

Ar trebui să începeți prin a simplifica procesul de finalizare a plății. Eliminați câmpurile inutile și adăugați mai multe metode de plată, astfel încât clienții să poată alege. Apoi, utilizați factori de credibilitate, cum ar fi mărturii, garanții, reduceri și oferte de ultimă oră pentru a ajuta cumpărătorii să ia rapid decizii de cumpărare. O temă extrem de personalizabilă, cum ar fi Divi, poate adăuga cu ușurință aceste elemente pe pagina dvs. de plată.

Cum pot schimba pagina implicită de plată WooCommerce?

Schimbarea paginii implicite de plată WooCommerce cu Divi este foarte ușoară. Pur și simplu accesați Divi > Theme Builder și generați un nou șablon de plată. După aceea, puteți utiliza Divi Builder pentru a vă proiecta pagina de plată după cum doriți.

Cum pot adăuga un câmp personalizat de plată în WooCommerce?

Puteți adăuga un câmp personalizat de plată în WooCommerce instalând extensia WooCommerce Custom Fields. O modalitate mai bună este să utilizați Divi pentru a accesa peste 200 de module de conținut, inclusiv elemente interactive precum meniuri derulante, casete de selectare etc.