Cum să creați WooCommerce o pagină de plată

Doriți să reduceți abandonul coșului și să vă creșteți ratele de conversie? În acest ghid, veți învăța cum să creați o finalizare WooCommerce pe o singură pagină, atât cu și fără pluginuri, pentru a vă ajuta să vă creșteți vânzările.

Nu este un secret pentru nimeni că checkout-ul este una dintre cele mai importante pagini pentru un magazin online. Este, totuși, și pasul în care mulți utilizatori își abandonează cărucioarele. Potrivit cercetărilor recente, aproape 70% dintre cumpărători își abandonează coșul la un moment dat, iar 21% dintre ei o fac la casă. De ce? De obicei, pentru că procesul de cumpărare este prea lung sau complicat.

Chiar dacă nu există o singură soluție care să funcționeze pentru fiecare site de comerț electronic, paginile de achiziție de o singură pagină funcționează mai bine pentru majoritatea companiilor. De aceea, crearea unei plăți de o pagină pentru magazinul dvs. WooCommerce vă poate ajuta să reduceți abandonul coșului și să vă creșteți vânzările.

Ce este o finalizare WooCommerce pe o pagină?

O finalizare de o pagină afișează toate câmpurile de plată pe o singură pagină . Poate include conținutul coșului, detalii de plată, adrese de facturare și de expediere, opțiuni de expediere și alte informații, cum ar fi imagini, text sau formulare de contact suplimentare.

Scopul principal din spatele unei plăți pe o pagină este de a scurta procesul de cumpărare și de a reduce abandonul coșului. Pe măsură ce clienții completează toate informațiile pentru a plasa comanda pe o singură pagină, este mai probabil ca aceștia să termine procesul.

Avantajele plăților pe o pagină

Unele dintre beneficiile unei plăți pe o pagină sunt:

• Ajută la reducerea abandonului căruciorului
• Scurtează procesul de plată
• Crește ratele de conversie
• Ușor de înțeles, deoarece cumpărătorii pot vedea toate informațiile de care au nevoie pentru a le completa pe o singură pagină

Pentru mai multe informații despre plățile cu o pagină și pe mai multe pagini, aruncați o privire la acest ghid complet.

Cum să creați o casă WooCommerce pe o pagină

Există diferite moduri de a crea o finalizare WooCommerce pe o pagină :

1. Folosind un plugin
2. Din punct de vedere programatic
3. Cu un generator de pagini
4. Din tabloul de bord WordPress

În această secțiune, vom arunca o privire asupra fiecărei opțiuni, astfel încât să o puteți alege pe cea care se potrivește cel mai bine abilităților și nevoilor dvs.

1) Creați o finalizare de o pagină cu un plugin

Prima opțiune pentru a crea o finalizare pe o pagină în WooCommerce este să utilizați un plugin. Există multe pluginuri de plată de o pagină, atât gratuite, cât și premium. Pentru această demonstrație, vom folosi WooCommerce Direct Checkout. Acest plugin vă va ajuta să scurtați procesul de plată și să vă creșteți ratele de conversie. Nu numai că puteți crea o pagină de plată, ci și puteți elimina câmpurile de finalizare inutile, adăugați un buton de cumpărare rapidă și multe altele.

Checkout pe o pagină cu Direct Checkout

Direct Checkout are o versiune gratuită cu funcții de bază și 3 planuri premium cu mai multe funcționalități care încep de la 19 USD (plată unică).

Mai întâi, descărcați pluginul. O poți face din acest link sau din tabloul de bord WordPress. După activare, accesați WooCommerce > Direct Checkout . Aici, configurați-l după cum urmează, astfel încât să redirecționeze utilizatorii din magazin și paginile unui singur produs direct către pagina de finalizare a achiziției.

• Adăugat la alerta coș : înlocuiește alerta „Vizualizare coș” cu plata directă
• Link-ul adăugat la coș: înlocuiește linkul „Vizualizare coș” cu finalizarea directă a comenzii
• Redirecționare coș : Aceasta vă permite să schimbați comportamentul butonului Adăugați în coș
• Redirecționare coș către : puteți alege unde să redirecționați utilizatorii după ce adaugă ceva în coșul lor. În acest caz, îi vom redirecționa către casă
• Înlocuiți adresa URL a coșului : deoarece, după ce cumpărătorii adaugă ceva în coș, îi vom redirecționa către casă, vom înlocui adresa URL a coșului cu linkul de finalizare a achiziției.

Vă rugăm să rețineți că aceste modificări se vor aplica paginilor de magazin, produs unic și categorii. În plus, asigurați-vă că nu aveți niciun link care să ducă utilizatorii la coș, deoarece îl vom dezactiva.

Asta e! Tocmai ați simplificat procesul de finalizare a comenzii redirecționând clienții de pe paginile de produse și de magazin direct către casă. În plus, cumpărătorii își vor putea edita și confirma comenzile pe pagina de finalizare a comenzii.

Puteți crea o pagină de plată cu versiunea gratuită a WooCommerce Direct Checkout, dar dacă doriți mai multe funcții pentru a vă duce finalizarea plății la următorul nivel, puteți verifica unele dintre planurile premium.

2) Creați o finalizare de o pagină în mod programatic

În această secțiune, vom folosi câteva scripturi PHP și stilul CSS pentru a adăuga funcționalități la finalizarea de o pagină pe care am creat-o cu pluginul. Așa că vă recomandăm să aruncați o privire la prima secțiune și să instalați și să configurați pluginul pentru a crea o singură pagină de plată. Va dura literalmente câteva minute.

Odată ce ați făcut acest lucru, să vedem cum să personalizați complet pagina dvs. de plată de o pagină în mod programatic .

NOTĂ : Deoarece vom edita câteva fișiere cu teme de bază, înainte de a începe, asigurați-vă că creați o copie de rezervă a site-ului dvs. și că aveți o temă secundară instalată pe site-ul dvs. Puteți utiliza oricare dintre aceste pluginuri pentru teme pentru copii sau puteți crea unul singur urmând acest ghid.

2.1) Adăugați metadate ale produsului la pagina de finalizare a achiziției

Să începem prin a adăuga câteva informații despre produsul pe care utilizatorul îl achiziționează. Vom afișa numele, imaginea în miniatură și descrierea produsului pe pagina de finalizare a achiziției.

Deoarece am dezactivat pagina coșului de cumpărături, după adăugarea unui produs în coș, cumpărătorii vor fi redirecționați către casă. Chiar dacă pagina coșului este ascunsă, o putem folosi pentru a prelua toate informațiile despre produs din ea.

Pentru a face acest lucru, pur și simplu lipiți următorul cod în fișierul functions.php al temei copilului dvs.:

 // cârlig pentru afișarea metadatelor produsului
 add_action('woocommerce_checkout_before_customer_details','QuadLayers_product_meta');
 funcția QuadLayers_product_meta(){
 echo „<div class="custom-product"><h2>Sunteți pe cale să cumpărați un „;
 $cart = WC()->cart->get_cart();
 foreach( $cart ca $cart_item_key => $cart_item ){
 $produs = $cart_item['date'];
 echo $produs->get_name()."</h2>";
 echo $produs->get_image();
 echo "<span>".$product->get_description()."</span>";
 }
 echo „<h3>Finalizează comanda completând formularul de mai jos</h3>”;
 }

Pentru a testa acest lucru, faceți clic pe butonul de achiziție de pe orice produs și după ce ați fost redirecționat către pagina de finalizare a comenzii, veți vedea ceva de genul acesta:

2.2) Suprascrierea fișierului șablon de plată WooCommerce

Fișierul responsabil pentru tipărirea paginii de finalizare a achiziției este form-checkout-php și se află în pluginul WooCommerce din folderul șabloane: /woocommerce/templates/checkout.

Pentru a suprascrie acest fișier, copiați fișierul original din pluginul WooCommerce și inserați-l în folderul de finalizare , în directorul WooCommerce al temei dvs. copil.

În finalizarea WooCommerce implicită, aspectul este setat pe două coloane. Formularele de facturare, expediere și suplimentare sunt afișate în prima coloană, iar detaliile comenzii în cealaltă.

Puteți modifica acest lucru prin editarea clasei HTML a elementului <div> care include formularele, de la col2-set la col1-set , după cum urmează:

 <div class="col1-set">

După această ediție simplă, toate formularele vor fi afișate într-o singură coloană cu lățime completă, astfel:

În continuare, vom edita titlul detaliilor comenzii și îl vom schimba din „Comanda dvs.” în „Evaluarea comenzii” cu următorul script:

 <h3><?php esc_html_e( 'Revizuire comandă', 'woocommerce' ); ?></h3>

Acestea sunt doar câteva exemple simple de ceea ce puteți face aici. Simțiți-vă liber să o duceți mai departe și să vă faceți propriile personalizări. Puteți utiliza oricare dintre funcțiile native WordPress aici. Pentru mai multe informații despre cârligele de casă, puteți arunca o privire la acest articol.

Pentru a afla mai multe despre cum să personalizați șabloanele WooCommerce în mod programatic, aruncați o privire la acest ghid complet.

2.3) Adăugați coșul de cumpărături la pagina de finalizare a comenzii

Puteți folosi câteva coduri scurte pe pagina de finalizare a comenzii, așa că, dacă doriți să adăugați coșul acolo, puteți utiliza codul scurt al coșului WooCommerce după cum urmează:

 echo do_shortcode(' [ woocommerce_cart ] ');

Pentru a afișa coșul chiar înainte de detaliile comenzii, lipiți acest script PHP în fișierul functions.php al temei dumneavoastră:

 add_action('woocommerce_checkout_after_customer_details','QuadLayers_add_cart_checkout');
 funcția QuadLayers_add_cart_checkout(){
       echo do_shortcode(' [ woocommerce_cart ] ');
 }

Acum ar trebui să vedeți coșul cu produsele adăugate de utilizator la sfârșitul formularelor de finalizare a comenzii:

2.4) Adăugați conținut personalizat la pagina de plată

Când clienții examinează detaliile comenzii, aceștia pot alege o metodă de plată și pot face clic pe „Plasează comanda” pentru a finaliza achiziția. Deoarece acest bloc este afișat într-o coloană din dreapta, vom insera conținut în partea stângă pentru a obține un design echilibrat.

Aceasta este funcția de conținut personalizat care se va lipi în fișierul functions.php unde explicăm unele dintre politicile de returnare, metodele de plată, livrarea și așa mai departe. Simțiți-vă liber să îl personalizați și să îl adaptați magazinului dvs.:

 add_action('woocommerce_checkout_before_order_review','QuadLayers_add_column_before_order_review');
funcția QuadLayers_add_column_before_order_review(){    
    printf(' <div><h3>Mai multe informații despre comanda dvs.:</h3>
 <p>Vă mulțumim foarte mult pentru achiziția din magazinul nostru. Iată câteva informații utile pe care ar putea fi necesar să le cunoașteți</p>
 <ul>
 <li>Facem tot posibilul pentru a livra cât mai repede posibil, dar pentru a menține un serviciu optim, produsul dvs. poate dura până la două zile lucrătoare înainte de sosire</li>
 <li>Politicile noastre de returnare vă permit să solicitați o înlocuire în termen de până la 15 zile de la cumpărare. <a href="#">Citiți aici politicile magazinului</a></li>
 <li>Dacă alegeți metoda de plată cu cardul de credit, aceasta ar putea adăuga o întârziere de două zile la livrare în unele cazuri</li>
 <li>Dacă nu sunteți mulțumit de ceea ce ați primit, puteți opta și pentru o rambursare conform politicii noastre de rambursare</li>
 <li>Aveți un cupon de reducere? Dacă notă, obțineți-l aici și reveniți ca să îl puteți aplica</li>
 </ul>
 </div>','woocommerce');
}

Și acesta este rezultatul final:

2.5) Adăugarea unor stiluri CSS la pagina de plată

În fișierul function.php , veți vedea că am adăugat propria noastră clasă, pe care am numit-o custom-product . Vom folosi această clasă pentru a stila conținutul cu niște scripturi CSS. În plus, putem oferi ultimele retușuri designului noului nostru checkout de o pagină fără a folosi clasa noastră personalizată.

Acesta este scriptul CSS complet pe care l-am folosit în acest tutorial. Pur și simplu copiați și inserați-l în fișierul style.css al temei copilului dvs.:

 /* ascunde titlul formularului de facturare */
.woocommerce-billing-fields > h3:nth-child(1){
    afișaj: niciunul;
}
/* esti pe cale sa cumperi... */
.custom-product > h2:nth-child(1){
    text-align: centru;
}
/* imagine */
img.attachment-woocommerce_thumbnail:nth-child(2){
    margin:auto;
}
/* Descriere */
.custom-product > span:nth-child(3){
    margin:auto;
    latime:50%;
    display:bloc;
}
/* Finalizați comanda ...*/
.custom-product > h3:nth-child(4){
    text-align: centru;
    marjă: 25px 0 25px 0;
}
/* mai multe informatii.. */
.custom-product > div:nth-child(8){
    plutește la stânga;
    latime:47%;
}
#Detalii Client{
    margine-jos: 40px;
}

NOTĂ : Pentru această demonstrație, am folosit tema Storefront, așa că poate fi necesar să ajustați selectoarele CSS dacă utilizați o altă temă sau dacă ați adăugat propriile personalizări.

După aceea, dacă totul a mers bine, ar trebui să vedeți următoarele pe pagina de plată:

Asta e! Tocmai ați creat un program WooCommerce complet personalizat pe o pagină de plată .

3) Creați o finalizare de o pagină cu un generator de pagini

O altă opțiune interesantă pentru a crea și a personaliza o finalizare a unei pagini în WooCommerce este utilizarea unui generator de pagini. Există mai mulți constructori de pagini acolo. Pentru această demonstrație, vom folosi Site Origin. Cu peste 1 milion de instalări active, acesta este unul dintre cei mai populari generatori de pagini datorită simplității și eficienței sale.

Procesul este similar pentru majoritatea creatorilor de pagini, așa că, indiferent de cel pe care îl utilizați, ar trebui să puteți urma ghidul fără probleme.

Mai întâi, descarcă Site Origin din depozitul WordPress, instalează-l și activează-l pe site-ul tău web. Apoi, deschideți pagina de plată cu editorul și adăugați-i un nume. O vom numi o singură pagină.

După cum puteți vedea, pagina de plată este doar un cod scurt WooCommerce plasat într-un bloc Gutenberg. Dacă ați dezactivat blocurile Gutenberg în backend, veți vedea și același shortcode, dar în vechiul editor de text. Pur și simplu ștergeți blocul de coduri scurte și adăugați unul pentru generatorul de pagini.

Acum putem începe să creăm o finalizare complet personalizată de o pagină folosind generatorul de pagini. Puteți adăuga orice widget în coloane și îl puteți seta la aspectul dorit. Rețineți că trebuie să introduceți

 [ woocommerce_checkout ]

shortcode din nou, altfel nu va funcționa.

Și aici vine partea cea mai bună. De asemenea, puteți utiliza oricare dintre widget-urile sau modulele disponibile în aspectul generatorului de pagini. În plus, puteți include și alte coduri scurte. Coșul și cele „Contul meu” sunt destul de comune.

Acesta este un exemplu de bază, așa că va trebui să ajustați fiecare widget și să personalizați pagina de plată în funcție de nevoile dvs. De asemenea, rețineți că fiecare generator de pagini funcționează diferit, așa că, deși procesul este similar, poate fi necesar să ajustați unele lucruri. Ca recomandare generală, șabloanele cu lățime completă și fără bară laterală funcționează de obicei cel mai bine.

4) Creați o finalizare de o pagină folosind editorul de blocuri Gutenberg

În mod similar, vă puteți personaliza finalizarea WooCommerce pe o pagină folosind editorul de blocuri Gutenberg. Pentru aceasta, în tabloul de bord WordPress, deschideți pagina de finalizare a comenzii și veți vedea blocul cu codul scurt de plată. Să adăugăm mai multe blocuri la această pagină făcând clic pe butonul de adăugare a blocului ( + ) și selectând Coloane .

Aici puteți folosi oricare dintre blocurile și codurile scurte disponibile pentru a vă personaliza complet pagina de plată. Alternativ, dacă aveți abilități de codificare, puteți edita și finalizarea inserând propriul cod HTML cu blocul de cod. Pentru această demonstrație, am adăugat coșul și codurile scurte ale contului meu în 2 coloane, astfel încât să arate astfel:

Și așa puteți crea cu ușurință o finalizare de o pagină în WooCommerce cu editorul de blocuri Gutenberg.

Sfaturi finale

• Când creați o casă de plată pe o singură pagină, țineți întotdeauna cont de obiectivul principal al plății: să permiteți clienților să plaseze comenzile cât mai ușor posibil. Ar trebui să evitați orice conținut care distrage atenția utilizatorilor de la acest obiectiv.
• Toate informațiile pe care utilizatorii trebuie să le examineze înainte de a apăsa butonul „Plasați comanda” ar trebui să fie disponibile pe aceeași pagină, astfel încât să poată face totul din pagina de finalizare a comenzii. Includeți toate informațiile necesare și evitați inserarea de link-uri care duc utilizatorii la o adresă URL diferită.
• Utilizatorilor nu le plac paginile lungi de conținut atunci când cumpără. Păstrați lucrurile simple și curate și concentrați-vă pe realizarea unei pagini de plată eficiente și profesionale

Concluzie

Per total, plățile pe o singură pagină vă vor ajuta să scurtați procesul de cumpărare, să reduceți abandonul coșului și să creșteți ratele de conversie. Chiar dacă în unele cazuri, plățile pe mai multe pagini pot fi mai eficiente, pentru majoritatea magazinelor, plățile mai scurte tind să funcționeze mai bine.

În acest ghid, am văzut diferite moduri de a crea o pagină de plată în WooCommerce:

• Cu un plugin
• Din punct de vedere programatic
• Cu un generator de pagini
• Folosind editorul de blocuri Gutenberg

Dacă doriți o soluție rapidă și eficientă, utilizarea Direct Checkout este cea mai bună alegere. Acest plugin freemium vă permite să construiți o pagină de plată în câteva minute și include, de asemenea, câteva funcții pentru a vă ajuta să vă îmbunătățiți procesul de finalizare a comenzii și să vă creșteți vânzările. De exemplu, puteți elimina câmpurile de plată, puteți adăuga butoane de cumpărare rapidă și de vizualizare rapidă și multe altele. Dacă nu doriți să instalați un plugin suplimentar și utilizați un generator de pagini, puteți crea pagina de plată fie folosind editorul de blocuri Gutenberg, fie cu generatorul de pagini.

Pe de altă parte, dacă aveți abilități de codare, aveți mai multe opțiuni pentru a vă edita pagina de plată. După ce ați creat plata cu pluginul Direct Checkout, puteți adăuga scripturi PHP și CSS pentru a vă personaliza complet finalizarea. În acest articol, am văzut câteva exemple, dar puteți face mult mai multe. Simțiți-vă liber să le folosiți ca bază și să jucați pentru a găsi ce funcționează cel mai bine pentru dvs.

Care este metoda ta preferată de a crea o pagină de plată în WooCommerce? Cunoașteți vreun altul pe care ar trebui să îl includem? Anunțați-ne în secțiunea de comentarii de mai jos!