2 modi efficaci per personalizzare le pagine di pagamento di WooCommerce
Pubblicato: 2021-03-29Ogni anno, i marchi di e-commerce perdono 18 miliardi di dollari di ricavi dalle vendite a causa dell'abbandono del carrello. Una delle cause principali risiede nel complicato processo di pagamento.
La pagina di pagamento funge da cancello finale per trasformare i browser in clienti. Una pagina di pagamento ideale deve garantire una transazione regolare per gli utenti dall'inizio alla fine. Se stai cercando di aumentare le conversioni e migliorare i profitti dei tuoi negozi, l'ottimizzazione della pagina di pagamento di WooCommerce è un must!
In questo articolo, spiegheremo perché dovresti personalizzare le pagine di pagamento di WooCommerce. Inoltre, vengono presentati anche 2 modi efficaci per modellare e sfruttare la tua pagina di pagamento.
Iniziamo!
- Conosci le pagine di pagamento di WooCommerce
- Perché dovresti personalizzare le pagine di pagamento di WooCommerce
- Come personalizzare manualmente le pagine di pagamento di WooCommerce con il codice
- Modifica le pagine di pagamento di WooCommerce utilizzando i plugin
Conosci le pagine di pagamento di WooCommerce
Per impostazione predefinita, la pagina di pagamento di WooCommerce sembra piuttosto noiosa e semplice. Il suo compito non è altro che richiedere agli acquirenti di inserire alcune informazioni di base, inclusi nome e cognome, indirizzo, numeri di telefono, indirizzo e-mail, note dell'ordine e dettagli di fatturazione, ecc. 
Sebbene questi dettagli siano essenziali per i siti Web per elaborare i dati di pagamento e per consentire ai clienti di completare l'acquisto, non aiutano ad aumentare la conversione o ridurre l'abbandono del carrello.
Inoltre, la pagina di pagamento predefinita non prende di mira le informazioni chiave e non presenta alcun ordine strategico. Ecco perché devi apportare alcune modifiche alla tua pagina di pagamento, sia nel design che nei contenuti.
Prima di addentrarci in 2 modi efficaci per personalizzare le pagine di pagamento di WooCommerce, discutiamo ulteriormente i vantaggi della personalizzazione della pagina di pagamento.
Perché dovresti personalizzare le pagine di pagamento di WooCommerce
Il primo e più importante vantaggio è fornire acquisti facili e veloci, che offrono ai clienti un'esperienza di acquisto online senza interruzioni.
Personalizzando la pagina di pagamento, puoi spazzare via tutta la lanugine e concentrarti solo sui dettagli essenziali. Chiedere ai clienti di completare la procedura di pagamento con molti input sul campo su più pagine può far sì che si esauriscano. Ciò comporterà un'elevata probabilità di abbandono della pagina.
Inoltre, provare a personalizzare le pagine di pagamento di WooCommerce conferisce al tuo negozio un aspetto unico e professionale. Rimanere quello predefinito fa sprofondare il tuo sito come un sasso tra migliaia di negozi WooCommerce là fuori. L'ottimizzazione della pagina di pagamento, incluso il design, farà distinguere il tuo negozio dalla massa e susciterà scalpore tra i clienti.
Tutto sommato, queste idee stanno lavorando verso lo stesso obiettivo: uccidere l'abbandono del carrello.
Mentre difficilmente gli acquirenti nei negozi fisici abbandonano i loro carrelli, l'abbandono nei carrelli della spesa online è abbastanza frequente. In cui, i tassi medi di abbandono del carrello per le pagine di pagamento raggiungono l'87%.
E secondo la ricerca dell'istituto Baymard, tra i motivi di abbandono durante il checkout, il processo di checkout troppo lungo o complicato impiega il 27%. 
Di conseguenza, per ridurre il tasso di abbandono del carrello, dovresti prestare attenzione all'esperienza dell'utente nel processo "prima del checkout".
Esistono vari modi per fornire una migliore esperienza utente, ad esempio:
- Modifica di modelli e design di checkout
- Aggiunta, rimozione e riorganizzazione dei campi
- Rendere facoltativi i campi obbligatori
- Ottimizzazione segnaposto ed etichette
- Attivazione dei costi di spedizione gratuiti
- Creazione di una pagina di pagamento
In questo tutorial, ci concentreremo sull'ottimizzazione dei campi di pagamento. Continua a leggere le prossime sezioni per sapere come personalizzare le pagine di pagamento di WooCommerce con e senza codici.
Come personalizzare manualmente le pagine di pagamento di WooCommerce con il codice
Se sei un esperto di tecnologia di WordPress e ti senti sicuro quando tocchi file PHP e Javascript, puoi modificare liberamente la tua pagina di pagamento utilizzando codici personalizzati.
Ti forniremo alcuni snippet di codice per modificare i campi di checkout, tra cui modificare il testo segnaposto, aggiungere e rimuovere campi e rendere facoltativo un campo obbligatorio. Non preoccuparti, non ti farà impazzire!
Modifica i campi di pagamento
Utilizzando il file functions.php del tuo sito e i filtri WooCommerce per modificare i campi di pagamento. Come forse non saprai, WooCommerce offre un elenco di azioni e filtri che ti consentono di personalizzare i campi di pagamento quasi come desideri, ovvero:
- woocommerce_checkout_fields
- woocommerce_billing_fields
- Woocommerce_shipping_fields
- woocommerce_checkout_before_order_review
- woocommerce_checkout_before_customer_details
- woocommerce_after_checkout_form
Successivamente, poiché l'utilizzo del filtro woocommerce_checkout_fields ti consentirà di sovrascrivere qualsiasi campo, ti mostreremo come agganciarlo e modificare il testo visualizzato, aggiungere e rimuovere completamente i campi.
Cambia testo segnaposto
Supponendo che cambieremo il testo segnaposto nei campi order_comments. Ecco come appare per impostazione predefinita:
_x('Note sul tuo ordine, es. note speciali per la consegna.', 'placeholder', 'woocommerce')Per cambiarlo, aggiungi questo frammento di codice al tuo file functions.php:
// Agganciati
add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
// La nostra funzione agganciata - $fields viene passato tramite il filtro!
funzione custom_override_checkout_fields($campi) {
$fields['order']['order_comments']['placeholder'] = 'Il mio nuovo segnaposto';
restituisci $campi;Aggiungi campi alla pagina di pagamento di WooCommerce
- Inserisci il seguente codice nel tuo file function.php per iniziare a modificare la tua pagina di pagamento:
<?php
/**
* Aggiungi il campo alla pagina di pagamento
*/
add_action('woocommerce_after_order_notes', 'customise_checkout_field');
funzione customise_checkout_field($checkout)
{
echo '<div><h2>' . __('Intestazione') . '</h2>';
woocommerce_form_field('nome_campo_personalizzato', array(
digita' => 'testo',
'classe' => array(
'il mio-campo-classe modulo-riga'
),
'label' => __('Personalizza campo aggiuntivo') ,
'placeholder' => __('Guida') ,
'richiesto' => vero,
) , $checkout->get_value('nome_campo_personalizzato'));
eco '</div>';
} Un campo aggiuntivo apparirà sulla tua pagina di pagamento dopo aver aggiunto questo codice: 
2. Aggiungi il codice qui sotto per la convalida dei dati.
<?php
/**
* Processo di pagamento
*/
add_action('woocommerce_checkout_process', 'customise_checkout_field_process');
funzione customise_checkout_field_process()
{
// se il campo è impostato, in caso contrario mostra un messaggio di errore.
if (!$_POST['nome_campo_personalizzato']) wc_add_notice(__('Inserisci valore.') , 'errore');
}3. Abbiamo aggiunto campi alla pagina di pagamento e al controllo di convalida. È ora di assicurarsi che tutti gli input del cliente vengano salvati correttamente.
Questo può essere fatto utilizzando il seguente codice:
<?php
/**
* Aggiorna il valore del campo
*/
add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');
funzione customise_checkout_field_update_order_meta($order_id)
{
if (!empty($_POST['customized_field_name'])) {
update_post_meta($order_id, 'Some Field', sanitize_text_field($_POST['customized_field_name']));
}
}Rimuovi i campi dalla pagina di pagamento di WooCommerce
Utilizzando il codice riportato di seguito:
// Agganciati
add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
// La nostra funzione agganciata - $fields viene passato tramite il filtro!
funzione custom_override_checkout_fields($campi) {
unset($fields['order']['order_comments']);
restituisci $campi;Rendi facoltativo un campo obbligatorio
Supponiamo che tu vendi i prodotti virtuali e desideri rendere facoltativo il campo "Indirizzo" nella sezione Fatturazione. Aggiungi semplicemente il seguente codice al file functions.php del tuo tema figlio.
add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional');
funzione wc_address_field_optional($campi) {
$fields['billing']['billing_address_1']['required'] = false;
restituisci $campi;
}Nota: Considerando che eventuali errori lasciati nel file function.php possono causare la disattivazione del tuo sito, devi eseguire il backup del tuo sito prima di apportare modifiche. Raccomandiamo un modo privo di rischi, che si riferisce all'utilizzo del file function.php del tema figlio.
Modifica la pagina di pagamento di WooCommerce utilizzando i plugin
Nel caso in cui tu non sia un tecnico, cercare l'aiuto di potenti plugin sarà sempre un'idea intelligente.
Tra le migliaia di plugin di ottimizzazione di WooCommerce, WooCommerce Checkout Manager sembra essere un hotshot per personalizzare le pagine di pagamento di WooCommerce. 
Sviluppato da Quadlayers, questo plugin gratuito ma potente è sicuramente quello che non vuoi lasciare sul tavolo.
Il plug-in ti consente di personalizzare liberamente le pagine di pagamento di WooCommerce includendo/escludendo i campi, rendendo i campi obbligatori/opzionali ed estendendo facilmente i dati di fatturazione. Puoi migliorare l'esperienza dell'utente e aumentare le vendite creando campi condizionali. A parte questo, non ti limita al numero di tipi di caricamento di file. Puoi consentire ai clienti di caricare qualsiasi file di vari tipi senza sforzo/senza sforzo.
Inoltre, anche la sua interfaccia utente merita un pollice in su poiché tutte le modifiche vengono eseguite semplicemente abilitando le opzioni dal menu.
Quindi, come ottimizzare la tua pagina di pagamento WooCommerce con WooCommerce Checkout Manager?
#1 Aggiungi nuovi campi alla pagina di pagamento
WooCommerce Checkout Manager ti consente di creare campi personalizzati nella pagina di pagamento nelle sezioni Fatturazione, Spedizione e Campi aggiuntivi.
Dopo aver installato e attivato il plug-in, nella dashboard dell'amministratore, vai su WooCommerce > Checkout > Fatturazione.
- Seleziona "Aggiungi nuovo campo".
- Inserisci il nome del campo, l'etichetta e il segnaposto.
- Scegli i tipi di campo.
- Premi "Salva" per aggiornare tutte le modifiche.
#2 Elimina i campi dalle pagine di pagamento
Puoi rimuovere liberamente i campi attivando il pulsante "Disabilita". 
# 3 Riorganizzare la posizione del campo di pagamento
Modifica dell'ordine predefinito dei campi di pagamento tramite:
- Sul campo che vuoi spostare, cliccando sul pulsante a 3 linee verticali.
- Tieni premuto quel pulsante, trascina e rilascia il campo nella posizione desiderata.
- Premi "Salva modifiche" nella parte inferiore della pagina.
Ottimizza ora la tua pagina di pagamento WooCommerce!
La modifica della pagina di pagamento di WooCommerce può fare un'enorme differenza per i tuoi negozi e portare il processo di pagamento a un livello superiore. Anche la minima personalizzazione spiana la strada per accelerare il processo di pagamento, migliorare l'esperienza di acquisto e aumentare le vendite.
In questo post, ti abbiamo mostrato 2 modi per personalizzare le pagine di pagamento di WooCommerce. Puoi scegliere una soluzione plug-in o inserire direttamente frammenti di codice nel file function.php.
Nel caso in cui desideri aggiungere ulteriore ottimizzazione al tuo negozio, consulta questa guida su come aggiungere campi personalizzati alle pagine dei prodotti WooCommerce per ulteriori informazioni.
Se hai domande sull'ottimizzazione della pagina di pagamento di WooCommerce, lascia un commento e ti risponderemo il prima possibile.