WooCommerce: come personalizzare il checkout per le conversioni

Pubblicato: 2020-06-06

Ho avuto l'onore di parlare al WCEU 2020 grazie a WooCommerce, che mi ha ospitato nel loro percorso di Sponsor. È stato un breve e dolce discorso fulmineo il primo giorno (venerdì), intitolato " Personalizzazione del checkout di WooCommerce per migliorare le conversioni ", seguito da una sessione di codifica dal vivo sabato.

Ecco la registrazione video del discorso lampo, oltre ad alcuni snippet PHP e CSS che puoi copiare/incollare per migliorare il tuo WooCommerce Checkout e aspettarti immediatamente un aumento del tasso di conversione. Quindi, goditi il ​​video e poi prova gli snippet che trovi qui sotto!

Video: personalizzazione del checkout di WooCommerce per migliorare le conversioni

Il WooCommerce Checkout è la pagina più importante del tuo sito web. Il che significa che devi ottimizzarlo.

In questa presentazione, do un'occhiata ai siti Web di e-commerce B2C di successo e vedo cosa fanno. Forse possiamo identificare tendenze e punti deboli e metterci al lavoro su questo.

Si prega di notare che sono disponibili i sottotitoli. Basta fare clic sul pulsante "CC" in basso a destra del video player.

10 frammenti di ottimizzazione del tasso di conversione di WooCommerce Checkout PHP e CSS

Nella sessione di follow-up, ho condiviso il mio schermo e ho iniziato a codificare in tempo reale ciò che abbiamo appreso durante il discorso fulmineo. In poche parole, abbiamo deciso di intervenire sui seguenti punti:

  1. Rimuovi intestazione, barra laterale, piè di pagina in modo che non ci siano distrazioni e il cliente sia completamente concentrato sull'unico invito all'azione rimasto: il pulsante "PAGA"
  2. Sposta il riepilogo dell'ordine, la spedizione e la selezione del metodo di pagamento sul lato destro in modo che sia sempre visibile
  3. Dividi il layout lungo composto da fatturazione, spedizione, note d'ordine, modulo coupon ecc. in passaggi visivi
  4. Sposta il modulo del coupon in basso per evitare frodi sui coupon
  5. Tieni il modulo di spedizione sempre “aperto” in quanto questa è la sezione più importante per B2C
  6. Sposta il modulo di fatturazione sotto il modulo di spedizione
  7. Rimuovere i campi di fatturazione/spedizione non necessari; più campi ci sono, più basso sarà il tuo tasso di conversione!
  8. Fai risaltare maggiormente la selezione del metodo di spedizione, perché il layout predefinito è piuttosto scadente
  9. Aggiungi un link "modifica carrello" in modo che gli utenti possano tornare alla pagina Carrello e modificare il loro ordine
  10. Aggiungi badge di sicurezza / telefono / FAQ per consentire al cliente di fidarsi del tuo business online

Ma prima di codificare, diamo un'occhiata allo stack degli strumenti.

Tema : ho usato il tema ufficiale di WooCommerce, Storefront. Questo viene già fornito con alcune personalizzazioni CSS integrate per il checkout. Un altro dei miei preferiti potrebbe essere Shoptimizer, un tema creato per la velocità e le conversioni di WooCommerce. Ad ogni modo, poiché uno degli snippet riguarda la rimozione di intestazione e piè di pagina dalla pagina di pagamento, ho quindi utilizzato la mia guida agli hook visiva del tema Storefront, quindi so quali hook utilizzare.

Ganci : oltre a utilizzare la mia guida visiva ai ganci per Storefront, richiediamo anche di conoscere tutti i ganci di WooCommerce Checkout. My WooCommerce Visual Hook Guide per la pagina di pagamento è perfetta per ciò di cui abbiamo bisogno.

Documenti : WooCommerce ha un bel documento che spiega come personalizzare i campi di pagamento. In uno degli snippet rimuoveremo alcuni dei campi di fatturazione/spedizione, quindi questo è un riferimento da conoscere.

1. Frammento PHP: rimuovi intestazione, barra laterale e piè di pagina @ Pagina di pagamento WooCommerce

Questo snippet è valido solo per il tema Storefront . Dovrai modificare il codice per il tuo tema personalizzato. 

/**
 * @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 );
	}
}

Su Storefront, una volta rimossa la barra laterale con la chiamata remove_action sopra, il layout non si adatterà automaticamente alla larghezza intera. La barra laterale andrà via ma il suo "spazio" rimarrà lì e spingerà il modulo di pagamento a sinistra.

Ciò significa che abbiamo anche bisogno di un po' di CSS per risolvere il problema: 

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

Hai bisogno di una prova visiva? Fare clic qui per visualizzare gli screenshot "prima" e "dopo" della personalizzazione della pagina di pagamento di WooCommerce.

2. Snippet CSS: sposta la recensione dell'ordine in alto a destra nella pagina di pagamento di WooCommerce

Il tema Storefront lo fa già fuori dagli schemi! Quindi, sembra che abbiano studiato anche le tendenze dell'e-commerce e abbiano deciso che era la scelta giusta.

Naturalmente, la maggior parte dei temi non lo fa per impostazione predefinita. Per trarre ispirazione, puoi provare a copiare il CSS di Storefront (potrebbe essere necessario modificare alcuni selettori): 

@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;
	}

}

Ora, vorrei anche rendere "appiccicosa" l'intera recensione dell'ordine. Ciò significa che, una volta che un utente scorre verso il basso per compilare i campi di pagamento, ad esempio, la casella Revisione dell'ordine (ora in alto a destra) dovrebbe rimanere visibile e "fissata" nella parte superiore del browser.

Ho provato il seguente CSS ma sfortunatamente non sembra funzionare (tema Storefront). Puoi aiutare forse? 

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

Hai bisogno di una prova visiva? Fare clic qui per visualizzare gli screenshot "prima" e "dopo" della personalizzazione della pagina di pagamento di WooCommerce.

3. Frammento di PHP: sposta il modulo del coupon in basso nella pagina di pagamento di WooCommerce

Possiamo usare la guida del gancio visivo per il checkout per questo. Per prima cosa, lo rimuoviamo, quindi lo leggiamo in fondo. 

/**
 * @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 );

Hai bisogno di una prova visiva? Fare clic qui per visualizzare gli screenshot "prima" e "dopo" della personalizzazione della pagina di pagamento di WooCommerce.

4. Frammento PHP: mantieni il modulo di spedizione sempre "aperto" @ WooCommerce Checkout Page

Per fortuna se guardi il file modello form-shipping.php, WooCommerce ci fornisce un filtro qui: 

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

Ciò significa che ora posso codificare un semplice frammento di PHP per sovrascrivere quel comportamento: 

/**
 * @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;
}

Hai bisogno di una prova visiva? Fare clic qui per visualizzare gli screenshot "prima" e "dopo" della personalizzazione della pagina di pagamento di WooCommerce.

5. Snippet CSS: sposta il modulo di fatturazione sotto il modulo di spedizione nella pagina di pagamento di WooCommerce

Prima di tutto, i moduli di fatturazione e spedizione devono essere compilati a tutta larghezza. Il tema Storefront lo fa già, quindi nel caso in cui stai utilizzando un altro tema, prova con questo: 

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

Una volta che hai Fatturazione e Spedizione una sopra l'altra, ora vogliamo mostrare prima il modulo di spedizione (in alto) e il modulo di fatturazione dopo (in basso). È possibile farlo con PHP, ma c'è un modo molto più ordinato per farlo: CSS flex . 

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

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

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

In poche parole, dichiaro che i dettagli del cliente (involucro dei moduli di fatturazione e spedizione) vengono visualizzati come "flessibili". In questo modo, posso utilizzare la proprietà "order" e cambiare l'ordine verticale dei div Billing e Shipping.

Hai bisogno di una prova visiva? Fare clic qui per visualizzare gli screenshot "prima" e "dopo" della personalizzazione della pagina di pagamento di WooCommerce.

6. Frammento PHP: suddividi il lungo layout fatto di fatturazione, spedizione, revisione dell'ordine in passaggi visivi @ WooCommerce Checkout Page

Qui utilizziamo ancora una volta la guida visiva del gancio e stampiamo 3 nuovi div in posizioni specifiche (sopra la spedizione, sopra la fatturazione, sopra la revisione dell'ordine). 

/**
 * @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>';
}

Ovviamente abbiamo bisogno anche di alcuni CSS: 

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

Hai bisogno di una prova visiva? Fare clic qui per visualizzare gli screenshot "prima" e "dopo" della personalizzazione della pagina di pagamento di WooCommerce.

7. Frammento PHP: rimuovi i campi di fatturazione/spedizione non necessari nella pagina di pagamento di WooCommerce

Qui, il riferimento alla documentazione che ho condiviso sopra viene in soccorso. Il filtro “ woocommerce_checkout_fields ” ci permette di “annullare” i campi che non ci servono. 

/**
 * @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;
}

Hai bisogno di una prova visiva? Fare clic qui per visualizzare gli screenshot "prima" e "dopo" della personalizzazione della pagina di pagamento di WooCommerce.

8. PHP Snippet (Idea): fai risaltare di più la selezione del metodo di spedizione @ WooCommerce Checkout Page

Questo è lo snippet più difficile, e questo perché WooCommerce non è molto flessibile in questo senso. Per dimostrarlo, dobbiamo prima scoprire come viene generato il modulo del metodo di spedizione.

Nel modello di checkout "revisione dell'ordine" troviamo questo 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; ?>

È evidente che dobbiamo studiare come funziona la funzione wc_cart_totals_shipping_html() , per vedere se ci sono dei filtri che ci permettono di personalizzare l'output.

Sfortunatamente, quella funzione chiama semplicemente il file modello cart-shipping.php grazie alla funzione wc_get_template() ; Dico purtroppo perché quello stesso modello viene utilizzato anche nella pagina Carrello.

Ora, questo sta diventando più complicato di me, ma se desideriamo rimuovere il modulo del metodo di spedizione da quella tabella di revisione dell'ordine, fondamentalmente dobbiamo scrivere o possedere un modello personalizzato (ad esempio checkout-shipping.php), inserirlo nella / woocommerce del nostro tema figlio, quindi usa il filtro wc_get_template per caricare il nostro modello alternativo solo nella pagina di pagamento. Un po' complesso, ma fattibile - lascio a te

Hai bisogno di una prova visiva? Fare clic qui per visualizzare gli screenshot "prima" e "dopo" della personalizzazione della pagina di pagamento di WooCommerce.

9. Frammento di PHP: aggiungi un link "modifica carrello" alla pagina di pagamento di WooCommerce

Poiché abbiamo rimosso tutti i collegamenti dalla pagina di pagamento, è giusto dare all'utente la possibilità di tornare alla pagina del carrello nel caso in cui desideri modificare le quantità o rimuovere i prodotti.

Puoi scegliere qualsiasi hook di WooCommerce Checkout, ma in questo caso ho selezionato quello "woocommerce_checkout_before_order_review", che è posizionato proprio sotto l'intestazione "Il tuo ordine". 

/**
 * @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>';
}

Con un po' di CSS, puoi anche posizionarlo sulla stessa riga di "Il tuo ordine" e risparmiare spazio.

Hai bisogno di una prova visiva? Fare clic qui per visualizzare gli screenshot "prima" e "dopo" della personalizzazione della pagina di pagamento di WooCommerce.

10. Frammento PHP: aggiungi il numero di telefono alla pagina di pagamento di WooCommerce

Puoi aggiungere qualsiasi contenuto desideri alla pagina di pagamento, principalmente se aiuta i potenziali clienti a fidarsi della tua attività.

Di solito aggiungi badge di pagamento sicuro, FAQ o link di contatto, oltre a un modo immediato per metterti in contatto con te (chat dal vivo e numero di telefono).

Quindi, ecco come aggiungere un numero di telefono proprio sotto il pulsante "EFFETTUA ORDINE" nella pagina di pagamento. 

/**
 * @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
}

Hai bisogno di una prova visiva? Fare clic qui per visualizzare gli screenshot "prima" e "dopo" della personalizzazione della pagina di pagamento di WooCommerce.

Personalizzazione della pagina di pagamento di WooCommerce: schermate "Prima" e "Dopo".

Prima

La pagina WooCommerce Checkout (tema Storefront) PRIMA di applicare gli snippet 1->10.

Dopo

Questa è la pagina di pagamento di WooCommerce DOPO aver applicato gli snippet 1->10. Come puoi vedere, abbiamo ottenuto un layout di pagamento sicuro, senza distrazioni, focalizzato sul B2C, orientato alla spedizione.