Una guida completa allo sviluppo di campi di checkout personalizzati per WooCommerce: dall'introduzione alla pratica.

Perché è necessario personalizzare i campi di pagamento?

La pagina di pagamento predefinita di WooCommerce offre campi di base come nome, indirizzo e email, ma per molti scenari commerciali specifici questi campi non sono sufficienti. Ad esempio, un negozio che vende torte personalizzate potrebbe aver bisogno di raccogliere i messaggi da inserire sulla torta, un sito di vendita all’ingrosso B2B potrebbe richiedere il numero di identificazione aziendale dei clienti, mentre un sito di biglietteria per eventi potrebbe necessitare dei numeri di identificazione dei partecipanti per i controlli di verifica. In tali casi, gli sviluppatori devono personalizzare i campi di pagamento per estendere le funzionalità del sistema e soddisfare le esigenze specifiche di raccolta dei dati aziendali.

I campi personalizzati non solo migliorano l’esperienza utente, rendendo il processo di pagamento più in linea con le esigenze aziendali, ma forniscono anche dati essenziali per la gestione dei clienti, l’elaborazione degli ordini e le attività di marketing. La corretta visualizzazione di questi campi sul lato server e nelle email garantisce l’integrità delle informazioni durante l’intero processo di ordine.

Dettagliata spiegazione dei metodi principali e degli “hook”

WooCommerce offre un potente e flessibile sistema di “hook” (ganci), che ci permette di personalizzare in modo approfondito la pagina di pagamento senza dover modificare il codice sorgente principale. Per implementare campi personalizzati, sono necessari principalmente tre passaggi fondamentali: aggiungere i campi, verificare i loro valori e salvare/disporre i dati raccolti. Ogni passaggio corrisponde a un particolare “action hook” o “filter hook” fornito da WooCommerce.

Filtri utilizzati per aggiungere campi

L’aggiunta di campi avviene principalmente tramite… woocommerce_checkout_fields Questo filtro viene utilizzato per aggiungere nuovi campi di input, menu a discesa o caselle di controllo in diverse sezioni del modulo di pagamento: l’area “Fattura”, l’area “Consegna” o l’area personalizzata “Informazioni aggiuntive all’ordine”.

I sviluppatori devono scrivere una funzione di callback che riceva un array di campi esistenti e ne restituisca uno nuovo dopo averlo modificato. All’interno della funzione, è possibile definire in dettaglio i seguenti attributi per ciascun campo nuovo: tipo, etichetta, placeholder, obbligatorietà, priorità (per l’ordinamento) e classi CSS.

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

Hook utilizzato per verificare i campi

Quando un utente invia il modulo di pagamento, dobbiamo assicurarci che i dati presenti nei campi personalizzati soddisfino i requisiti stabiliti. A questo scopo, è necessario utilizzare… woocommerce_checkout_process Action hook: Nella funzione di callback di questo hook, possiamo accedere ai dati che sono stati passati. $_POST I dati inviati tramite le variabili globali vengono verificati.

Ad esempio, è possibile verificare se un campo obbligatorio è vuoto o se il formato di un numero di telefono è corretto. In caso di fallimento nella verifica, è possibile utilizzare… wc_add_notice() La funzione mostra un messaggio di errore all’utente, impedendo che il processo di pagamento prosegua.

Hook utilizzato per salvare e visualizzare i dati.

Dopo che un utente invia un ordine, i dati relativi ai campi personalizzati devono essere salvati in modo sicuro nei metadati dell’ordine. Questo viene realizzato attraverso… woocommerce_checkout_update_order_meta Gli action hooks vengono utilizzati per completare determinate operazioni. All’interno della funzione di callback associata a questo hook, possiamo eseguire le azioni necessarie. update_post_meta() La funzione memorizza i valori dei campi del modulo che hanno superato la verifica nei relativi ordini. wp_postmeta Nella tabella del database.

Dopo aver salvato i dati, di solito è necessario visualizzarli in tre contesti diversi: la pagina dei dettagli dell’ordine nell’area amministrativa, l’email di conferma dell’ordine inviata all’utente, e la vista dell’ordine nell’account del cliente. Questo richiede l’adattamento delle interfacce di gestione, dei modelli di email e delle pagine degli account sul lato frontend del sito web.

Pratica pratica: Aggiungere un campo per i messaggi dei regali

Di seguito, mostreremo con un esempio completo come aggiungere un campo di testo per i “Messaggi di Regalo” a un negozio di fiori online. Questo campo apparirà nell’area delle informazioni sull’ordine ed è opzionale; il suo contenuto verrà salvato e visualizzato sia nel backend che nell’email inviata al cliente.

Passo 1: Aggiungere i campi alla pagina di pagamento

Innanzitutto, dobbiamo utilizzare… woocommerce_checkout_fields Utilizziamo un filtro per registrare questo nuovo campo; lo aggiungeremo dopo il campo “Note sull’ordine”. Ecco il codice da implementare, da inserire nel sottotema. functions.php Aggiunto al file o tramite plugin di funzionalità personalizzate.

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea',
        'class'       => array('form-row-wide'),
        'label'       => __('礼品祝福留言', 'your-text-domain'),
        'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
        'required'    => false,
        'priority'    => 25, // 显示在订单备注（priority 21）之后
    );
    return $fields;
}

Questo codice crea… textarea Un campo di tipo “testo”, con l’etichetta “Messaggio di auguri per il regalo”, è stato creato e sono stati impostati i relativi placeholder e le classi CSS.priority I parametri controllano la posizione in cui vengono visualizzati.

Passo 2: Salvare i dati dei campi nell’ordine d’acquisto

Successivamente, dobbiamo salvare i messaggi lasciati dagli utenti al momento della creazione dell’ordine. Per farlo, utilizzeremo… woocommerce_checkout_update_order_meta Si utilizza un “gancio” (hook) per implementarlo.

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_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

Qui, esaminiamo… $_POST['gift_message'] C’è un valore? Se sì, allora lo utilizziamo. sanitize_textarea_field() Dopo che la funzione ha eseguito le operazioni di pulizia per garantire la sicurezza, procede con il resto del processo. update_post_meta() Salvalo come metadati dell’ordine; il nome della chiave metadati è… _gift_message。

Passo 3: Visualizzare i dati sia nel backend che nelle email.

Dopo aver salvato i dati, è necessario renderli visibili agli utenti. Il codice seguente mostra come visualizzare tale campo sulla pagina dei dettagli dell’ordine nell’area amministrativa e nell’email inviata al cliente.

// 在管理员订单详情页显示
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo '<p><strong>' . __( '礼品留言:', 'your-text-domain' ) . '</strong><br />'`. esc_html($gift_message)`.'</p>';
    }
}

// 在订单确认邮件中显示
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {
    $gift_message = get_post_meta( $order-&gt;get_id(), '_gift_message', true );
    if ( $gift_message ) {
        $fields['gift_message'] = array(
            'label' =&gt; __( '礼品留言', 'your-text-domain' ),
            'value' =&gt; wptexturize( $gift_message ),
        );
    }
    return $fields;
}

La prima funzione visualizza i messaggi lasciati dagli utenti sotto l’indirizzo di fatturazione dell’ordine, nel backend. La seconda funzione aggiunge i messaggi come nuove righe di dati all’email di conferma dell’ordine inviata da WooCommerce.

Trucchi avanzati e considerazioni importanti

Una volta acquisite le metodologie di base, possiamo esplorare scenari di utilizzo più complessi e soluzioni di ottimizzazione, rendendo i campi personalizzabili più potenti e facili da utilizzare.

Creare condizioni per visualizzare determinati campi

A volte, la visualizzazione di un campo dipende dal valore di un altro campo. Ad esempio, il campo “Indirizzo del destinatario dell’fattura” viene mostrato soltanto quando l’utente seleziona l’opzione “Richiesta di fattura”. Per realizzare questa interazione front-end, è necessario utilizzare JavaScript. Possiamo aggiungere un evento associato al campo che attiva la modifica del comportamento del sito (ad esempio, un pulsante o una casella di controllo). change Un listener di eventi permette di controllare in modo dinamico la visualizzazione o la nascondimento dei campi target. Allo stesso tempo, è necessario effettuare le relative operazioni anche nella logica di verifica sul lato server.

La sicurezza e la pulizia dei dati presenti nei campi

La sicurezza è di fondamentale importanza. Quando si lavora con i dati forniti dagli utenti, è necessario eseguire costantemente operazioni di verifica e pulizia dei dati. Per i campi di testo, è consigliabile utilizzare… sanitize_text_field() 或 sanitize_textarea_field()Per quanto riguarda gli indirizzi email, si utilizza… sanitize_email()Quando si inviano i dati al front end, è essenziale utilizzare… esc_html() 或 wp_kses_post() È necessario utilizzare funzioni di escape per proteggere il codice da attacchi di tipo Cross-Site Scripting (XSS).

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

Compatibilità con plugin e temi di terze parti

Quando si aggiungono campi personalizzati, è possibile che sorgano conflitti con lo stile o i script di alcuni temi o altri plugin (in particolare quelli per l’ottimizzazione del processo di pagamento). Si consiglia di sviluppare sempre all’interno di un sottotema e di assegnare ai elementi che contengono i campi personalizzati nomi di classe CSS unici. Prima di un deployment ufficiale, è fondamentale effettuare test in diverse situazioni, comprese con temi diversi e con plugin comuni attivati. L’utilizzo degli strumenti di sviluppo del browser per verificare eventuali errori negli elementi e nei script rappresenta un metodo importante per risolvere problemi di compatibilità.

Riassumendo

Seguendo la guida di questo articolo, abbiamo iniziato dalla comprensione dei requisiti del cliente, per poi addentrarci gradualmente nel processo di sviluppo dei campi di pagamento personalizzati per WooCommerce. Abbiamo imparato come utilizzare… woocommerce_checkout_fields、woocommerce_checkout_process 和 woocommerce_checkout_update_order_meta Questi tre “hook” principali servono per aggiungere, verificare e salvare i campi di dati. Attraverso un caso pratico relativo ai messaggi lasciati come “regalo”, viene dimostrato in modo completo l’intero processo, dalla creazione dei campi alla visualizzazione dei dati. Infine, vengono discussi argomenti avanzati come i campi condizionali, le misure di sicurezza e la compatibilità.

Acquisendo queste competenze, sarai in grado di gestire in modo flessibile le esigenze specifiche di raccolta dei dati presenti in diversi contesti commerciali online, creando negozi WooCommerce più professionali e personalizzati. Ciò consentirà di migliorare i tassi di conversione e la soddisfazione dei clienti.

FAQ - Domande frequenti

Dove vengono memorizzati i dati dei campi personalizzati?

I dati relativi ai campi personalizzati vengono solitamente memorizzati come “metadati dell’ordine” nel database di WordPress. wp_postmeta Nella tabella, ogni record contiene l’ID dell’ordine corrispondente.post_idI metadati che hai definito (ad esempio…) _gift_messageI metadati e i valori associati possono essere gestiti tramite i metodi disponibili nell’oggetto ordine fornito da WooCommerce. $order->get_meta(‘_gift_message’) O funzioni di WordPress get_post_meta() Per ottenere questi dati…

Come aggiungere la validazione front-end (ad esempio, la validazione del formato) per i campi personalizzati?

Oltre all’uso… woocommerce_checkout_process Oltre all’utilizzo di “hook” per la verifica sul lato server, è anche possibile aggiungere attributi nativi HTML5 ai campi per effettuare verifiche di base. Ad esempio… pattern Utilizzato per espressioni regolari.type=”email” Utilizzato per il formato degli indirizzi email. Per verifiche in tempo reale più complesse, è necessario scrivere codice JavaScript/jQuery per monitorare i valori dei campi. blur 或 input L'evento verifica se i valori soddisfano le regole stabilite e fornisce un feedback immediato.

È possibile aggiungere campi personalizzati alla pagina di registrazione degli utenti?

Certo, ma il processo è leggermente diverso. Gli “hook” relativi ai campi di pagamento di WooCommerce sono progettati appositamente per la pagina di pagamento. Se desideri aggiungere campi sulla pagina di registrazione di “Il mio account”, dovrai utilizzare altri “hook” forniti da WordPress e WooCommerce. woocommerce_register_form Aggiungiamo un campo…woocommerce_created_customer Questo processo serve per salvare i dati dei campi nei metadati dell’utente. Il principio di funzionamento è simile a quello dei campi utilizzati per il pagamento, ma gli elementi di controllo (hook) e la posizione di archiviazione dei dati (i metadati dell’utente) sono diversi.

Perché i miei campi personalizzati non vengono visualizzati?

Prima di tutto, verifica se il tuo codice è stato aggiunto correttamente. functions.php Inoltre, non ci sono errori di grammatica. In secondo luogo, verificare se le chiavi dell’array di campi sono corrette; ad esempio, assicurarsi che siano state aggiunte correttamente nel sistema. $fields[‘order’] O ancora $fields[‘billing’] In alcuni casi, i problemi possono derivare dal fatto che il codice di altri plugin o temi abbia sovrascritto o eliminato i tuoi dati. Controlla nuovamente se ci sono elementi del codice che potrebbero interferire con il funzionamento dei tuoi campi. Inoltre, prova a cancellare la cache del sito web e del browser: file CSS/JS obsoleti potrebbero influenzare negativamente la visualizzazione delle pagine.