3 moduri eficiente de a personaliza și edita pagina de plată WooCommerce

Căutați cea mai bună modalitate de a edita pagina de plată WooCommerce ?

Învățarea cum să personalizați pagina de plată WooCommerce vă permite mai mult control asupra designului acesteia și crește potențialul de mai multe vânzări.

‍ În acest tutorial detaliat, vă vom arăta trei moduri fără cod de a personaliza pagina de finalizare a comenzii, inclusiv ajustarea completă a designului și/sau modificarea câmpurilor care apar pe pagina de plată.

De asemenea, vom analiza toate funcțiile încorporate pe care le oferă WooCommerce pentru a personaliza experiența de plată.

Să începem…

Motive pentru a edita pagina de plată WooCommerce

Există un motiv flagrant pentru a modifica pagina de plată WooCommerce pentru început? Depinde. Modulul de checkout încorporat este curat, funcțional și suficient de rapid pentru a procesa plățile fără a-ți enerva clienții.

Dar este posibil să-i observați și dezavantajele. Iată principalele motive pentru care ați putea dori să editați pagina de plată WooCommerce :

• Pentru a înlocui elementele implicite de branding WooCommerce, cum ar fi fonturile, stilurile lor prestabilite și violetul WooCommerce.
• Pentru a adăuga articole web care au legătură cu afacerea dvs., cum ar fi un logo, culorile mărcii și linkuri către documentația de asistență.
• Dacă este necesară optimizarea plății pentru conversii după testare.
• Pentru a accelera procesul de finalizare a comenzii, transformându-l într-un singur pas.
• Pentru a include vânzări în plus, vânzări încrucișate și produse conexe.
• Pentru adăugarea de câmpuri personalizate sau eliminarea unor câmpuri furnizate de WooCommerce.
• Pentru a modifica opțiunile de livrare.
• Pentru modificarea elementelor de design, cum ar fi textul butonului, textul câmpului prestabilit și opțiunile de plată pentru oaspeți.

Cum se editează pagina de plată WooCommerce

Aveți mai multe opțiuni disponibile pentru a edita pagina de plată WooCommerce. Metoda care funcționează cel mai bine pentru dvs. va depinde de modificările specifice pe care încercați să le faceți și de dacă sunteți sau nu deschis să utilizați un plugin.

Mai jos, vom trece peste trei dintre cele mai bune metode:

1. Setări native WooCommerce – WooCommerce include o mulțime de opțiuni încorporate pentru personalizarea procesului de plată, pe care le vom detalia în prima metodă. Tema dvs. ar putea oferi, de asemenea, propriile opțiuni pentru a personaliza designul paginii de finalizare a achiziției.
2. Elementor Pro – Elementor Pro oferă acum propriul widget de plată care vă permite să personalizați complet designul paginii de plată. Aceasta este o opțiune excelentă dacă doriți în mod special să editați designul paginii.
3. Editor de câmpuri de plată – aceasta este o opțiune excelentă dacă doriți să editați câmpurile de formular care apar pe pagina de plată. Îl puteți folosi pentru a adăuga câmpuri noi, pentru a elimina câmpurile implicite și pentru a rearanja totul după cum este necesar.

Hai sa trecem prin ele..

Metoda 1: Utilizați setările implicite de plată WooCommerce

WooCommerce oferă setări încorporate pentru a vă edita modulul de plată, iar tema dvs. WordPress poate oferi deja instrumente pentru ajustarea unor câmpuri și setări de plată în Personalizatorul WordPress.

Este întotdeauna înțelept să verificați aceste setări înainte de a căuta un plugin suplimentar, o temă sau un personalizare de câmp, deoarece este posibil să aveți deja caracteristicile de care aveți nevoie.

De exemplu, WooCommerce are instrumente pentru eliminarea anumitor câmpuri, activarea cotelor de impozitare în timpul comenzii și afișarea câmpurilor pentru cupoane.

Pasul 1: adăugați calcule de taxe și un câmp de cupon la finalizare

WooCommerce are setări încorporate pentru a automatiza calculele taxelor și pentru a accepta cupoane la finalizare.

Pentru a activa/dezactiva, accesați WooCommerce > Setări pe WordPress.

Alegeți fila General și derulați în jos la secțiunea Activare taxe . Bifați caseta pentru a activa ratele și calculele de impozitare în timpul plății. Aceasta generează și afișează taxe pe baza ratelor pe care le configurați în WooCommerce ( WooCommerce > Setări > Taxă > Tarife standard ).

Bifați caseta pentru a activa utilizarea codurilor de cupon pentru a afișa un câmp în care clienții pot introduce coduri de reducere.

Dacă preferați să nu afișați anumite elemente, pur și simplu eliminați casetele de selectare. Asigurați-vă că faceți clic pe butonul Salvare pentru a vedea modificările pe front-end.

Pasul 2: afișați prețul produselor cu sau fără taxe

Este un lucru să calculezi taxele la sfârșitul plății, dar trebuie să decideți și dacă doriți să includeți taxele în costul total al produselor, mai ales pe măsură ce clienții trec prin finalizarea comenzii.

În general, acest lucru arată mai multă transparență, în loc să crească prețul cu taxe chiar înainte ca clientul să plătească.

Pentru a include taxele cu prețul în procesul de finalizare a comenzii, accesați WooCommerce > Setări > Taxe .

Derulați în jos pe pagină pentru a găsi câmpul „Afișați prețurile în timpul coșului și la finalizarea comenzii”.

Alegeți din meniul derulant:

• Inclusiv taxe
• Excluzand taxa

Faceți clic pe Salvare modificări .

Pasul 3: setați articolele de expediere afișate în casă

De asemenea, sub WooCommerce > Setări , puteți marca zona de expediere, metodele și calculele care apar în finalizarea WooCommerce.

Pur și simplu accesați fila Expediere și ajustați:

• Calcule: pentru a activa calculatorul de expediere pe pagina coșului
• Calcule: pentru a ascunde costurile de expediere la finalizarea comenzii până când se introduce o adresă
• Destinație de expediere: pentru a seta adresele de livrare implicite la finalizarea comenzii

Faceți clic pe Salvare modificări .

Pasul 4: Gestionați conturile și confidențialitatea la casă

În timp ce rămâneți sub WooCommerce > Setări , accesați fila Conturi și confidențialitate .

În partea de sus a paginii, veți vedea două câmpuri:

• Checkout pentru oaspeți: includeți/eliminați plățile pentru oaspeți și conectările existente la cont
• Crearea contului: permiteți clienților să creeze un cont sau să înceapă un abonament în timpul plății

Continuați în jos pe pagina Conturi și confidențialitate pentru a găsi zona Politică de confidențialitate .

Completați caseta de text Politica de confidențialitate Checkout pentru a vă asigura că clienții văd politica în timp ce o verifică. Lăsați câmpul necompletat dacă preferați să nu afișați o politică de confidențialitate în acea zonă.

Pasul 5: alegeți pagina reală de finalizare a comenzii și alte setări avansate

Navigați la fila Avansat pentru a afișa o secțiune de configurare a paginii ; acest lucru îi determină pe comercianți să spună WooCommerce unde să trimită clienții în timp ce fac check-out.

În mod implicit, WooCommerce generează pagini Coș , Checkout , Contul meu și Termeni și condiții , pe care le puteți găsi accesând Pagini > Toate paginile de pe WordPress.

Cu toate acestea, aveți opțiunea de a genera o pagină complet nouă și de a o lega aici. Aceasta anulează paginile implicite de plată și trimite clienții către cele personalizate.

O altă opțiune din fila Avansat este Forțarea plății securizate , care necesită un certificat SSL.

Pasul 6: Schimbați designul de plată al temei în Personalizatorul WordPress

Temele WordPress cu funcționalitate WooCommerce instalează adesea instrumente de personalizare WordPress pentru a ajusta cu ușurință stilul de plată.

Rețineți că toate temele WooCommerce oferă setări unice de personalizare WordPress (unele nu au deloc setări), dar, în general, merită să verificați Personalizatorul WordPress pentru un control rapid asupra plății.

Pentru a începe, accesați Aspect > Personalizare pe WordPress.

Dacă este disponibilă, tema dvs. ar trebui să afișeze un buton WooCommerce undeva în Personalizatorul WordPress. Faceți clic pe asta.

Acesta este doar un exemplu cu tema Storefront (deci este posibil să nu vedeți același lucru), dar este destul de comun ca temele să aibă o filă Checkout în Personalizator. Alegeți asta, sau ceva similar, care poate indica controlul asupra comenzii.

Parcurgeți toate setările de plată oferite de tema dvs. În tema Storefront, puteți face aceste câmpuri opționale, obligatorii sau ascunse:

• Câmp pentru numele companiei
• Câmpul din rândul 2 de adresă
• Câmp de telefon

De asemenea, este posibil să evidențiați câmpurile obligatorii cu un asterisc.

În cele din urmă, tema Storefront oferă opțiuni pentru a afișa o pagină de Politică de confidențialitate și Termeni și condiții la sfârșitul plății.

Metoda 2: Folosiți un generator de pagini pentru a edita câmpurile de plată WooCommerce și stilul general

Creatorii de pagini precum Elementor, Beaver Builder și Themify oferă toate widget-uri de conținut WooCommerce pentru a suprascrie ceea ce este în prezent pe pagina de plată WooCommerce.

Creatorii de pagini își rezervă aproape exclusiv modulele de plată WooCommerce pentru planurile lor Premium, așa că există șanse mari să fii nevoit să plătești pentru această funcționalitate. De exemplu, primiți widgetul Elementor Checkout cu planul Pro.

Acestea fiind spuse, un generator de pagini vă oferă un control aproape complet asupra paginii dvs. de plată, deci este o modalitate ușoară de a edita WooCommerce, fără cunoștințe de codificare, și numai pentru aproximativ 50 USD până la 100 USD pe an.

În acest tutorial, vă vom arăta cum funcționează, în general, personalizarea plății cu un generator de pagini, folosind Elementor.

Pasul 1: Deschideți pagina de plată desemnată în Elementor

Pentru a edita WooCommerce checkout în Elementor, trebuie să accesați pagina Checkout creată automat de WooCommerce. Găsiți asta în Pagini > Toate paginile .

Deschideți pagina cu eticheta „Pagină de plată”, apoi faceți clic pe Editați cu Elementor .

Pasul 2: Eliminați codul scurt de finalizare a comenzii WooCommerce

WooCommerce a adăugat automat „WooCommerce checkout” în editor, care redă modulul implicit de plată WooCommerce.

Scopul este de a schimba asta cu un modul de finalizare a plății din generatorul de pagini. Deci, ștergeți codul scurt de finalizare a comenzii WooCommerce.

Pasul 3: Introduceți widgetul Elementor Checkout

Acum este timpul să găsiți widgetul de finalizare a plății pentru generatorul de pagini. Elementor oferă unul numit Checkout , pe care îl puteți găsi folosind bara de căutare sau răsfoind sub titlul WooCommerce. Faceți clic și trageți widgetul Checkout pe pagina goală, unde scrie „Trag Widget Here”.

Notă: este posibil să nu vedeți widgetul Checkout dacă nu ați făcut upgrade la versiunea Premium a Elementor. Acesta este cazul majorității creatorilor de pagini.

Pasul 4: personalizați conținutul, stilul și funcțiile avansate

După ce glisați peste widget-ul de finalizare, Elementor redă previzualizarea plății. Puteți apoi să faceți clic pe aceste file din stânga pentru a personaliza fiecare aspect al comenzii:

De exemplu, puteți comuta Aspectul general pe o singură coloană și puteți ajusta textul substituent pentru câmpul pentru prenume.

Alte file de personalizare includ:

• detalii de facturare
• Informații suplimentare
• Comanda dumneavoastră
• Cupon
• Plată

Există, de asemenea, nenumărate modalități de a edita WooCommerce checkout în fila Stil .

Utilizați aceste file:

• Secțiuni
• Tipografie
• Forme
• Comanda Rezumat
• Butonul de cumpărare

De exemplu, am schimbat butonul albastru Cumpărare cu unul verde.

În cele din urmă, fila Avansat oferă instrumente și mai puternice de editare:

• Aspecte
• Efecte de mișcare
• Transformări
• Fundaluri
• Frontiere
• Măști
• Receptivitatea
• Atribute
• CSS personalizat

Atâta timp cât rămâneți cu pagina setată anterior ca „Pagină de plată” pentru WooCommerce și schimbați codul scurt de finalizare a plății WooCommerce pentru widgetul de finalizare a paginii, puteți salva modificările și puteți finaliza procesul!

Metoda 3: Instalați un plugin de personalizare pentru a edita câmpurile

Există multe pluginuri de personalizare a plății WooCommerce, cum ar fi:

Majoritatea pluginurilor de plată WooCommerce oferă instrumente suplimentare de personalizare pentru modificarea și adăugarea câmpurilor, dar există câteva pentru a reînnoi complet designul, cum ar fi pluginul Multi-step Checkout.

Vă sugerăm să vă uitați la toate pluginurile recomandate de mai sus, dar vom parcurge un tutorial rapid cu pluginul Checkout Field Editor pentru a vă ajuta să înțelegeți cum să editați WooCommerce checkout cu un plugin.

Pasul 1: Instalați și activați pluginul Checkout Field Editor

Instalați pluginul Checkout Field Editor, apoi parcurgeți procesul de activare a pluginului.

Odată activ, pluginul adaugă o filă nouă pe WordPress, pe care o puteți accesa accesând WooCommerce > Formular de plată.

Pasul 2: Editați câmpurile curente

Plugin-ul afișează toate câmpurile curente din interiorul plății WooCommerce, cu excepția că pluginul face acum legătura cu finalizarea WooCommerce implicită, astfel încât să aveți control deplin asupra câmpurilor.

Puteți edita:

• Câmpurile de facturare
• Câmpuri de expediere
• Câmpuri suplimentare

Pentru a edita câmpurile de plată WooCommerce, faceți clic pe Editați lângă câmpul pe care doriți să-l modificați. Pentru acest exemplu, vom modifica câmpul Nume companie .

În fereastra Editare câmp , puteți modifica opțiunile pentru câmp, cum ar fi:

• Eticheta
• Substituent
• Valoare implicită
• Clasă
• Validare

De asemenea, este posibil să debifați caseta Obligatorie , astfel încât clienții să nu fie obligați să completeze câmpul. Puteți, de asemenea, să dezactivați câmpul, astfel încât să nu apară deloc în casă. Asigurați-vă că faceți clic pe Salvare și închidere .

Pluginul salvează de obicei totul după aceea, dar puteți face clic din nou pe butonul Salvare modificări pentru a vă asigura că funcționează.

După cum puteți vedea, am eliminat câmpul Nume companie din zona de plată.

Și a dispărut de la checkout frontal.

De asemenea, poate doriți să editați ceva precum textul substituent . În acest caz, este același proces de deschidere a câmpului în cauză și de modificare a setărilor.

Câmpul Prenume de la finalizarea comenzii dezvăluie acum un nou text substituent.

Pasul 3: Adăugați un câmp nou la finalizarea comenzii WooCommerce

Pentru a adăuga un câmp complet nou, faceți clic pe butonul Adăugare câmp .

Alegeți Tipul câmpului, alegând dintre opțiuni precum:

• Text
• Număr
• Ascuns
• Parola
• Telefon
• Caseta de bifat
• Lună
• URL
• si multe altele

De exemplu, vom crea un câmp Număr și vom cere clienților să introducă numărul de recompense de loialitate. De asemenea, puteți desemna elemente precum substituenți, valori implicite și dacă este un câmp obligatoriu.

Asigurați-vă că bifați caseta Activat , apoi faceți clic pe Salvare și închidere .

Pasul 4: Vedeți rezultatele

Pe backend, veți vedea noul câmp de finalizare a comenzii în partea de jos a listei. Este plasat implicit la sfârșit, dar puteți face clic și trage pentru a reordona.

Și noul câmp apare și pe modulul de finalizare a plății frontend.

Creați pagina perfectă de plată astăzi

Vă recomandăm să începeți cu setările implicite de plată WooCommerce pentru a vedea dacă vă ajută să obțineți rezultatele dorite. Pentru editări mai avansate, luați în considerare utilizarea câmpurilor personalizate. Și pentru personalizări avansate, dar relativ ușor de implementat, utilizați unul dintre generatorii de pagini sugerați.

Care sunt întrebările tale principale despre cum să editezi finalizarea plății WooCommerce? Împărtășește-ți gândurile în comentarii!