Quando si costruisce un negozio online, l’esperienza durante la fase di pagamento è di fondamentale importanza per i clienti. Il modulo di pagamento standard fornito da WooCommerce potrebbe non essere in grado di soddisfare tutte le esigenze aziendali, ad esempio per la raccolta dei dati relativi al destinatario della fattura, di messaggi di auguri per l’anniversario o di specifiche preferenze per la consegna. In questi casi, i campi di pagamento personalizzabili rappresentano uno strumento estensivo molto utile. Non solo permettono di aumentare il livello di personalizzazione dell’esperienza di pagamento, ma forniscono anche alle aziende dati commerciali essenziali per ottimizzare i servizi e le strategie di marketing.
Grazie al sistema di hook di WordPress e all’ampia API fornita da WooCommerce, gli sviluppatori possono aggiungere con relativa facilità diversi tipi di campi (caselle di testo, menu a discesa, caselle di controllo, ecc.) in qualsiasi posizione della pagina di pagamento: dopo le aree dedicate all’indirizzo della fattura e all’indirizzo di consegna, oppure creare intere sezioni nuove. Il processo non riguarda soltanto l’aspetto visivo del sito (l’interfaccia front-end), ma soprattutto il flusso di elaborazione dei dati sul lato server: è necessario assicurarsi che i dati inseriti dall’utente vengano salvati in modo corretto e sicuro nell’ordine, e che vengano visualizzati chiaramente nell’interfaccia di gestione degli ordini, nella pagina dell’account utente e nelle email di notifica relative all’ordine.
Metodo di implementazione dei campi personalizzati per il pagamento
WooCommerce offre due principali categorie di “hook” (meccanismi di interazione programmabile) per gestire i campi relativi al processo di pagamento:woocommerce_checkout_fields 和 woocommerce_checkout_update_order_metaIl primo viene utilizzato per definire e visualizzare i campi, mentre il secondo serve per salvare i dati contenuti in tali campi.
Si consiglia di leggere Sviluppo di plugin per WordPress: dall’approccio base alla maestria: impara passo dopo passo a creare le tue funzionalità personalizzate。
Utilizzare degli “hook” per aggiungere campi
Il passo più importante è… woocommerce_checkout_fields Gancio per i filtri: aggiunge i campi personalizzati all’array dei campi utilizzati durante il processo di pagamento. Questo array ha una struttura chiara, che consente di posizionare i campi all’interno della sezione relativa al “conto”.billing“Distribuzione”, “Consegna”shipping“Ordine Note” (Order Remarks)orderÈ possibile utilizzare le partizioni esistenti, come ad esempio /boot, /, /home, /tmp e /var, o addirittura creare partizioni personalizzate.custom）。
Esempio di codice che mostra come aggiungere un campo di testo per il “Numero di Identificazione Fiscale dell’Azienda” e una casella di selezione per “Richiesta di Fattura” nella parte inferiore dell’area informativa relativa alle “Fatture”.
/**
* 在结账页面添加自定义字段
*/
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {
// 在“账单”字段组中添加一个“公司税号”文本字段
$fields['billing']['billing_vat_number'] = array(
'label' => __( '公司税号 / VAT Number', 'your-text-domain' ),
'placeholder' => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
'required' => false, // 非必填
'class' => array( 'form-row-wide' ), // 宽度样式
'clear' => true, // 清除浮动
'priority' => 25, // 显示顺序，数字越小越靠前
);
// 在“账单”字段组中添加一个“是否需要发票”单选框
$fields['billing']['billing_invoice_needed'] = array(
'type' => 'radio',
'label' => __( '是否需要纸质发票？', 'your-text-domain' ),
'required' => true,
'class' => array( 'form-row-wide' ),
'clear' => true,
'priority' => 30,
'options' => array(
'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
'no' => __( '否，不需要', 'your-text-domain' )
)
);
return $fields;
}Verifica e salvataggio dei dati dei campi
Dopo aver aggiunto i campi, è necessario assicurarsi che i dati inseriti dagli utenti vengano salvati nei relativi metadati dell’ordine. Questo può essere realizzato tramite… woocommerce_checkout_update_order_meta Questo viene realizzato tramite gli “action hooks” di WooCommerce. Quando un utente invia un ordine, WooCommerce attiva uno di questi hook, e in quel momento possiamo ottenere e salvare i valori dei campi personalizzati.
/**
* 保存自定义结账字段的值到订单元数据
*/
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {
if ( ! empty( $_POST['billing_vat_number'] ) ) {
// 使用 sanitize_text_field 进行清洁处理，防止恶意代码
update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
}
if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
}
}Mostrare i dati dei campi sia nel backend che nelle email.
Non basta semplicemente salvare i dati: i commercianti hanno bisogno di poter visualizzare queste informazioni durante la gestione degli ordini in background, e i clienti dovrebbero essere in grado di vedere i propri dati inseriti sia nell’email di conferma dell’ordine che nella pagina “Il mio account”.
Verrà visualizzato sulla pagina di modifica degli ordini in background.
È possibile procedere in questo modo. woocommerce_admin_order_data_after_billing_address Similmente ad altri “hook” (meccanismi di integrazione), i valori dei campi personalizzati vengono visualizzati dopo le sezioni “Indirizzo fattura” o “Indirizzo di consegna” sulla pagina dei dettagli dell’ordine nel backend.
Si consiglia di leggere Guida introduttiva allo sviluppo di plugin per WordPress: crea la tua prima estensione funzionale da zero.。
/**
* 在后台订单详情页显示自定义字段
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
$vat_number = $order->get_meta( '_billing_vat_number' );
$invoice_needed = $order->get_meta( '_billing_invoice_needed' );
if ( $vat_number ) {
echo '<p><strong>'\n' . __( 'Codice fiscale della società:', 'your-text-domain' ) . '</strong> '`. esc_html($vat_number)`.'</p>';
}
if ( $invoice_needed ) {
$display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
echo '<p><strong>'Necessaria una fattura cartacea:' . __( '', 'your-text-domain' ) . '</strong> '`. esc_html($display_text)`.'</p>';
}
}Mostrare nell’email dell’ordine e sulla pagina di ringraziamento.
Per permettere anche ai clienti di visualizzare queste informazioni, dobbiamo inserirle nell’email di conferma dell’ordine e sulla pagina di conferma dell’ordine (con un ringraziamento). woocommerce_email_order_meta_keys I filtri possono aggiungere automaticamente le chiavi di metadati specificate a tutti i messaggi di notifica. Inoltre, è possibile utilizzarli… woocommerce_order_details_after_order_table Gli action hook possono essere visualizzati nelle informazioni dettagliate dell’ordine sul front end.
/****************
* Aggiungere campi personalizzati alle email degli ordini
****************/
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
$keys[] = '_billing_vat_number';
$keys[] = '_billing_invoice_needed'; // Viene visualizzato nel formato della chiave nell'email, di solito richiede un'ulteriore formattazione
return $keys;
}
/****************
* Mostrare i campi personalizzati nei dettagli degli ordini frontend (pagina di ringraziamento, il mio account - dettagli degli ordini)
****************/
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
$vat_number = $order->get_meta( '_billing_vat_number' );
if ( $vat_number ) {
echo ' '<h2>'\n' . __( 'Informazioni aggiuntive', 'your-text-domain' ) . '</h2>';
echo '<table class="shop_table shop_table_responsive additional_info">';
echo '<tr><th>'\n' . __( 'Codice fiscale della società:', 'your-text-domain' ) . '</th><td>'`. esc_html($vat_number)`.'</td></tr>';
echo '</table>';
}
}Applicazioni avanzate e logica delle condizioni sui campi
Oltre all’aggiunta di campi di base, interazioni più complesse possono migliorare notevolmente l’esperienza utente, ad esempio la visualizzazione condizionata dei campi e la verifica dei valori in base a quelli esistenti.
Implementare la visualizzazione condizionata dei campi
Utilizzando JavaScript/jQuery, è possibile mostrare o nascondere dinamicamente un campo in base al valore di un altro campo (ad esempio, il nome di un paese, di uno stato o l’opzione selezionata da un menu a discesa). Ad esempio, una sezione di testo con le “Note per l’invio della fattura” verrà visualizzata soltanto quando l’utente seleziona l’opzione “Richiesta di fattura cartacea”.
Per implementare questa funzionalità, è necessario aggiungere del codice logico nel file JavaScript del tema, oppure utilizzare altri metodi disponibili. wp_enqueue_script Inserisci lo script nella coda di attesa e ascolta i cambiamenti nei valori dei campi sulla pagina di pagamento, in modo da controllare lo stato di visualizzazione dei campi target.
Aggiungere una verifica personalizzata a un campo
Sebbene WooCommerce abbia già funzionalità per indicare quali campi siano “obbligatori” (cioè da compilare),…required Il campo "Codice fiscale" deve essere validato (=> true), ma a volte sono necessarie regole di validazione più complesse, come ad esempio un formato specifico per il codice fiscale. Questo può essere fatto tramite woocommerce_checkout_process Gli “action hooks” permettono di aggiungere logica di verifica personalizzata.
/**
* 在结账过程中验证自定义字段
*/
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
// 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
}
}Ottimizzazione delle prestazioni e migliori pratiche
L’aggiunta di troppi campi personalizzati sul sito web, o il loro mancato gestimento corretto, può influenzare la velocità di caricamento della pagina di pagamento e l’esperienza d’uso degli utenti.
Si consiglia di leggere Guida avanzata allo sviluppo per l’utilizzo dei campi personalizzati di WooCommerce: dalla creazione alla visualizzazione。
Ottimizzare il caricamento e il rendering dei campi
- Caricamento selettivo dei script: vengono caricati sulle pagine di pagamento soltanto i script JavaScript necessari per i campi che vengono visualizzati in base a determinate condizioni.
- Impostare correttamente le priorità: utilizzalo.
priorityDisponendo i campi in modo razionale, i parametri evitano di dover riorganizzare inutilmente il layout. - Ridotto alla essenza.
classArray: Aggiungere solo le classi di stile necessarie, ad esempio…form-row-wide或form-row-first。
Dati sicuri e puliti
- Sempre pulire e verificare i dati prima di salvarli.
update_post_meta) e visualizzazione (echoPrima di utilizzare i dati degli utenti, è necessario assicurarsi di…sanitize_text_field(),esc_html(),wp_kses_post()Queste funzioni vengono utilizzate per effettuare il trattamento dei dati, ed è fondamentale per prevenire gli attacchi di tipo Cross-Site Scripting (XSS). - Utilizzare i tipi di dati corretti: per i numeri o i dati in formati specifici, è consigliabile considerare l’opportunità di utilizzare i tipi di dati appropriati.
sanitize_key()O personalizza le espressioni regolari per la verifica e la pulizia.
Riassumendo
Personalizzare i campi di pagamento di WooCommerce rappresenta una funzionalità molto potente, in quanto permette di migliorare la comunicazione tra venditori e clienti nei momenti chiave della transazione. woocommerce_checkout_fields Il hook definisce i campi front-end, che verranno poi utilizzati. woocommerce_checkout_update_order_meta I “hook” (meccanismi di interazione programmabili) vengono utilizzati per salvare i dati in modo sicuro; successivamente, tali dati vengono visualizzati sia sul backend che tramite email, sia sul frontend degli utenti, grazie a diversi strumenti di gestione e filtri di posta. L’intero processo costituisce un ciclo chiuso per l’elaborazione dei dati. Una volta acquisite queste tecniche fondamentali, combinandole con strumenti avanzati come la visualizzazione condizionata dei dati e i processi di verifica personalizzati, gli sviluppatori possono creare processi di pagamento altamente personalizzati, user-friendly e sicuri, in grado di soddisfare le esigenze diverse dell’e-commerce, migliorando così il livello di professionalità del negozio e la soddisfazione dei clienti.
FAQ - Domande frequenti
Dove vengono salvati i dati dei campi personalizzati?
I dati relativi ai campi personalizzati vengono salvati come “metadati dell’ordine”. Quando si utilizzano… update_post_meta( $order_id, ‘_field_key’, $value ); Durante il salvataggio, i dati vengono memorizzati in WordPress. wp_postmeta Nella tabella del database, i dati relativi agli ordini (un tipo di articolo personalizzato) sono collegati… post_id Associazione. I nomi delle chiavi iniziano solitamente con un trattino (“_”), il che indica che si tratta di metadati nascosti.
Come far sì che i campi personalizzati vengano salvati anche nell’account dell’utente durante la registrazione?
Se permetti la creazione di un account durante il processo di pagamento e desideri che campi come il “nome dell’azienda” vengano salvati anche nei dati dell’utente, è necessario aggiornare i metadati dell’utente insieme a quelli dell’ordine. È possibile utilizzare un approccio basato su processi automatizzati per eseguire queste operazioni in modo efficiente. update_user_meta( $customer_id, ‘billing_company’, $value );Si noti che, di solito, è necessario ottenere l’ID utente corretto nel contesto della registrazione o del login dell’utente.
Perché i miei campi personalizzati non vengono visualizzati correttamente nell’email?
Se il valore di un campo non viene visualizzato nell’email, la causa più comune è dimenticarsi di includerlo nel contenuto dell’email stessa. woocommerce_email_order_meta_keys Il filtro aggiunge i nomi delle chiavi alle variabili relative alla mail. Inoltre, il modello di mail potrebbe non contenere le parti necessarie per visualizzare i metadati personalizzati. Assicurati che i nomi delle tue chiavi di campo siano stati correttamente inseriti nell’array del filtro, e che il modello di mail sia stato configurato correttamente. email-order-details.phpSupporta la visualizzazione di metadati generici.
È possibile aggiungere blocchi di campi in posizioni diverse sulla pagina di pagamento?
Certo. Oltre a quelle predefinite… billing、shipping、order Per raggruppare, puoi farlo in woocommerce_checkout_fields Crea un nuovo gruppo all’interno del filtro, ad esempio… custom_sectionPoi, usa woocommerce_checkout_after_customer_details 或 woocommerce_before_order_notes Hook per azioni come l’attesa, in combinazione con… do_action(‘woocommerce_checkout_’ . $section); Per rendere i campi di questo nuovo gruppo in qualsiasi posizione della pagina desiderata, è necessario avere una certa conoscenza della struttura del template di pagamento di WooCommerce.
Il prossimo passo, cosa dovremo fare dopo?
Per una lettura approfondita e conoscenza pratica
I seguenti contenuti sono correlati all'argomento di questo articolo e sono adatti per una lettura approfondita. È consigliabile iniziare con l'articolo più vicino al tuo problema attuale, per poi passare gradualmente agli argomenti correlati, il che di solito dà risultati migliori.
- Sviluppo di plugin per WordPress: dall’approccio iniziale alla maestria: crea il tuo primo plugin personalizzato
- Imparare a sviluppare plugin per WordPress da zero: creare funzionalità personalizzate e generare entrate efficaci
- Lo sviluppo di plugin per WordPress parte da zero e rappresenta un processo fondamentale per rendere questo sistema di gestione dei contenuti il più popolare al mondo.
- Guida allo sviluppo di WooCommerce: creare un sito e-commerce professionale da zero.
- Introduzione alla sviluppo di plugin per WordPress da zero: funzionalità, standard e migliori pratiche dettagliate
Italiano