WooCommerce: come personalizzare i campi del checkout

Perché personalizzare il checkout di WooCommerce

Il modulo di checkout predefinito di WooCommerce è pensato per coprire esigenze generiche, ma ogni store ha le sue particolarità. Personalizzare i campi del checkout ti permette di adattare l’esperienza di acquisto ai tuoi clienti, semplificare il processo e ottenere informazioni davvero utili al tuo business.

Migliorare l’esperienza utente

Un checkout su misura può eliminare distrazioni e ridurre lo stress per chi acquista. Ad esempio, rimuovere campi non necessari o rinominare etichette poco chiare aiuta a rendere il processo più fluido e comprensibile, soprattutto su mobile.

Ridurre l’abbandono del carrello

Ogni campo in più è un potenziale ostacolo alla conversione. Se chiedi troppi dati o non ottimizzi il layout, rischi di perdere vendite. Riducendo il numero di passaggi e semplificando il form, puoi aumentare la percentuale di completamento degli ordini.

Raccogliere informazioni utili all’ordine

Vuoi sapere se l’utente desidera una fattura, o se ci sono note di consegna specifiche? Vuoi far scegliere una data per la spedizione? Personalizzare il checkout significa anche ottenere dati chiave per gestire meglio la logistica e il supporto clienti.

Come modificare i campi del checkout con codice

Attenzione: questi filtri funzionano solo con il checkout classico

Tutte le personalizzazioni che vedrai in questa sezione si applicano esclusivamente al checkout classico di WooCommerce, cioè quello generato dal file checkout/form-checkout.php e utilizzato insieme allo shortcode [woocommerce_checkout].

👉 Non sono compatibili con il nuovo Checkout a Blocchi (creato con Gutenberg e basato su React).
Se stai usando un tema che abilita i blocchi di default (es. Storefront o temi recenti), potresti non vedere gli effetti del codice.

Come verificare se stai usando il checkout classico

• Vai su WooCommerce → Impostazioni → Avanzate
• Controlla che la pagina “Checkout” usi lo shortcode [woocommerce_checkout]

Se vuoi usare i Blocchi, dovrai intervenire via JavaScript/React oppure usare plugin compatibili con il nuovo sistema.

Come modificare i campi del checkout con codice

WooCommerce mette a disposizione una serie di hook PHP che permettono di modificare ogni campo del checkout senza bisogno di plugin esterni. Questo ti garantisce massima flessibilità e performance.

Tutte le personalizzazioni si applicano tramite il filtro:

woocommerce_checkout_fields

Con questo hook puoi:

• Rimuovere campi esistenti
• Modificare etichette, placeholder, classi CSS, ordine
• Aggiungere campi personalizzati (obbligatori o facoltativi)

Vediamo alcuni esempi pratici.

Rimuovere un campo dal checkout

Ecco come rimuovere il campo telefono:

add_filter( 'woocommerce_checkout_fields', 'rimuovi_campo_telefono' );
function rimuovi_campo_telefono( $fields ) {
    unset( $fields['billing']['billing_phone'] );
    return $fields;
}

Modificare un campo esistente

Puoi cambiare label, placeholder o classe CSS. Ad esempio, per rinominare il campo “Telefono”:

add_filter( 'woocommerce_checkout_fields', 'modifica_label_telefono' );
function modifica_label_telefono( $fields ) {
    $fields['billing']['billing_phone']['label'] = 'Telefono di contatto';
    $fields['billing']['billing_phone']['placeholder'] = 'Inserisci il tuo numero';
    return $fields;
}

Aggiungere un campo personalizzato

Vuoi chiedere al cliente “Come ci hai conosciuto?” con un menu a tendina?

add_filter( 'woocommerce_checkout_fields', 'aggiungi_campo_custom' );
function aggiungi_campo_custom( $fields ) {
    $fields['billing']['billing_riferimento_marketing'] = array(
        'type'        => 'select',
        'label'       => 'Come ci hai conosciuto?',
        'options'     => array(
            ''             => 'Seleziona un’opzione',
            'google'       => 'Google',
            'social'       => 'Social',
            'passaparola'  => 'Passaparola',
            'altro'        => 'Altro',
        ),
        'required'    => false,
        'class'       => array('form-row-wide'),
        'priority'    => 110,
    );
    return $fields;
}

Validare e salvare i campi personalizzati

Dopo aver aggiunto uno o più campi personalizzati al checkout di WooCommerce, devi assicurarti che vengano validati correttamente e salvati nel database. In questa sezione ti mostro come farlo in modo semplice e sicuro, sfruttando gli hook nativi.

Validazione dei campi – woocommerce_checkout_process

Puoi usare questo hook per controllare se un campo è stato compilato correttamente. Se vuoi ad esempio rendere obbligatorio il campo “Come ci hai conosciuto?”:

add_action( 'woocommerce_checkout_process', 'valida_campo_riferimento' );
function valida_campo_riferimento() {
    if ( empty( $_POST['billing_riferimento_marketing'] ) ) {
        wc_add_notice( __( 'Per favore, indica come ci hai conosciuto.', 'woocommerce' ), 'error' );
    }
}

Salvataggio dei dati – woocommerce_checkout_update_order_meta

Una volta validato, il campo va salvato all’interno dell’ordine:

add_action( 'woocommerce_checkout_update_order_meta', 'salva_campo_riferimento' );
function salva_campo_riferimento( $order_id ) {
    if ( ! empty( $_POST['billing_riferimento_marketing'] ) ) {
        update_post_meta( $order_id, '_billing_riferimento_marketing', sanitize_text_field( $_POST['billing_riferimento_marketing'] ) );
    }
}

Mostrare il campo in email e nel backend

Per completare la personalizzazione, puoi mostrare il valore del campo nel dettaglio ordine del backend e nelle email.

✅ Backend amministrazione:

add_action( 'woocommerce_admin_order_data_after_billing_address', 'mostra_riferimento_backend', 10, 1 );
function mostra_riferimento_backend( $order ) {
    $valore = get_post_meta( $order->get_id(), '_billing_riferimento_marketing', true );
    if ( $valore ) {
        echo '<p><strong>Come ci ha conosciuto:</strong> ' . esc_html( $valore ) . '</p>';
    }
}

Email di notifica ordine:

add_filter( 'woocommerce_email_customer_details_fields', 'aggiungi_riferimento_email', 10, 3 );
function aggiungi_riferimento_email( $fields, $sent_to_admin, $order ) {
    $valore = get_post_meta( $order->get_id(), '_billing_riferimento_marketing', true );
    if ( $valore ) {
        $fields['riferimento_marketing'] = array(
            'label' => 'Come ci ha conosciuto',
            'value' => $valore,
        );
    }
    return $fields;
}

Plugin per personalizzare il checkout di WooCommerce

Se preferisci una soluzione senza codice, esistono plugin affidabili che ti permettono di modificare il checkout con un’interfaccia visuale. Sono ideali per store manager, freelance non tecnici o agenzie che cercano rapidità.

Checkout Field Editor (by ThemeHigh)

Probabilmente il plugin più popolare per personalizzare i campi del checkout. Con la versione gratuita puoi:

• Aggiungere, rimuovere e modificare campi di fatturazione, spedizione e aggiuntivi
• Cambiare etichette, classi CSS, ordine dei campi
• Visualizzare i campi nel backend ordine

👉 Versione Pro disponibile con campi condizionali, logica avanzata e tipi campo extra.

Vai al plugin su WordPress.org