Guida completa all’utilizzo dei campi personalizzati per il pagamento in WooCommerce: dalla creazione alla verifica

Perché è necessario personalizzare i campi di pagamento?

Il processo di pagamento standard di WooCommerce raccoglie per impostazione predefinita informazioni di base e comuni, come nome, indirizzo, numero di telefono e indirizzo e-mail. Tuttavia, quando il vostro business presenta esigenze specifiche, queste informazioni risultano insufficienti. Aggiungendo campi personalizzati, potete offrire ai clienti un’esperienza di acquisto più attenta e precisa.

Ad esempio, un negozio che vende torte su misura potrebbe richiedere ai clienti di indicare i messaggi da scrivere sulla torta o se desiderano che vengano utilizzate delle candele; un’attività B2B potrebbe aver bisogno di registrare il numero di identificazione fiscale dell’azienda del cliente o il numero dell’ordine d’acquisto; un negozio che vende biglietti per eventi potrebbe dover raccogliere i dati d’identità dei partecipanti per effettuare verifiche. I campi personalizzabili vi permettono di raccogliere informazioni cruciali al di fuori dei processi standard, che possono essere utilizzate per l’elaborazione degli ordini, la segmentazione dei clienti, la messaggistica personalizzata e persino per il rispetto delle normative legali.

Dal punto di vista tecnico, la pagina di pagamento di WooCommerce è un modulo composto da una serie di campi standard, la cui struttura è definita da “Action Hook” (ganci di azione) e “Filter Hook” (ganci di filtraggio). Ciò significa che, tramite plugin o file di funzioni dei temi, possiamo utilizzare questi ganci per intervenire nel processo di pagamento, aggiungendo, eliminando o modificando i campi presenti nel modulo. Comprendere questo meccanismo fondamentale è essenziale per effettuare qualsiasi tipo di personalizzazione.

Si consiglia di leggere Guida completa allo sviluppo di siti e-commerce con WooCommerce: dalla creazione alla implementazione di funzionalità avanzate。

Tre metodi per creare campi personalizzati per il processo di pagamento

WooCommerce offre metodi flessibili per aggiungere campi personalizzati; potete scegliere il metodo più adatto in base al vostro livello di competenza tecnica e alle vostre esigenze.

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

Utilizzare plugin per effettuare aggiunte rapide e senza codice.

Per gli amministratori di siti web che non hanno molta dimestichezza con il codice o per progetti che richiedono un lancio rapido, l’utilizzo di plugin dedicati rappresenta il modo più conveniente. Sul mercato esistono plugin di ottima qualità, come “Checkout Field Editor for WooCommerce” o “WooCommerce Checkout Manager”.

Questi plugin offrono solitamente un’interfaccia di back-end intuitiva che consente di aggiungere nuovi campi semplicemente cliccando e selezionando gli elementi desiderati. È possibile definire il tipo di campo (casella di testo, menu a discesa, casella di controllo, pulsante di selezione), l’etichetta associata al campo, se il campo è obbligatorio, nonché la posizione esatta in cui dovrà apparire sulla pagina di pagamento (nella sezione relativa al conto o a quella relativa alla consegna). L’utilizzo di tali plugin non richiede la scrittura di codice, il che riduce notevolmente la complessità tecnica e li rende adatti alla maggior parte delle esigenze standard. Tuttavia, è importante tenere presente che gli plugin possono aumentare il carico sul sito web e, in caso di logiche personalizzate molto complesse, potrebbero risultare meno flessibili.

Aggiungere campi personalizzati tramite codice

Questo è il metodo più potente e flessibile: basta modificare il tema in questione. functions.php È possibile creare un file o un plugin personalizzato per implementare questa funzionalità. L’approccio principale consiste nell’utilizzare… woocommerce_checkout_fields Filter hook.

Questo hook vi consente di modificare l’array dei campi utilizzati per il processo di pagamento. Ad esempio, se desiderate aggiungere un campo per inserire il nome dell’azienda nella sezione “Informazioni sulla fattura”, potete scrivere il seguente codice:

Si consiglia di leggere Come aggiungere campi personalizzati e metadati alle pagine dei prodotti in WooCommerce?。

add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_field' );
function custom_add_checkout_field( $fields ) {
    $fields['billing']['billing_company_custom'] = array(
        'label'       => __('公司名称（自定义）', 'woocommerce'),
        'placeholder' => _x('请输入您的完整公司名', 'placeholder', 'woocommerce'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 25, // 控制显示顺序，数字越小越靠前
    );
    return $fields;
}

Questo codice aggiunge un campo di testo obbligatorio al campo relativo al conto. La parte fondamentale riguarda i nomi delle chiavi nell’array dei campi (ad esempio…). billing_company_custom…) e il set di campi in cui si trova (…)['billing'] 或 ['shipping']、['order']）。

Utilizzare le funzionalità di logica condizionale di WooCommerce

A volte si desidera che un campo venga visualizzato solo in determinate condizioni. Ad esempio, il campo “Messaggio per la cartolina regalo” dovrebbe essere mostrato solo quando il cliente seleziona il servizio di “Impacchettamento regalo”. Ciò può essere realizzato utilizzando JavaScript o plugin che supportano la logica condizionale.

L’implementazione esclusivamente in codice richiede solitamente l’ausilio di… woocommerce_after_checkout_billing_form 或 woocommerce_after_checkout_shipping_form È possibile utilizzare dei “hook” per generare la struttura HTML dei campi e scrivere script jQuery in grado di monitorare i cambiamenti in altri campi (ad esempio, caselle di controllo), al fine di controllare la visualizzazione o la nascondimento del campo target. Tuttavia, questo approccio richiede una certa conoscenza delle capacità offerte da JavaScript. Un modo più semplice consiste nell’utilizzare plugin di gestione dei campi avanzati che offrono funzionalità per impostare logiche condizionali in modo visivo.

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

Verifica e salva i dati dei campi personalizzati.

Non basta semplicemente visualizzare i campi sulle pagine web: è fondamentale verificare l’validità dei dati e salvarli in modo sicuro nel database.

Convalida dei dati tra front-end e back-end

Per prevenire l’invio di dati non validi o dannosi, è necessario effettuare la verifica sul lato server (lato backend). Questo avviene tramite… woocommerce_checkout_process È stato implementato tramite degli “action hooks”.

Continuando con l’esempio precedente, se aggiungiamo… billing_company_custom Questo campo è obbligatorio; dobbiamo assicurarci che il cliente non lo abbia lasciato vuoto.

Si consiglia di leggere WooCommerce Development in Action: Costruire un sito e-commerce professionale da zero。

add_action('woocommerce_checkout_process', 'custom_validate_checkout_field');
function custom_validate_checkout_field() {
    if ( isset($_POST['billing_company_custom']) && empty($_POST['billing_company_custom']) ) {
        wc_add_notice( __( '请填写“公司名称（自定义）”。', 'woocommerce' ), 'error' );
    }
}

wc_add_notice() La funzione visualizza un messaggio di errore in parte superiore della pagina di pagamento, impedendo la spedizione dell’ordine fino a quando l’utente non corregge l’errore. È possibile implementare logiche di verifica più complesse all’interno di questa funzione, ad esempio controllando il formato dell’indirizzo e-mail, i valori numerici o il corretto rispetto a espressioni regolari.

Salvare i dati dei campi nell’ordine.

Dopo il successo della verifica, dobbiamo salvare i valori dei campi personalizzati nei metadati dell’ordine (Order Meta) in modo da poterli visualizzare successivamente sia nel backend che nelle email. Per farlo, è necessario utilizzare… woocommerce_checkout_update_order_meta Action Hook.

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

add_action('woocommerce_checkout_update_order_meta', 'custom_save_checkout_field');
function custom_save_checkout_field( $order_id ) {
    if ( ! empty($_POST['billing_company_custom']) ) {
        update_post_meta( $order_id, '_billing_company_custom', sanitize_text_field($_POST['billing_company_custom']) );
    }
}

update_post_meta() La funzione salva i valori dei campi puliti sotto forma di coppie chiave-valore. wp_postmeta Nella tabella, i nomi delle chiavi iniziano solitamente con un trattino basso (ad esempio…). _billing_company_customQuesto permette di considerarlo come metadati “nascosti” in alcune interfacce di back-end.

Visualizzare i dati dei campi sia sul lato front-end che su quello back-end.

Dopo aver salvato i dati, è necessario assicurarsi che siano accessibili e gestibili in più punti chiave.

Mostrare nei dettagli dell’ordine e nell’email.

Per permettere sia al proprietario del negozio che ai clienti di visualizzare le informazioni salvate, è necessario visualizzarle sulla pagina dei dettagli dell’ordine presente nell’area di amministrazione, nonché inviarle via e-mail agli clienti e agli amministratori.

Per modificare i dettagli di un ordine nell’area di amministrazione, è possibile utilizzare… woocommerce_admin_order_data_after_billing_address Gancio:

add_action('woocommerce_admin_order_data_after_billing_address', 'custom_display_field_in_admin', 10, 1);
function custom_display_field_in_admin($order){
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<p><strong>'.__('自定义公司名').':</strong> '. $company_custom '.'</p>';
    }
}

Allo stesso modo, utilizzando… woocommerce_email_order_meta_fields Il filtro può aggiungere questo campo al contenuto dell’email dell’ordine.

Visualizzare nell’area “Il mio account” all’interno della vista degli ordini.

Quando i clienti visualizzano i dettagli degli ordini precedenti sulla loro pagina di account, dovrebbero anche essere in grado di vedere le informazioni che hanno inserito in quel momento. Questo viene reso possibile grazie a… woocommerce_order_details_after_order_table Implementazione degli action hooks:

add_action('woocommerce_order_details_after_order_table', 'custom_display_field_in_order_view', 10, 1);
function custom_display_field_in_order_view( $order ) {
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<h2>'.__('额外信息').'</h2>';
        echo '<table class="woocommerce-table shop_table extra_info"><tbody>';
        echo '<tr><th>'.__('自定义公司名').':</th><td>'. $company_custom '.'</td></tr>';
        echo '</tbody></table>';
    }
}

Riassumendo

Aggiungere campi personalizzati al processo di pagamento di WooCommerce è un procedimento che va dall’analisi dei requisiti, allo sviluppo e all’implementazione, fino alla gestione dei dati. La chiave sta nel comprendere e utilizzare il sistema di “hook” di WooCommerce: woocommerce_checkout_fields Aggiungere campi ai filtri e utilizzarli… woocommerce_checkout_process L’azione è stata verificata e approvata. woocommerce_checkout_update_order_meta I dati vengono salvati tramite determinate azioni, e successivamente vengono visualizzati in background, tramite email, nonché sul front-end dell’utente, grazie a diversi strumenti di visualizzazione. Per i principianti, è consigliabile iniziare utilizzando plugin affidabili; per gli sviluppatori che cercano un alto livello di personalizzazione e prestazioni, la scrittura di codice rappresenta il metodo migliore. In ogni caso, un flusso di dati ben strutturato e verifiche rigorose sono fondamentali per garantire la stabilità delle funzionalità e migliorare l’esperienza utente.

FAQ - Domande frequenti

Perché i campi personalizzati aggiunti non vengono visualizzati sulla pagina di pagamento?

Per risolvere il problema, segui questi passaggi: innanzitutto, assicurati che il tuo codice sia stato correttamente inserito nel tema. functions.php Il file o il plugin personalizzato non presenta errori di sintassi. In secondo luogo, verificare se le chiavi dell’array di campi sono correttamente annidate all’interno di altri elementi strutturali. $fields['billing']、$fields['shipping'] 或 $fields['order'] 之中。然后，查看浏览器控制台是否有 JavaScript 错误，这可能与字段的 class 或优先级设置冲突。最后，清空网站和浏览器的缓存后再次尝试。

Come impostare i campi personalizzati come opzionali o obbligatori?

Quando si aggiungono campi tramite codice, è possibile impostarli nell’array dei campi. 'required' => true 或 'required' => falseSe un campo è già obbligatorio e desideri renderlo facoltativo, basta semplicemente modificare le impostazioni relative a quel campo. woocommerce_checkout_fields Nella funzione di filtraggio, quel campo viene… (The field is… in the filtering function.) required Basta modificare il parametro in “false”. Si prega di notare che, una volta effettuata la modifica, sarà necessario adeguare o rimuovere di conseguenza anche le altre parti del codice che dipendono da quel valore. woocommerce_checkout_process La logica di verifica contenuta al suo interno.

Dove vengono memorizzati i dati dei campi personalizzati nel database?

I valori dei campi personalizzati vengono principalmente memorizzati all’interno di WordPress. wp_postmeta Nella tabella del database (il prefisso della tabella potrebbe essere diverso), ogni record è identificato da… post_idCorrispondente al ID dell’ordine: … wp_posts I record degli ordini presenti nella tabella sono collegati tra loro tramite… meta_key(Il nome della chiave utilizzata per salvare i file, ad esempio…) _billing_company_customVengono identificati con…meta_value Quindi, il valore effettivo del campo di memorizzazione viene salvato. È possibile accedervi tramite strumenti di gestione del database o direttamente tramite WordPress. get_post_meta() La funzione effettua la query di questi dati.

È possibile visualizzare campi personalizzati diversi a seconda del prodotto selezionato?

Certo, ma questo richiede una logica più complessa. Un metodo comune consiste nel prima aggiungere una categoria personalizzata o un campo meta al prodotto per indicarne il tipo, e poi, nella pagina di pagamento, utilizzare queste informazioni per gestire il processo di acquisto in modo appropriato. woocommerce_after_checkout_form Genera l’HTML di tutti i campi personalizzabili possibili utilizzando metodi come “ganci” (hooks) o simili, ma nascondili per impostazione predefinita tramite CSS. Successivamente, scrivi uno script JavaScript che monitori i cambiamenti nel contenuto del carrello della spesa o la selezione di prodotti specifici, e che mostri o nasconda dinamicamente i gruppi di campi in base al tipo di prodotto presente nel carrello. Infine, durante la verifica e la salvataggio dei dati sul lato server, è necessario elaborare i dati dei campi in modo condizionato, in base al tipo di prodotto selezionato.