Personalizzare il Checkout di Woocommerce

Chi si occupa di realizzare siti internet con WordPress Woocommerce oppure di assistenza Woocommerce come Unidevs, sa  benissimo che uno degli aspetti più importanti da considerare per ottimizzare le vendite di un qualunque  store online è la gestione dei vari step che il cliente deve seguire per concludere il processo di acquisto.  Questo è quello che in termini tecnici viene chiamato “checkout” del sito e-commerce  ed include sia le procedure di pagamento, sia l’inserimento di informazioni personali (ad esempio l’indirizzo di spedizione da fornire al corriere o la scelta della modalità di pagamento) e altri passaggi necessari per far andare in porto l’operazione di vendita. Ora, dato che come abbiamo detto più volte un solo passo falso all’interno della procedura di checkout può determinare l’abbandono del carrello da parte del potenziale cliente, è molto importante che tutto sia curato nei minimi particolari. Andiamo, quindi, a vedere come personalizzare checkout di un sito realizzato con Woocommerce.

 Perché bisogna personalizzare checkout di un sito Woocommerce

Come abbiamo scritto anche nel nostro articolo dedicato all’ottimizzazione del processo di checkout di un qualunque sito e-commerce, è davvero molto importante che l’utente che naviga sul tuo sito abbia un esperienza di acquisto semplice, veloce e senza intoppi.  Questo è ancora più vero man mano che si avvicina al carrello, in quanto c’è bisogno che l’attenzione del nuovo potenziale cliente non sia distratta da altri elementi e, al tempo stesso, la sua fiducia nei tuoi confronti rimanga stabile.  Un semplice rallentamento della velocità di caricamento della pagina, come abbiamo evidenziato anche in tutti i nostri articoli in cui si parla di SEO per siti Woocommerce, potrebbe non solo distoglierlo dal processo di acquisto ma anche rimandare ad un secondo momento la chiusura della transazione, lasciando campo libero ad eventuali competitor. Per questo motivo, è non solo utile ma addirittura indispensabile far sì che la pagina di checkout del tuo sito Woocommerce sia ottimizzata e personalizzata secondo le tue necessità e soprattutto secondo le necessità dei tuoi clienti. Ecco subito dei consigli pratici che ti consigliamo di seguire quando vuoi ottimizzare il carrello del tuo sito realizzato con Woocommerce:

• Non dilungarti troppo nella richiesta di informazioni personali riducendo il più possibile i campi obbligatori da riempire;
• Inserisci un numero adeguato di opzioni per quello che concerne sia la scelta del corriere per la spedizione, sia il metodo di pagamento: un numero troppo esiguo potrebbe distogliere alcuni clienti, uno eccessivo potrebbe, invece, confonderli;
• Rimuovi tutte le possibili distrazioni, mettendo invece in risalto le informazioni salienti relative all’ordine (tipologia e numero di articoli; tempi e indirizzo di spedizione; costo e modalità di pagamento) in modo da limitare eventuali errori e conseguente necessità di effettuare dei resi;
• Inserimento di una CTA chiara e facilmente raggiungibile in modo da portare l’utente più velocemente verso la conversione.

È, inoltre, sempre importante inserire eventuali automatismi come ad esempio la possibilità di usufruire della spedizione gratuita al raggiungimento di un determinato importo, oppure di godere di determinati sconti selezionando prodotti specifici o inserendo dei coupon. Vediamo ora di seguito tutti i metodi per personalizzare il checkout di un sito Woocommerce che sono:

1. Sfruttando i campi dello stesso Woocommerce;
2. Utilizzando un plugin;
3. Programmando la pagina del carrello in modo professionale.

Mostrare e nascondere campi sfruttando le opzioni di Wocommerce

La configurazione di default della pagina di checkout di uno store Woocommerce è, in genere, in grado di soddisfare le esigenze dei negozi online più semplici e con minori necessità.  Tuttavia, in molti casi come abbiamo detto sopra si pone la necessità di personalizzarla per ridurre il tasso di abbandono del carrello e soprattutto favorire un miglior tasso di conversione. Spesso, nelle strategie di web marketing, capita di doversi occupare di aspetti come quelli legati all’ottimizzazione del carrello che hanno a che fare con il miglioramento d’UX o esperienza utente. Ciò detto, occorre anche sottolineare che quando si tratta di modifiche non sostanziali all’impostazione della pagina di checkout che lo store ha di default, è possibile effettuare tali cambiamenti semplicemente usando dei filtri già presenti fra le opzioni della piattaforma che consentono di mostrare e/o nascondere i campi secondo le nostre preferenze. Questa possibilità può aiutarti a risolvere in molti casi le tue esigenze di personalizzazione del carrello, tuttavia, quando le modifiche sono molto ingenti e sostanziali, questa potrebbe non essere sufficiente ma dovrai per forza avvalerti di uno dei due metodi successivi, ossia procedere con l’applicazione di un plug-in oppure agire sul codice.

Modificare i campi: Plugin o Programmatore esperto

È fuori discussione il fatto che per personalizzare il checkout di un sito Woocommerce il metodo più facile e veloce è quello che si basa sull’utilizzo di un plugin.  In particolare, uno dei plugin più semplici e sicuri da usare anche da chi ha pochissima esperienza è Checkout Field Editor (ma ce ne sono ovviamente anche molti altri), disponibile sia in versione free, sia in versione premium con delle funzionalità ancora più avanzate.  Questo plugin ti permette, infatti, di eliminare, aggiungere, editare nuovi campi su qualunque tipo di pagina di carello per siti e-commerce WordPress Woocommerce. Una volta installato e attivato, tutto quello che devi fare è entrare nel percorso relativo al plugin e procedere con l’editing: 

1. Per cambiare valore ad un campo, procedi entrando su quest’ultimo, effettuando la modifica e cliccando infine su “Save”;
2. Se invece vuoi aggiungere un nuovo campo, clicca su “Add Field”. I campi che vengono aggiunti andranno a comparire sia nel backend del sito, sia nelle email inviate ai clienti e la loro visualizzazione potrà essere gestita facilmente tramite pannello;
3. Per rimuoverli sarà necessario invece usare il comando “Disable / Remove” mettendo la spunta sui campi che vuoi eliminare. 

Tuttavia è evidente che la personalizzazione della pagina di carrello tramite plugin può avere comunque dei limiti, anche perché si tratta di componenti aggiuntive che possono creare problemi al sito e soprattutto rallentarlo o esporlo ad un maggiore rischio di attacco hacker. L’opzione migliore quindi è quella apparentemente “più difficile”, ma sicuramente molto più sicura ed affidabile, ossia quella di affidarsi al codice!  Questo non è un metodo di personalizzazione del checkout di un sito Woocommerce che tutti possono fare, quindi nella maggior parte dei casi sarà necessario affidarsi ad un programmatore esperto che svolga il lavoro in modo ultra rapido e ultra professionale.

Modificare i campi di checkout in modo professionale

Se per personalizzare il checkout del tuo e-commerce hai bisogno di apportare anche modiche estetiche o grafiche al template, non hai scelta: l’unica soluzione è quella di affidarti alle modiche al codice CSS. Questo è reso possibile utilizzando degli specifici ganci o “hooks” presenti su WooCommerce. Questi, di fatto, ti permettono di avere massimo controllo su tutti i cambiamenti eseguiti, per una personalizzazione molto più completa e professionale. Per dirla in modo più semplice, un hook di Worpress non è altro che una funzione della piattaforma che permette di eseguire alcune modifiche lasciando inalterato il file core.  In pratica, gli hook, che si suddividono a loro volta in action e filter, consentono di cambiare la configurazione predefinita di un sito WordPress, aggiungendo funzioni personalizzate o disabilitandone i processi senza modificare il file principale. L’uso degli hooks richiede ovviamente un po’ di conoscenza in fatto di programmazione, ma con qualche dritta potresti riuscirci anche tu. 

Come aggiungere nuovi campi

Come già accennato, grazie ai ganci o hooks è possibile  aggiungere nuovi campi alla pagina di checkout del tuo sito WordPress. Vediamo un esempio pratico. Mettiamo ad esempio che tu voglia aggiungere un campo relativo al numero di telefono.  Ecco la riga di codice che dovrai inserire per fare in modo che il numero compaia, ad esempio, sotto al comando relativo alla scelta del sistema di pagamento: 

function wpspecial_custom_checkout_page() {    ?>     Desideri maggiori informazioni? Chiamaci al +39 123456789      <?php } add_action( ‘woocommerce_review_order_after_submit’, ‘wpspecial_custom_checkout_page’ );

Come modificare i campi già presenti

In altri casi, può essere utile modificare i campi già presenti nella pagina di checkout WooCommerce. Questo accade molto spesso nel caso delle modalità di pagamento e fatturazione, che come abbiamo detto sopra devono essere sempre abbastanza stringati per non distrarre l’utente e farlo allontanare dal carrello. Ecco quali sono le righe da codice da utilizzare in questo caso:

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’ );

Devi personalizzare il Chechout del tuo woocommerce? Chiedi a Unidevs

In questo articolo abbiamo visto come fare a personalizzare il checkout di un sito WordPress WooCommerce al fine di ottimizzare le conversioni e ridurre l’abbandono del carrello, che uno dei rischi maggiori quando le operazioni finali relative alla pagina di checkout sono troppo lunghe, prolisse e difficili. Avrai, quindi, compreso che anche se il modo più facile di modificare e integrare la tua pagina di checkout consiste nell’utilizzare un plugin, in molti casi questo sistema risulta inefficace oppure insufficiente a dare alla pagina l’aspetto che desideri. Ecco che quindi non ti rimane che affidarti ad un intervento sul codice tramite gli hook che può essere eseguito solo da personale esperto come quello di Unidevs. Non esitare quindi a contattare il nostro servizio di assistenza WordPress Woocommerce per chiederci il supporto necessario.