WooCommerce: Guida avanzata per un Checkout in Italia personalizzato (senza plugin)

Hai mai notato come il checkout di un e-commerce possa fare la differenza tra una vendita e un carrello abbandonato? In un’era dove l’esperienza utente è tutto, un processo di acquisto fluido e personalizzato non è solo un “plus”, ma una necessità. Nonostante WooCommerce offra una solida base, spesso la configurazione standard non è sufficiente a soddisfare le esigenze specifiche del mercato italiano, come la distinzione tra clienti privati e aziende con relativi campi obbligatori come la Partita IVA, o l’integrazione di un chiaro consenso per la privacy e i termini di servizio.

La prima tentazione per risolvere questi problemi è cercare un plugin. Ma ogni plugin aggiuntivo appesantisce il tuo sito, aumenta il rischio di conflitti e rende più complessa la manutenzione a lungo termine.

In questo articolo, ti mostreremo un approccio diverso: personalizzare il checkout di WooCommerce usando solo poche righe di codice. È un metodo più pulito, efficiente e, soprattutto, a prova di futuro. Ti guideremo passo dopo passo nella creazione di un checkout dinamico che mostra i campi giusti per la persona giusta, gestendo la Partita IVA per le aziende e il Codice Fiscale per i privati, e che richiede il consenso esplicito per la privacy. Unisciti a noi e impara a riprendere il pieno controllo del tuo e-commerce.

Il punto di partenza: capire gli Hook di WooCommerce

Prima di sporcarci le mani con il codice, è fondamentale capire il concetto che ci permetterà di modificare il checkout: gli hook di WordPress e WooCommerce.

Pensali come dei “punti di aggancio” che gli sviluppatori lasciano nel codice del core. Questi punti ci permettono di “agganciarci” e iniettare il nostro codice personalizzato in momenti specifici, senza toccare il codice originale. Questo è il motivo per cui non devi mai modificare i file del core o dei plugin: il tuo lavoro verrebbe perso al primo aggiornamento.

Gli hook si dividono in due categorie principali:

• Action Hook: Ti permettono di “fare qualcosa” in un determinato punto. Per esempio, l’hook woocommerce_before_checkout_billing_form ci permette di inserire del codice prima della sezione dei dettagli del cliente. Lo useremo per aggiungere il nostro campo radio “Privato/Azienda”.
• Filter Hook: Ti permettono di “modificare qualcosa”. In pratica, prendono un valore esistente, lo elaborano e restituiscono un valore modificato. Per il nostro scopo, useremo il filter woocommerce_checkout_fields per aggiungere, rimuovere o modificare i campi del checkout.

Capire la differenza tra questi due tipi di hook è il primo passo per diventare un esperto di personalizzazione su WooCommerce. Invece di riscrivere intere sezioni, ti limiti a lavorare su quei punti precisi, in modo pulito e sicuro. Scopri tutto sugli Action e i Filter Hooks ora!

La logica della personalizzazione: Privato vs. Azienda

Ora che hai capito come funzionano gli hook, passiamo al cuore del nostro progetto: creare un checkout che si adatti dinamicamente alle esigenze del cliente.

L’obiettivo è semplice ma efficace: presentare solo i campi di cui abbiamo realmente bisogno. Per un cliente privato, è inutile richiedere la Partita IVA. Allo stesso modo, per un’azienda, sono necessari campi specifici come la Ragione Sociale e, appunto, la Partita IVA.

La nostra soluzione si baserà su un approccio ibrido, che combina due linguaggi:

• PHP: Utilizzeremo PHP, il linguaggio su cui si basa WordPress, per definire e registrare tutti i campi necessari, sia per i privati che per le aziende. Questo codice andrà nel file functions.php del tuo tema child.
• JavaScript (jQuery): Useremo JavaScript per aggiungere l’interattività. Sarà lui a mostrare o nascondere i campi al volo, in base alla scelta dell’utente tra “Privato” e “Azienda”. Questo è ciò che rende il checkout un’esperienza fluida e moderna, evitando il ricaricamento della pagina.

Questa combinazione di PHP per la struttura e JavaScript per l’interazione è una best practice nello sviluppo web. Ti permette di avere un codice pulito e logico, separando la gestione dei dati dalla presentazione all’utente.

Preparazione all’uso del codice

Prima di darti il codice completo, dobbiamo fare una premessa fondamentale che ti eviterà problemi di compatibilità e perdita di lavoro.

Avviso Preliminare: non toccare mai i file del tema principale!

Ogni modifica al file functions.php del tuo tema principale verrà sovrascritta al prossimo aggiornamento. Per questo, è assolutamente cruciale lavorare sempre su un tema child. Clicca qui ora per scoprire come si crea un tema figlio!

Il trucco per evitare conflitti con i temi

Alcuni temi WordPress personalizzano pesantemente la pagina del checkout, rendendo difficile l’integrazione di codice esterno. Per superare questo problema, la soluzione più sicura è creare una nuova pagina di checkout da zero, basata solo sul codice di WooCommerce.

1. Vai su Pagine > Aggiungi nuova e crea una nuova pagina (es. “Nuovo Checkout”).
2. Inserisci al suo interno solo lo shortcode di WooCommerce: [woocommerce_checkout].
3. Salva e pubblica la pagina.
4. Infine, vai su WooCommerce > Impostazioni > Avanzate e seleziona questa nuova pagina come “Pagina Checkout”. In questo modo, sarai sicuro di avere un ambiente pulito e compatibile per il nostro codice.

Ecco come apparirà una pagina di checkout standard woocommerce

Ora che l’ambiente è pronto, sei pronto per vedere il codice completo e funzionante?

Il Cuore del Progetto: il Codice Completo

Ecco il codice che trasformerà il tuo checkout. Assicurati che il file functions.php contenga solo questo codice, a parte l’apertura <?php all’inizio.

<?php

/*
|--------------------------------------------------------------------------
| BLOCCO COMPLETO PER PERSONALIZZAZIONE CHECKOUT WOOCOMMERCE
|--------------------------------------------------------------------------
*/

/**
* 1. Aggiunge i campi radio per la scelta tra Privato e Azienda.
*/
add_action('woocommerce_before_checkout_billing_form', 'my_custom_checkout_customer_type_field');
function my_custom_checkout_customer_type_field( $checkout ) {
echo '<div id="customer-type-selection" style="margin-bottom: 20px;">';
echo '<h3>Tipo di cliente</h3>';
woocommerce_form_field( 'customer_type', array(
'type' => 'radio',
'class' => array('form-row-wide', 'customer-type-radio'),
'label_class' => array('woocommerce-form__label-for-radio'),
'options' => array( 'privato' => 'Privato', 'azienda' => 'Azienda' ),
'default' => 'privato',
), $checkout->get_value( 'customer_type' ));
echo '</div>';
}

/**
* 2. Aggiunge e modifica i campi di checkout.
*/
add_filter('woocommerce_checkout_fields', 'customize_checkout_fields');
function customize_checkout_fields( $fields ) {
$fields['billing']['billing_first_name']['required'] = false;
$fields['billing']['billing_last_name']['required'] = false;
$fields['billing']['billing_first_name']['class'][] = 'private-field';
$fields['billing']['billing_last_name']['class'][] = 'private-field';
$fields['billing']['billing_fiscal_code'] = array( 'label' => 'Codice Fiscale', 'placeholder' => 'Inserisci il Codice Fiscale', 'required' => false, 'class' => array('form-row-wide', 'private-field'), 'clear' => true, 'priority' => 112 );
$fields['billing']['billing_company']['label'] = 'Ragione Sociale';
$fields['billing']['billing_company']['placeholder'] = 'Inserisci la Ragione Sociale';
$fields['billing']['billing_company']['class'] = array('form-row-wide', 'company-field');
$fields['billing']['billing_company']['required'] = false;
$fields['billing']['billing_vat'] = array( 'label' => 'Partita IVA', 'placeholder' => 'Inserisci la Partita IVA', 'required' => false, 'class' => array('form-row-wide', 'company-field'), 'clear' => true, 'priority' => 111 );
$fields['billing']['billing_sdi_code'] = array( 'label' => 'Codice Destinatario (SDI)', 'placeholder' => 'Es. XXXXXXX (opzionale)', 'required' => false, 'class' => array('form-row-wide', 'company-field'), 'clear' => true, 'priority' => 113 );
return $fields;
}

/**
* 3. Aggiunge lo script jQuery per mostrare/nascondere e azzerare i campi.
*/
add_action( 'wp_footer', 'my_checkout_script' );
function my_checkout_script() {
global $post;
if ( ! is_checkout() && ( ! is_a($post, 'WP_Post') || ! has_shortcode( $post->post_content, 'woocommerce_checkout' ) ) ) return;
?>
<style> .company-field, .private-field { transition: all 0.3s ease; } </style>
<script type="text/javascript">
jQuery( function($) {
function toggleFields( type ) {
var companyFields = $('.company-field'), privateFields = $('.private-field');
if ( type === 'azienda' ) {
companyFields.slideDown(); privateFields.slideUp();
companyFields.find('#billing_company, #billing_vat').prop('required', true);
$('#billing_sdi_code').prop('required', false); 
privateFields.find('input, select').prop('required', false).val('');
} else {
privateFields.slideDown(); companyFields.slideUp();
privateFields.find('input, select').prop('required', true);
companyFields.find('input, select').prop('required', false).val('');
}
}
var initialType = $('input[name="customer_type"]:checked').val();
toggleFields(initialType);
$('body').on('change', 'input[name="customer_type"]', function() { toggleFields($(this).val()); });
});
</script>
<?php
}

/**
* 4. Rende i campi obbligatori lato server in base alla scelta.
*/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
if ( isset($_POST['customer_type']) && $_POST['customer_type'] === 'azienda' ) {
if ( empty($_POST['billing_company']) ) wc_add_notice( 'Il campo <strong>Ragione Sociale</strong> è obbligatorio.', 'error' );
if ( empty($_POST['billing_vat']) ) wc_add_notice( 'Il campo <strong>Partita IVA</strong> è obbligatorio.', 'error' );
} else {
if ( empty($_POST['billing_first_name']) ) wc_add_notice( 'Il campo <strong>Nome</strong> è obbligatorio.', 'error' );
if ( empty($_POST['billing_last_name']) ) wc_add_notice( 'Il campo <strong>Cognome</strong> è obbligatorio.', 'error' );
if ( empty($_POST['billing_fiscal_code']) ) wc_add_notice( 'Il campo <strong>Codice Fiscale</strong> è obbligatorio.', 'error' );
}
}

/**
* 5. Salva i campi personalizzati nei meta dati dell'ordine.
*/
add_action('woocommerce_checkout_update_order_meta', 'save_my_custom_checkout_fields');
function save_my_custom_checkout_fields($order_id) {
if ( isset($_POST['billing_fiscal_code']) ) update_post_meta($order_id, '_billing_fiscal_code', sanitize_text_field($_POST['billing_fiscal_code']));
if ( isset($_POST['billing_vat']) ) update_post_meta($order_id, '_billing_vat', sanitize_text_field($_POST['billing_vat']));
if ( isset($_POST['billing_sdi_code']) ) update_post_meta($order_id, '_billing_sdi_code', sanitize_text_field($_POST['billing_sdi_code']));
}

/**
* 6. Mostra i campi personalizzati nell'admin.
*/
add_action('woocommerce_admin_order_data_after_billing_address', 'display_my_custom_fields_in_admin_order');
function display_my_custom_fields_in_admin_order($order) {
$vat_number = $order->get_meta('_billing_vat');
$sdi_code = $order->get_meta('_billing_sdi_code');
$fiscal_code = $order->get_meta('_billing_fiscal_code');

if ( ! empty($vat_number) ) {
echo '<p><strong>Partita IVA:</strong> ' . esc_html($vat_number) . '</p>';
if ( ! empty($sdi_code) ) {
echo '<p><strong>Codice SDI:</strong> ' . esc_html($sdi_code) . '</p>';
}
} else {
echo '<p><strong>Codice Fiscale:</strong> ' . esc_html($fiscal_code) . '</p>';
}
}

/**
* 7. Aggiunge e valida la checkbox per la privacy.
*/
add_action( 'woocommerce_checkout_before_terms_and_conditions', 'add_custom_privacy_checkbox' );
function add_custom_privacy_checkbox() {
woocommerce_form_field( 'privacy_policy_accepted', array( 'type' => 'checkbox', 'class' => array('form-row privacy'), 'label' => 'Ho letto e accetto l\'<a href="/informativa-sulla-privacy/" target="_blank">Informativa sulla privacy</a> e i <a href="/termini-e-condizioni/" target="_blank">Termini e Condizioni</a>.', 'required' => true, ));
}

add_action( 'woocommerce_checkout_process', 'validate_custom_privacy_checkbox' );
function validate_custom_privacy_checkbox() {
if ( ! isset( $_POST['privacy_policy_accepted'] ) ) { wc_add_notice( 'Per procedere con il tuo acquisto, devi accettare l\'Informativa sulla privacy e i Termini e Condizioni.', 'error' ); }
}

Cosa fa questo codice?

Questo blocco di codice completo è la nostra soluzione “all-in-one”. L’abbiamo progettato per:

• Rendere dinamico il checkout: Aggiunge un selettore “Privato/Azienda” che mostra o nasconde automaticamente i campi pertinenti, come il Codice Fiscale o la Partita IVA.
• Gestire la conformità legale: Richiede il consenso obbligatorio per la privacy e i termini di servizio, essenziale per il GDPR.
• Salvare e visualizzare i dati: Si assicura che le informazioni personalizzate vengano salvate correttamente nell’ordine e visualizzate in modo chiaro nella bacheca di amministrazione.

In pratica, stiamo creando un checkout più intelligente e professionale, che si adatta alle esigenze del cliente e al contempo semplifica la gestione del tuo e-commerce.

Ecco il risultato

Per i privati sono stati aggiunti i campi Nome, Cognome e Codice Fiscale.

Per le aziende, invece, Partita IVA, Ragione Sociale e Codice Destinatario (SDI). 

In entrambe troviamo la spunta per gestisce l’aspetto legale del checkout.

I dati sono correttamente registrati nel back-end Woocommerce > Ordini

Spiegazione del Codice: Funzione per Funzione

Aggiungere il selettore (Funzione 1)

Il primo blocco di codice aggiunge l’elemento di scelta tra “Privato” e “Azienda”.

• L’hook woocommerce_before_checkout_billing_form è il punto di aggancio che posiziona i campi radio esattamente dove vogliamo che appaiano: sopra i campi di fatturazione.
• La funzione woocommerce_form_field è una funzione standard di WooCommerce che ci aiuta a creare il campo in modo che sia compatibile con il resto del modulo.
• Abbiamo usato le classi CSS form-row-wide e customer-type-radio che ci serviranno poi nel codice JavaScript per selezionare e gestire questi elementi.

Definizione dei campi (Funzione 2)

Questa è la parte più corposa, dove ridefiniamo la struttura dei campi di checkout.

• L’hook woocommerce_checkout_fields ci permette di prendere il set di campi predefiniti di WooCommerce e modificarli a nostro piacimento.
• Abbiamo reso i campi billing_first_name e billing_last_name (Nome e Cognome) non obbligatori ('required' => false) in partenza.
• Abbiamo aggiunto le classi private-field e company-field a tutti i campi. Questo è un passaggio fondamentale: il nostro script JavaScript userà queste classi per capire quali campi mostrare o nascondere.
• Infine, abbiamo aggiunto i nuovi campi specifici per il mercato italiano: billing_fiscal_code (Codice Fiscale), billing_vat (Partita IVA) e billing_sdi_code (Codice SDI per la fatturazione elettronica).

L’Interazione Dinamica con JavaScript (Funzione 3)

Qui entra in gioco JavaScript per creare l’effetto dinamico che abbiamo cercato.

• L’hook wp_footer serve a includere il nostro codice JavaScript nella parte inferiore della pagina, assicurandosi che il resto del sito si sia già caricato.
• Il codice verifica che siamo sulla pagina di checkout e, tramite una funzione (toggleFields), gestisce la logica di slideUp() e slideDown() per nascondere e mostrare i campi.
• Quando l’utente seleziona “Azienda”, il codice nasconde i campi del “Privato” e, cosa importantissima, li svuota (.val('')) e li rende non obbligatori (.prop('required', false)).
• Inoltre, rende obbligatori i campi aziendali (#billing_company, #billing_vat) per assicurare che i dati vengano inseriti.

Validazione e Controllo lato server (Funzione 4)

Questa funzione è la nostra rete di sicurezza. Se per qualche motivo il JavaScript fallisse (ad esempio, se l’utente ha JavaScript disattivato), questo blocco interviene.

• L’hook woocommerce_checkout_process si attiva quando l’utente clicca sul pulsante “Effettua ordine”.
• Il codice controlla quale opzione è stata selezionata ($_POST['customer_type']) e verifica che i campi obbligatori per quella scelta siano stati compilati.
• Se un campo obbligatorio non è stato compilato, la funzione wc_add_notice mostra un errore e ferma l’ordine.

Salvataggio dei dati (Funzione 5)

Qui salviamo i dati personalizzati nel database, associandoli all’ordine.

• L’hook woocommerce_checkout_update_order_meta si attiva quando l’ordine viene creato con successo.
• Le funzioni update_post_meta salvano il valore di ogni campo personalizzato (billing_fiscal_code, billing_vat, billing_sdi_code) nel database di WordPress, rendendoli parte integrante dei dettagli dell’ordine.

Visualizzazione nell’Amministrazione (Funzione 6)

Questa funzione ti permette di vedere i dati personalizzati direttamente nella bacheca di WordPress.

• L’hook woocommerce_admin_order_data_after_billing_address posiziona il nostro codice nella pagina dell’ordine, subito dopo l’indirizzo di fatturazione.
• La funzione usa la “strategia inversa”: controlla se esiste un valore per la Partita IVA o per il Codice Fiscale. Se trova la Partita IVA, mostra quel valore e il Codice SDI. Se non trova la Partita IVA ma trova il Codice Fiscale, mostra quest’ultimo. Un modo molto elegante per determinare il tipo di cliente senza bisogno di un campo extra.

Consenso Privacy (Funzione 7)

Infine, il blocco che gestisce l’aspetto legale del checkout.

• L’hook woocommerce_checkout_before_terms_and_conditions aggiunge il checkbox per la privacy.
• Il secondo hook, woocommerce_checkout_process, si assicura che il campo sia spuntato prima di permettere all’utente di completare l’acquisto.

Vuoi scoprire di più sulle funzioni? Clicca qui ora!

Un tocco di stile: il tuo codice CSS per un checkout moderno

Il checkout predefinito di WooCommerce ha un layout a una colonna, che può risultare lungo e dispersivo. Con poche righe di CSS, possiamo dividerlo in due colonne, rendendolo più compatto e facile da navigare.

Il codice che segue non va inserito nel file functions.php, ma nel file style.css del tuo tema child. In questo modo, mantieni separati lo stile (CSS) e la funzionalità (PHP), una best practice fondamentale nello sviluppo web.

Ecco il codice CSS da utilizzare:

@media (min-width: 769px) {
.woocommerce.woocommerce-checkout form #customer_details.col2-set {
width: 55%;
float: left;
margin-right: 4.347826087%;
}
.woocommerce.woocommerce-checkout form #customer_details.col2-set .col-1,
.woocommerce.woocommerce-checkout form #customer_details.col2-set .col-2 {
float: none;
width: auto;
}
.woocommerce.woocommerce-checkout form #order_review,
.woocommerce.woocommerce-checkout form #order_review_heading {
width: 40%;
float: right;
margin-right: 0;
clear: right;
}
.woocommerce-page table.shop_table {
width: 100%;
border-collapse: collapse;
}
}

Spiegazione del codice:

• @media (min-width: 769px): Le modifiche avranno effetto solo su schermi di grandi dimensioni (desktop e tablet orizzontale). In questo modo, su smartphone, il layout tornerà automaticamente a una sola colonna, garantendo la leggibilità.
• woocommerce.woocommerce-checkout form #customer_details: Questo selettore punta alla sezione in cui sono presenti i campi di fatturazione. Impostando il suo width al 55% e con float: left, la posizioniamo sulla sinistra della pagina.
• woocommerce.woocommerce-checkout form #order_review: Questo selettore agisce sul riepilogo dell’ordine. Impostando il suo width al 40% e con float: right, lo posizioniamo sulla destra, creando un layout a due colonne bilanciato.
• woocommerce-page table.shop_table: Questo selettore garantisce che la tabella del carrello all’interno del riepilogo dell’ordine si adatti correttamente al suo contenitore.

Applicando questo stile, il tuo checkout non solo sarà funzionale e conforme alle leggi, ma avrà anche un aspetto pulito e professionale.

Conclusione: riprendi il controllo del tuo E-commerce

Arrivare alla fine di questa guida significa aver fatto un passo importante: hai dimostrato che non c’è bisogno di affidarsi a decine di plugin per avere un sito che funziona e che offre un’esperienza utente impeccabile.

Con il codice che abbiamo creato, il tuo e-commerce ora non è solo più performante e sicuro, ma è anche perfettamente adattato alle esigenze del mercato italiano. Hai aggiunto campi fondamentali come Partita IVA e Codice Fiscale, gestendoli in modo intelligente, e hai messo al sicuro il tuo business con un consenso esplicito per la privacy. Il tutto, lavorando su un ambiente pulito e con un design moderno.

Quello che hai imparato non è solo un semplice “copia e incolla”. Hai scoperto come sfruttare il vero potenziale di WooCommerce e WordPress, lavorando con gli hook, comprendendo l’importanza del tema child e separando le funzionalità dal design.

Da qui in avanti, la strada è in discesa. Ora hai il pieno controllo del tuo checkout. Puoi continuare a perfezionarlo, aggiungere ulteriori personalizzazioni e, soprattutto, offrire ai tuoi clienti un’esperienza d’acquisto senza frizioni. E in un mercato competitivo come quello online, questo è il tuo vero vantaggio.

Spero che questa guida ti sia stata utile e ti auguro un grande successo.