Come migliorare il tasso di conversione e l'esperienza del cliente personalizzando i campi di checkout su WooCommerce.

Il tasso di abbandono del carrello della spesa online rappresenta una sfida comune. Uno processo di pagamento complesso, lungo o irrilevante è una delle principali cause della perdita di clienti. Come potente soluzione per e-commerce sviluppata su WordPress…WooCommerceVengono offerte funzionalità personalizzabili e flessibili che permettono di modificare in modo preciso la pagina di pagamento, adattandola perfettamente alle esigenze del proprio business. I campi personalizzati per il pagamento, progettati con cura, non solo consentono di raccogliere informazioni cruciali sui clienti, ma anche di migliorare significativamente i tassi di conversione e di rafforzare la fiducia dei clienti, semplificando i processi e offrendo un’esperienza personalizzata.

Questo articolo esaminerà in dettaglio come utilizzare strategicamente…WooCommerceLa funzionalità dei campi personalizzabili per il pagamento vi aiuta a creare un processo di acquisto efficiente, fluido e user-friendly, spiegando i concetti di base fino alle pratiche più avanzate.

WooCommerce: I fondamenti dei campi di pagamento

Prima di iniziare a personalizzare qualcosa, è importante comprendere…WooCommerceLa struttura predefinita e il meccanismo di funzionamento dei campi utilizzati per il pagamento sono di fondamentale importanza. La pagina di pagamento è composta da diversi sezioni di campi, tra cui l’indirizzo del conto, l’indirizzo di consegna, le note dell’ordine, ecc.; ciascun campo è associato a una funzione specifica all’interno del processo di pagamento.key(Ad esempio,billing_first_nameIdentificativo.

Si consiglia di leggere 5 tecniche avanzate di WooCommerce per aumentare la conversione del tuo negozio online su WordPress。

Priorità e meccanismi di sovrascrittura dei campi

Il hook principale utilizzato per manipolare i campi relativi al processo di pagamento è…woocommerce_checkout_fieldsQuando si aggiungono o modificano campi tramite questo meccanismo (hook), la loro priorità è superiore a quella impostata per impostazione predefinita.WooCommerceIl design del sistema dei campi vi consente di utilizzare i temi (temi) disponibili.functions.phpÈ possibile sovrascrivere il codice presente nei file o nei plugin personalizzati, il che costituisce la base per una personalizzazione approfondita.

UltaHost – Hosting per siti WordPress

Garanzia di rimborso entro 30 giorni, larghezza di banda illimitata e accesso ai database, protezione gratuita contro gli attacchi DDoS; sconto del 50% per l’acquisto di un piano valido per 3 anni (da 3 a 4 TB di spazio di archiviazione).

pagina di accesso

Tipi di campo e attributi predefiniti

WooCommerceVengono supportati diversi tipi di campi HTML5 per soddisfare le esigenze di raccolta dei dati più varie. Questi tipi e le loro funzionalità costituiscono la base per una progettazione personalizzata. Ad esempio:
Testo (text): Utilizzato per nomi, aziende e altre informazioni di uso comune.
Indirizzo e-mail (email): Viene utilizzato per verificare la correttezza del formato dell’indirizzo e-mail.
Seleziona (selectFornire opzioni a discesa, come paesi e province.
Pulsanti a scelta multipla (radio): Utilizzato per opzioni esclusive, come i metodi di consegna.
Casella di controllo (checkbox): Utilizzato per opzioni selezionabili multiple o per dichiarazioni di consenso.
Campo di testo (textarea): Utilizzato per testi multipli righe, ad esempio per spiegazioni speciali.

Ogni campo contiene una serie di attributi, come…label(Tag)placeholder(Suggerimento per il testo da inserire…)required(Obligatorio o no)class(CSS class) epriority(Ordine di visualizzazione).

Metodi pratici per personalizzare i campi di pagamento

Una volta acquisite le nozioni di base, sarà possibile aggiungere, rimuovere, modificare o riordinare i campi in modo preciso tramite codice. Le seguenti operazioni vengono solitamente eseguite all’interno del tema utilizzato.functions.phpNel file.

Aggiungere nuovi campi per soddisfare le esigenze aziendali.

Supponiamo che gestiate un negozio B2B e che abbiate bisogno di raccogliere il “numero di identificazione fiscale” (CIF) dei vostri clienti. Potete aggiungere questo campo obbligatorio nella sezione “Fattura”. L’idea principale è quella di garantire che i clienti forniscano questa informazione necessaria durante il processo di acquisto.woocommerce_checkout_fieldsI filtri eseguono le operazioni all’interno dei gruppi di campi corrispondenti.

Si consiglia di leggere Tutorial di WooCommerce: creare da zero un sito e-commerce WordPress completo di tutte le funzionalità.。

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    // 在账单字段组中添加一个“公司税号”字段
    $fields['billing']['billing_vat_number'] = array(
        'label'        => __('公司税号 / VAT Number', 'your-text-domain'),
        'placeholder'  => _x('请输入您的税务登记号', 'placeholder', 'your-text-domain'),
        'required'     => true, // 设为 true 表示必填
        'class'        => array('form-row-wide'), // 宽度样式
        'clear'        => true, // 清除浮动，在新一行开始
        'priority'     => 35, // 显示顺序，可调整其在账单字段中的位置
    );
    return $fields;
}

Modificare o rimuovere i campi esistenti al fine di semplificare il processo.

Eliminare i campi non necessari è il modo più diretto per semplificare il processo di pagamento. Ad esempio, se vendete solo prodotti digitali, potete eliminare tutti i campi relativi all’indirizzo di consegna.

add_filter( 'woocommerce_checkout_fields', 'remove_unnecessary_fields' );
function remove_unnecessary_fields( $fields ) {
    // 仅销售数字商品时，移除送货地址字段
    unset($fields['shipping']);

// 在账单字段中，移除不需要的字段，例如公司名
    unset($fields['billing']['billing_company']);

// 可选：修改字段属性，例如让“地址行2”变为非必填
    $fields['billing']['billing_address_2']['required'] = false;

return $fields;
}

Verifica dei campi e salvataggio dei dati

Non basta semplicemente aggiungere i campi: è necessario anche assicurarsi che i dati vengano elaborati correttamente. Ciò include la verifica dei dati sul lato client ( frontend) e il loro salvataggio sul lato server ( backend).

Per i campi personalizzati, è possibile utilizzare…woocommerce_checkout_processIl “hook” viene utilizzato per eseguire la verifica sul lato server (backend) e, successivamente, per applicare le relative modifiche o azioni.woocommerce_checkout_update_order_metaIl “hook” salva i dati nei metadati dell’ordine.

hosting.com Hosting condiviso

Prestazioni elevate con CPU AMD EPYC, storage SSD NVMe e LiteSpeed, supporto interno di esperti 24 ore su 24, 7 giorni su 7, misure di sicurezza avanzate, tra cui SSL, brute force, malware e protezione DDoS, risparmi fino a 73%

pagina di accesso

// 验证自定义字段（例如，税号必须为数字）
add_action( 'woocommerce_checkout_process', 'validate_custom_checkout_field' );
function validate_custom_checkout_field() {
    if ( isset($_POST['billing_vat_number']) && !is_numeric($_POST['billing_vat_number']) ) {
        wc_add_notice( __( '公司税号必须为数字。', 'your-text-domain' ), 'error' );
    }
}

// 将自定义字段值保存到订单元数据中
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['billing_vat_number'] ) ) {
        update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
    }
}

Personalizzazioni avanzate e ottimizzazione dell’esperienza utente

Quando le personalizzazioni di base soddisfano le esigenze, un controllo più dettagliato può portare a un miglioramento significativo delle prestazioni del sistema. Ciò include la logica di visualizzazione condizionale dei contenuti, l’ottimizzazione visiva dell’ordine dei campi e il potenziamento dell’interattività tramite AJAX.

Implementare la visualizzazione logica condizionale dei campi

La logica condizionale può semplificare notevolmente i moduli di pagamento. Ad esempio, i campi relativi all’indirizzo di consegna vengono visualizzati soltanto quando l’utente seleziona l’opzione “Consegna in diverse destinazioni”.WooCommerceIl core ha un controllo di base sull“”indirizzo di consegna”, ma per i campi personalizzati o per scenari più complessi, potrebbe essere necessario utilizzare JavaScript/jQuery.

// 首先，在PHP端添加一个触发字段，例如一个复选框
add_filter( 'woocommerce_checkout_fields', 'add_conditional_trigger_field' );
function add_conditional_trigger_field( $fields ) {
    $fields['billing']['billing_show_gift_option'] = array(
        'type'        => 'checkbox',
        'label'       => __('这是礼品订单吗？', 'your-text-domain'),
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 150,
    );
    return $fields;
}
// 然后，在结账页面添加JavaScript来控制目标字段（如“礼品留言”）的显示/隐藏。

Utilizzare plugin per semplificare operazioni complesse.

Per utenti non sviluppatori o che hanno bisogno di implementare rapidamente funzionalità complesse (come processi di pagamento multi-step, logiche condizionali per i campi, campi per l’upload di file), l’utilizzo di plugin professionali rappresenta una scelta efficace. Plugin come il WooCommerce Checkout Field Editor o l’Advanced Custom Fields for WooCommerce offrono un’interfaccia visiva che consente di aggiungere e modificare i campi in modo semplice, tramite operazioni di drag-and-drop, nonché di impostare regole senza la necessità di scrivere codice.

Si consiglia di leggere Analisi completa di WooCommerce: una guida completa dall’installazione alle personalizzazioni avanzate。

Quando si sceglie un plugin, è importante prestare attenzione alla sua compatibilità con il tema utilizzato e con gli altri plugin presenti sul sito, nonché all’impatto che potrebbe avere sulle prestazioni del sito stesso. Per i siti con un elevato traffico, i plugin leggeri e ben ottimizzati dal punto di vista del codice rappresentano la scelta migliore.

Adattamento per dispositivi mobili e considerazioni sulle prestazioni

Oltre la metà del traffico e-commerce proviene da dispositivi mobili. I campi personalizzati devono garantire un’ottima esperienza di utilizzo tramite il tocco sui dispositivi mobili. Ciò significa che…
– Le dimensioni e gli spazi tra i campi devono essere abbastanza ampi per facilitare il tocco con le dita.
Evita di utilizzare tipi di input che sono difficili da gestire su dispositivi mobili.
Utilizzaretype="tel"或type="email"Aspettare che venga riconosciuto il tipo di contenuto HTML5 per attivare la tastiera mobile appropriata.
Assicurati che qualsiasi JavaScript o CSS personalizzato aggiunto sia reattivo e compresso, per ridurre al minimo l'impatto sulla velocità di caricamento della pagina.

Hosting condiviso InterServer

Hosting condiviso $2,50 USD al mese, primo mese $0,1 USD codice promozionale tryinterserver, 461 script di applicazioni cloud, installazione con un clic.

pagina di accesso

Test, analisi e iterazione continua

Qualsiasi modifica deve essere sottoposta a test rigorosi e il suo effetto deve essere verificato attraverso l’analisi dei dati.

Eseguire test in più fasi

Prima di distribuire il processo di pagamento personalizzato nell’ambiente di produzione, è necessario eseguire test approfonditi nell’ambiente di stoccaggio temporaneo.
1. Test delle funzionalità: Verificare uno per uno se l’aggiunta, la rimozione, i controlli di obbligatorietà, la logica condizionale e il salvataggio dei dati in ogni campo avvengono correttamente.
2. Test di compatibilità: Assicurarsi che il nuovo elemento sia compatibile con il tema attualmente in uso.WooCommerceLe versioni del software, nonché altri plugin essenziali (come i gateway di pagamento e i plugin per il calcolo delle spese di spedizione), non presentano alcun conflitto tra loro.
3. Test dell’esperienza utente: Invitare utenti reali o membri del team a simulare l’intero processo di acquisto, registrando i punti in cui hanno esitato, si sono confusi o hanno deciso di abbandonare l’operazione.

Ottimizzare le decisioni attraverso l’analisi dei dati

Dopo aver implementato le modifiche, utilizzare strumenti di analisi per valutarne l’impatto.
– Google Analytics (versione avanzata per e-commerce): Traccia i casi in cui gli utenti abbandonano i passaggi relativi al processo di pagamento, individuando con precisione quale fase del processo rappresenta il punto di maggior riluttanza da parte degli utenti.
Strumenti di mappatura termica: come Hotjar, per osservare i movimenti del mouse, i clic e lo scorrimento effettuati dagli utenti sulla pagina di checkout, al fine di capire come interagiscono con i tuoi moduli.
Test A/B: provare due diversi layout dei campi di checkout (ad esempio, uno a pagina singola e uno a due fasi) e valutare obiettivamente, in base ai dati, quale dei due genera un tasso di conversione più alto.

È necessario monitorare costantemente questi dati e apportare miglioramenti iterativi in base ai problemi riscontrati. L’ambiente elettronico di vendita, nonché le abitudini degli utenti, cambiano continuamente; pertanto, anche l’ottimizzazione dei processi di pagamento dovrebbe essere un processo continuo.

Riassumendo

PersonalizzaWooCommerceI campi per il pagamento rappresentano uno strumento molto potente: non si limitano semplicemente a raccogliere informazioni aggiuntive. Aggiungendo in modo strategico i campi necessari, eliminando passaggi ridondanti, ottimizzando i flussi e la logica dei moduli, è possibile risolvere direttamente i problemi principali che portano all’abbandono del carrello degli acquisti. Un processo di pagamento semplice, chiaro, adatto alle esigenze aziendali e compatibile con i dispositivi mobili può ridurre notevolmente il carico cognitivo degli utenti e il numero di passaggi da compiere, migliorando così i tassi di conversione e costruendo nel contempo un’immagine di marca professionale e affidabile. Ricordate: il miglior processo di pagamento è quello che l’utente quasi non percepisce.

FAQ - Domande frequenti

I campi personalizzati possono influenzare le prestazioni del sito web?

Se implementato correttamente tramite codice, l’aggiunta di pochi campi personalizzati ha un impatto esiguo sulle prestazioni del sistema.

Tuttavia, l’utilizzo di plugin eccessivamente complessi o l’aggiunta di una grande quantità di logiche condizionali in JavaScript può rallentare il tempo di caricamento della pagina. Si consiglia di testare sempre le prestazioni in un ambiente di sviluppo (temporaneo) e di seguire le migliori pratiche di codifica, come la fusione e la compressione dei file di script.

Perché i miei campi personalizzati non sono visibili nell’area di amministrazione degli ordini?

Questo accade solitamente perché i dati non sono stati salvati correttamente, o non sono stati richiamati e visualizzati dopo essere stati salvati.

Devi assicurarti di aver utilizzato…woocommerce_checkout_update_order_metaIl “hook” salva i dati come metadati dell’ordine (utilizzando…).update_post_metaPoi, per far apparire le informazioni nell’area di amministrazione, è necessario utilizzare anche…woocommerce_admin_order_data_after_billing_addressO un meccanismo simile a un “gancio” viene utilizzato per visualizzare i valori sulla pagina di modifica dell’ordine.

È possibile visualizzare campi diversi in base a un prodotto specifico o a un ruolo utente?

Sì, questo può essere realizzato attraverso valutazioni condizionali, ma rappresenta un tipo di personalizzazione più avanzato.

Puoi procedere con il trattamento…woocommerce_checkout_fieldsNella funzione del filtro, è possibile aggiungere logica condizionale. Ad esempio, per verificare se nel carrello della spesa ci sono prodotti di una categoria specifica.WC()->cartOppure utilizzare…current_user_can()La funzione verifica il ruolo dell’utente attuale e, in base a determinate condizioni, decide se aggiungere o modificare determinati campi.

Qual è il modo migliore per apportare modifiche: utilizzare il codice sorgente o i plugin?

Dipende dalle vostre esigenze specifiche, dalle vostre competenze tecniche e dal vostro piano di manutenzione a lungo termine.

L’utilizzo di codice personalizzato permette di modificare il funzionamento di un sito in modo più leggero, flessibile e con prestazioni controllabili; questa soluzione è adatta a chi possiede competenze di sviluppo o desidera ottimizzazioni avanzate, ma richiede di gestire personalmente la compatibilità del codice stesso. L’uso di plugin, invece, è rapido e semplice da implementare, ideale per chi non ha esperienza di programmazione o per situazioni che richiedono funzionalità complesse (come editor visivi o regole avanzate). Tuttavia, è necessario scegliere con attenzione plugin di qualità, aggiornati regolarmente, e prestare attenzione al rischio di codice ridondante o di conflitti tra i diversi plugin installati.