WooCommerce: Cum să personalizați Checkout pentru conversii

Publicat: 2020-06-06

Am avut onoarea să vorbesc la WCEU 2020, mulțumită lui WooCommerce, care m-a găzduit în piesa lor Sponsor. A fost o discuție fulger scurtă și dulce în prima zi (vineri), numită „ Personalizarea plății WooCommerce pentru a îmbunătăți conversiile ”, urmată de o sesiune de codare live sâmbătă.

Iată înregistrarea video a discursului fulger, precum și câteva fragmente PHP și CSS pe care le puteți copia/lipi pentru a vă îmbunătăți WooCommerce Checkout și pentru a vă aștepta imediat la o creștere a ratei de conversie. Așadar, bucurați-vă de videoclip și apoi testați fragmentele pe care le găsiți mai jos!

Video: Personalizarea procesării WooCommerce pentru a îmbunătăți conversiile

WooCommerce Checkout este cea mai importantă pagină a site-ului dvs. Ceea ce înseamnă că trebuie să-l optimizezi.

În această prezentare, arunc o privire asupra site-urilor web B2C de comerț electronic de succes și văd ce fac. Poate că putem identifica tendințele și punctele slabe și să ne apucăm de asta.

Vă rugăm să rețineți că sunt disponibile subtitrări. Pur și simplu faceți clic pe butonul „CC” din colțul din dreapta jos al playerului video.

10 fragmente de optimizare a ratei de conversie a plății WooCommerce PHP și CSS

În sesiunea de urmărire, mi-am partajat ecranul și am început să codez live ceea ce am învățat în timpul discuției fulger. Pe scurt, am decis să luăm măsuri cu privire la următoarele puncte:

  1. Eliminați antetul, bara laterală, subsolul, astfel încât să nu existe distrageri de atenție, iar clientul să fie pe deplin concentrat pe singurul îndemn rămas – butonul „PLĂTIRE”
  2. Mutați rezumatul comenzii, selectarea metodei de livrare și de plată în partea dreaptă, astfel încât să fie întotdeauna vizibil
  3. Împărțiți aspectul lung format din facturare, expediere, note de comandă, formular de cupon etc. în pași vizuali
  4. Mutați formularul de cupon în partea de jos pentru a evita fraudarea cuponului
  5. Păstrați formularul de expediere întotdeauna „deschis”, deoarece aceasta este cea mai importantă secțiune pentru B2C
  6. Mutați formularul de facturare sub formularul de expediere
  7. Eliminați câmpurile de facturare/livrare inutile; cu cât sunt mai multe câmpuri, cu atât rata de conversie este mai mică!
  8. Faceți selecția metodei de expediere să iasă mai mult în evidență, deoarece aspectul implicit este destul de slab
  9. Adăugați un link „modificați coșul de cumpărături”, astfel încât utilizatorii să poată reveni la pagina Coș și să își editeze comanda
  10. Adăugați insigne de securitate / telefon / Întrebări frecvente pentru a permite clientului să aibă încredere în afacerea dvs. online

Dar înainte de codare, să aruncăm o privire la stiva de instrumente.

Tema : Am folosit tema oficială WooCommerce, Storefront. Aceasta vine deja cu o personalizare CSS încorporată pentru finalizarea plății. Un alt favorit al meu ar fi putut fi Shoptimizer, o temă creată pentru viteza și conversiile WooCommerce. Oricum, deoarece unul dintre fragmente este despre eliminarea antetului și a subsolului din pagina de finalizare a comenzii, am folosit ghidul meu de cârlige vizuale cu tema Storefront, așa că știu ce cârlige să folosesc.

Cârlige : pe lângă utilizarea ghidului meu vizual pentru cârlige pentru Storefront, trebuie să cunoaștem și toate cârligele WooCommerce Checkout. Ghidul meu WooCommerce Visual Hook pentru pagina de finalizare a achiziției este perfect pentru ceea ce avem nevoie.

Documente : WooCommerce are un document frumos care explică cum să personalizați câmpurile de plată. Într-unul dintre fragmente, vom elimina unele dintre câmpurile de facturare/livrare, așa că aceasta este o referință obligatorie.

1. Fragment PHP: Eliminați antetul, bara laterală și subsolul din pagina WooCommerce Checkout

Acest fragment este valabil numai pentru tema Storefront . Va trebui să ajustați codul pentru tema personalizată. 

/**
 * @snippet       Storefront Theme Remove Header Footer @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp', 'bbloomer_unhook_storefront_functions' );

function bbloomer_unhook_storefront_functions() {
	if ( is_checkout() ) {
		remove_all_actions( 'storefront_header' );
		remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
		remove_action( 'storefront_footer', 'storefront_footer_widgets', 10 );
	}
}

Pe Storefront, odată ce eliminați bara laterală cu apelul remove_action de mai sus, aspectul nu se va ajusta automat la lățime completă. Bara laterală va dispărea, dar „spațiul” va rămâne acolo și va împinge formularul de plată spre stânga.

Asta înseamnă că avem nevoie și de puțin CSS pentru a remedia asta: 

@media (min-width: 768px) {
	.woocommerce-checkout.right-sidebar .content-area {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}

Ai nevoie de o dovadă vizuală? Faceți clic aici pentru a vedea capturile de ecran de personalizare a paginii WooCommerce Checkout „înainte” și „după”.

2. Fragment CSS: Mutați revizuirea comenzii în dreapta sus pe pagina de plată WooCommerce

Tema Storefront deja face asta din cutie! Deci, se pare că au studiat și tendințele comerțului electronic și au decis că a fost alegerea potrivită.

Desigur, majoritatea temelor nu fac asta în mod implicit. Pentru inspirație, puteți încerca să copiați CSS-ul Storefront (poate fi necesar să schimbați unele selectoare): 

@media (min-width: 768px) {

	/* Billing & Shipping @ Left */

	.col2-set {
		width: 52.9411764706%;
		float: left;
		margin-right: 5.8823529412%;
	}

	/* Order Review @ Right */

	#order_review_heading, #order_review {
		width: 41.1764705882%;
		float: right;
		margin-right: 0;
		clear: right;
	}

}

Acum, aș dori, de asemenea, să fac „lipicioasă” întreaga revizuire a comenzii. Ceea ce înseamnă că, odată ce un utilizator derulează în jos pentru a completa câmpurile de plată, de exemplu, caseta de revizuire a comenzii (acum în dreapta sus) ar trebui să rămână vizibilă și „fixată” în partea de sus a browserului.

Am încercat următorul CSS, dar, din păcate , nu pare să funcționeze (tema Storefront). Poți ajuta poate? 

#order_review {
    position: sticky;
    top: 0;
}

Ai nevoie de o dovadă vizuală? Faceți clic aici pentru a vedea capturile de ecran de personalizare a paginii WooCommerce Checkout „înainte” și „după”.

3. Fragment PHP: Mutați formularul de cupon în partea de jos @ WooCommerce Checkout Page

Pentru aceasta, putem folosi ghidul de cârlig vizual pentru finalizarea plății. În primul rând, îl scoatem, apoi îl citim în partea de jos. 

/**
 * @snippet       Move Coupon @ Checkout Bottom
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

Ai nevoie de o dovadă vizuală? Faceți clic aici pentru a vedea capturile de ecran de personalizare a paginii WooCommerce Checkout „înainte” și „după”.

4. Fragment PHP: Păstrați formularul de expediere întotdeauna „deschis” @ WooCommerce Checkout Page

Din fericire, dacă te uiți la fișierul șablon form-shipping.php, WooCommerce ne oferă un filtru aici: 

apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 )

Ceea ce înseamnă că acum pot codifica un simplu fragment PHP pentru a înlocui acel comportament: 

/**
 * @snippet       Shipping Always Open @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_ship_to_different_address_checked', 'bbloomer_open_shipping_checkout' );

function bbloomer_open_shipping_checkout() {
	return 1;
}

Ai nevoie de o dovadă vizuală? Faceți clic aici pentru a vedea capturile de ecran de personalizare a paginii WooCommerce Checkout „înainte” și „după”.

5. Fragment CSS: mutați formularul de facturare sub formularul de expediere @ WooCommerce Checkout Page

În primul rând, formularele de facturare și expediere trebuie să fie realizate la lățime completă. Tema Storefront deja face asta, așa că în cazul în care utilizați o altă temă, încercați cu aceasta: 

.col2-set .col-1, .col2-set .col-2 {
	float:none;
	width: 100%
	margin: 0;
}

Odată ce aveți Facturarea și livrarea una deasupra celeilalte, acum dorim să prezentăm mai întâi formularul de expediere (sus) și formularul de facturare după (jos). Este posibil să faceți acest lucru cu PHP, dar există o modalitate mult mai ordonată de a realiza acest lucru: CSS flex . 

.col2-set {
    display: flex;
    flex-direction: column;
}

.col2-set > .col-1 {
	order: 2; 
}

.col2-set > .col-2 {
	order: 1; 
}

Pe scurt, declar că detaliile clientului (învelișul formularelor de facturare și expediere) se afișează ca „flex”. În acest fel, pot folosi proprietatea „comandă” și pot schimba ordinea verticală a div-urilor Facturare și Livrare.

Ai nevoie de o dovadă vizuală? Faceți clic aici pentru a vedea capturile de ecran de personalizare a paginii WooCommerce Checkout „înainte” și „după”.

6. Fragment PHP: Împărțiți aspectul lung format din facturare, expediere, revizuire a comenzii în pași vizuali @ WooCommerce Checkout Page

Aici folosim din nou ghidul de cârlig vizual și imprimăm 3 noi div-uri în poziții specifice (mai sus de expediere, deasupra facturării, deasupra revizuirii comenzii). 

/**
 * @snippet       Add Visual Steps @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_shipping', 'bbloomer_checkout_step1' );

function bbloomer_checkout_step1() {
	echo '<p class="steps">STEP1</p>';
}

add_action( 'woocommerce_checkout_billing', 'bbloomer_checkout_step2' );

function bbloomer_checkout_step2() {
	echo '<p class="steps">STEP2</p>';
}

add_action( 'woocommerce_checkout_before_order_review_heading', 'bbloomer_checkout_step3' );

function bbloomer_checkout_step3() {
	echo '<p class="steps">STEP3</p>';
}

Desigur, avem nevoie și de niște CSS: 

.steps {
	background: black;
	color: white;
	display: inline-block;
	padding: 0.5em 2em;
}

Ai nevoie de o dovadă vizuală? Faceți clic aici pentru a vedea capturile de ecran de personalizare a paginii WooCommerce Checkout „înainte” și „după”.

7. Fragment PHP: eliminați câmpurile de facturare/expediere inutile @ WooCommerce Checkout Page

Aici, referința la documentație pe care am împărtășit-o mai sus vine în ajutor. Filtrul „ woocommerce_checkout_fields ” ne permite să „dezsetăm” câmpurile de care nu avem nevoie. 

/**
 * @snippet       Remove Ship/Bill Fields @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
	
     unset( 
		 $fields['order']['order_comments'], 
		 $fields['shipping']['shipping_company'],
		 $fields['shipping']['shipping_address_2'],
		 $fields['billing']['billing_company'],
		 $fields['billing']['billing_address_2'],
		 $fields['billing']['billing_postcode'],
		 $fields['billing']['billing_phone']
     );

     return $fields;
}

Ai nevoie de o dovadă vizuală? Faceți clic aici pentru a vedea capturile de ecran de personalizare a paginii WooCommerce Checkout „înainte” și „după”.

8. Fragment PHP (Idee): Evidențiază mai mult selecția metodei de livrare @ WooCommerce Checkout Page

Acesta este cel mai dificil fragment și asta pentru că WooCommerce nu este cu adevărat flexibil în acest sens. Pentru a demonstra acest lucru, mai întâi trebuie să aflăm cum este generat formularul pentru metoda de expediere.

În șablonul de verificare a comenzii găsim acest PHP: 

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>

   <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>

   <?php wc_cart_totals_shipping_html(); ?>

   <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>

<?php endif; ?>

Este evident că trebuie să studiem cum funcționează funcția wc_cart_totals_shipping_html() , pentru a vedea dacă există filtre care ne permit să personalizăm rezultatul.

Din păcate, această funcție apelează pur și simplu fișierul șablon cart-shipping.php datorită funcției wc_get_template() ; Spun din păcate pentru că același șablon este folosit și pe pagina Coș.

Acum, acest lucru devine mai complicat decât mine, dar dacă dorim să scoatem formularul metodei de expediere din acel tabel de examinare a comenzii, trebuie să scriem sau să deținem un șablon personalizat (de exemplu checkout-shipping.php), plasați-l în / folderul woocommerce al temei noastre copil și apoi folosiți filtrul wc_get_template pentru a încărca șablonul nostru alternativ numai pe pagina de finalizare a achiziției. Cam complex, dar realizabil – vă las pe seama dumneavoastră

Ai nevoie de o dovadă vizuală? Faceți clic aici pentru a vedea capturile de ecran de personalizare a paginii WooCommerce Checkout „înainte” și „după”.

9. Fragment PHP: Adăugați un link „editați coșul de cumpărături” @ WooCommerce Checkout Page

Deoarece am eliminat toate linkurile din pagina de finalizare a comenzii, este corect să oferim utilizatorului șansa de a reveni la pagina Coș în cazul în care dorește să modifice cantități sau să elimine produse.

Puteți alege orice cârlig WooCommerce Checkout, dar în acest caz l-am selectat pe cel „woocommerce_checkout_before_order_review”, care este poziționat chiar sub titlul „Comanda dvs.”. 

/**
 * @snippet       Add edit cart link @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_before_order_review', 'bbloomer_edit_cart_checkout' );

function bbloomer_edit_cart_checkout() {
	echo '<a href="' . wc_get_cart_url() . '">Edit Cart</a>';
}

Cu un pic de CSS, puteți, de asemenea, să poziționați acest lucru pe aceeași linie cu „Comanda dvs.” și să economisiți puțin spațiu.

Ai nevoie de o dovadă vizuală? Faceți clic aici pentru a vedea capturile de ecran de personalizare a paginii WooCommerce Checkout „înainte” și „după”.

10. Fragment PHP: Adăugați numărul de telefon @ WooCommerce Checkout Page

Puteți adăuga orice conținut doriți pe pagina Checkout, mai ales dacă îi ajută pe potențialii clienți să aibă încredere în afacerea dvs.

De obicei, ați adăuga insigne de plată securizată, întrebări frecvente sau link-uri de contact, precum și o modalitate imediată de a intra în contact cu dvs. (chat live și număr de telefon).

Așadar, iată cum puteți adăuga un număr de telefon chiar sub butonul „PLASĂ COMANDA” de pe pagina de finalizare a comenzii. 

/**
 * @snippet       Phone Number @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_review_order_after_submit', 'bloomer_phone_checkout_page' );

function bloomer_phone_checkout_page() {
	?>
	<p>Need help? Give us a call at <a href="tel:1123456789">+1 123456789</a></p>
	<?php
}

Ai nevoie de o dovadă vizuală? Faceți clic aici pentru a vedea capturile de ecran de personalizare a paginii WooCommerce Checkout „înainte” și „după”.

Personalizarea paginii de plată WooCommerce: Capturi de ecran „Înainte” și „După”.

Inainte de

Pagina WooCommerce Checkout (tema Storefront) ÎNAINTE de a aplica fragmentele 1->10.

După

Aceasta este pagina WooCommerce Checkout DUPĂ aplicarea fragmentelor 1->10. După cum puteți vedea, am obținut un aspect fără distracție, concentrat pe B2C, orientat spre expediere și securizat.