Come migliorare il checkout di WooCommerce per le conversioni

Uno degli aspetti che spesso vengono poco considerati quando si realizza un eCommerce è la gestione dei vari step per concludere un ordine. In questo articolo andremo ad analizzare questo aspetto, e vedremo come migliorare il checkout di WooCommerce per ricevere maggiori conversioni possibili.

Infatti, la pagina per l’invio ed il pagamento dell’ordine è quella più importante del tuo sito e bisogna quindi ottimizzarla al meglio per poter concludere sempre più transazioni.

Consigli su come ottimizzare la pagina di Checkout

Come dicevamo è estremamente importante rendere l’esperienza di acquisto, sul proprio sito e-commerce, una procedura semplice, veloce e trasparente. Il nostro futuro cliente deve conoscere in tempo zero tutte le informazioni necessarie all’acquisto e non deve essere distratto da altri fattori.

Per questo motivo è molto utile andare a modificare, secondo le proprie esigenze, la pagina di checkout di WooCommerce migliorandone l’aspetto e le informazioni richieste.

Alcuni dei punti cardine da seguire per migliorare la pagina di checkout di WooCommerce possono essere i seguenti:

• Evita di richiedere troppi campi obbligatori riducendoli all’essenziale.
• Cerca di limitare la scelta per le spedizioni, unificandole se necessario. (Ad esempio se abbiamo più corrieri per la spedizione)
• Rimuovere per quanto possibile le distrazioni (intestazione, sidebar laterali, piè di pagina, ecc)
• Rendere di facile comprensione ed usabilità i diversi metodi di pagamento (PayPal, Carta di Credito/Debito, Amazon Pay, ecc.)
• Aggiungere un modo semplice, tipo con un pulsante, il ritorno al carrello per la modifica dell’ordine.
• Mettere in risalto il riepilogo dell’ordine, la spedizione e la selezione del metodo di pagamento.

Per semplificare in maniera più efficace le spedizioni su WooCommerce potremo, ad esempio, impostare delle regole automatiche che rendano, il costo delle stesse, gratuito al raggiungimento di un determinato requisito, come spiegato in questo nostro articolo.

Migliorare il Checkout di WooCommerce

Per poter effettuare le modifiche al checkout di WooCommerce esistono diversi metodi. In questa guida andremo ad analizzare quelli che sono secondo noi di WP Special sono meno invadenti per l’intero sistema e-commerce.

Alcune delle modifiche suggerite nel paragrafo precedente possono essere facilmente apportate mediante l’utilizzo di un semplice plugin, mentre per altre dovremo utilizzare i ganci (hooks) presenti su WooCommerce.

Migliorare il Checkout di WooCommerce tramite plugin

Sicuramente tra i metodi più veloci e semplici per effettuare modifiche su WordPress ed WooCommerce si trova nell’utilizzo di un plugin. Vediamo insieme alcuni plugin che ci permettono modifiche alla pagina di checkout di WooCommerce.

Se sei nuovo su WordPress e non sai come installare un plugin ti consiglio di leggerti la nostra guida a riguardo, che ti permette di imparare a farlo in tre modi differenti in base alla necessità.

Checkout Field Editor

Tra i vari plugin disponibili per migliorare il checkout di WooCommerce troviamo sicuramente “Checkout Field Editor“. Questo plugin permette in modo semplice e veloce di aggiungere e rimuovere i campi presenti nella pagina di checkout.

I campi creati possono poi comparire sia nel backend che nelle email inviate ad esempio ai clienti. Inoltre, si può gestire facilmente l’ordine di visualizzazione dei campi di checkout dal lato amministratore, semplicemente spostando i campi su e giù.

Il plugin è disponibile in versione gratuita nella repository di WordPress e possiede una versione avanzata a pagamento.

Tra le feature di spicco della versione premium troviamo la possibilità di utilizzare i campi in modo condizionale, ed inoltre avremo una sezione personalizzata da posizionare in diversi punti della pagina.

Woocommerce one page checkout and layouts

Un altro plugin utile per modificare l’aspetto della pagina di checkout di WooCommerce è “Woocommerce one page checkout and layouts“.

Utilizzando il plugin saremo in grado di creare una pagina veloce ed intuitiva, potremo saltare il carrello e cambiare la quantità di prodotto direttamente nel checkout.

Anche questo plugin presente una versione a pagamento che aggiunge il layout multi step e altre funzioni.

Checkout Add-Ons

Segnaliamo anche il plugin Checkout Add-Ons che permetterà di arricchire la pagina del checkout con altri prodotti/servizi.

Ad esempio è molto utile se volete aggiungere la possibilità di ricevere il pacco in confezione regalo o aggiungere servizi accessori non presenti nel servizio standard dell’ecommerce.

Migliorare il Checkout di WooCommerce tramite ganci (hooks)

Per gli utenti più esperti è possibile agire direttamente tramite l’utilizzo dei ganci presenti su WooCommerce. Rispetto all’utilizzo di un plugin avremo pieno controllo sulle modifiche apportate e saremo in grado di personalizzare a fondo la pagina di checkout.

Potremo spostare gli elementi, crearne di nuovi, aggiungere pulsanti o eliminare determinati campi non necessari. Insomma potremo modificare radicalmente la pagina del checkout a nostro piacimento.

Ma vediamo ora qualche esempio pratico dell’uso dei ganci. Per migliorare l’aspetto estetico di alcune modifiche bisognerà avere anche delle conoscenze di CSS in modo da personalizzare l’aspetto che cambia da tema a tema.

Gli snippet di codice possono essere utilizzati o tramite il file functions.php di un child theme o mediante l’utilizzo di un plugin tipo Code Snippet (qui la guida su come utilizzarlo).

Spostare l’inserimento del coupon in fondo alla pagina di checkout

Con lo snippet inserito più avanti possiamo spostare il modulo per inserire un coupon in fondo alla pagina di checkout. Questo è utile per migliorare il checkout di WooCommerce e l’ordine con cui vengono richieste le informazioni al cliente.

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

Rimuovere campi dalla pagina checkout di WooCommerce

Un altro modo per migliorare il checkout di WooCommerce sta nel diminuire i campi richiesti al cliente per poter effettuare il pagamento. Con lo snippet presentato di seguito saremo in grado di eliminare diversi campi sia lato fatturazione che nei campi di spedizione, oltre ad eliminare le note sull’ordine.

function wpspecial_clears_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;
}
add_filter( 'woocommerce_checkout_fields' , 'wpspecial_clears_checkout_fields' );

Aggiungere informazioni nella pagina checkout di WooCommerce

Come già accennato, grazie ai ganci presenti potremo aggiungere e modificare come meglio crediamo la pagina di checkout. Ad esempio sarebbe sicuramente molto utile, per migliorare il checkout di WooCommerce, aggiungere informazioni di contatto come ad esempio il numero sul quale contattarvi.

Tramite il seguente codice è possibile aggiungere il numero di telefono immediatamente sotto al pulsante per effettuare il pagamento. Ovviamente il numero va modificato 🙂

function wpspecial_custom_checkout_page() {
   ?>
   <p>Problemi in fase di ordine? Chiamaci al <a href="tel:39123456789">+39 123456789</a></p>
   <?php
}
add_action( 'woocommerce_review_order_after_submit', 'wpspecial_custom_checkout_page' );

Conclusioni

In questo articolo abbiamo visto come personalizzare e migliorare il checkout di WooCommerce in modo da farlo rendere di più e riuscire a capitalizzare al meglio il nostro sito web e-commerce.

Hai qualche suggerimento in più? Scrivilo nei commenti e facci sapere la tua opinione sull’argomento.