Home>Guide>Come personalizzare WooCommerce: il checkout

Come personalizzare WooCommerce: il checkout


Come personalizzare WooCommerce: il checkout


Per chi abbia utilizzato almeno una volta WooCommerce, c’è un’esigenza che sicuramente è comparsa più spesso delle altre: come faccio a modificare i campi di input del checkout e come faccio ad aggiungerne di nuovi?
Scopriamo come soddisfare entrambe le esigenze utilizzando gli hooks di WooCommerce, senza far ricorso a plugins già confezionati.

  • Leggi l'articolo, ti bastano solo 1 minuto, 13 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Modificare i campi degli indirizzi di fatturazione o spedizione già esistenti

WooCoomerce mette a disposizione degli hooks per consentirti di modificare a piacimento i campi già esistenti e modificarli è molto semplice.

Ad esempio, ipotizza di voler eliminare il campo Ragione sociale dall’indirizzo di fatturazione. Utilizziamo l’hook woocommerce_billing_fields, che agisce su un array contenente i campi relativi all’indirizzo di fatturazione, oppure l’hook woocommerce_shipping_fields, che agisce su un array contenente i campi relativi all’indirizzo di spedizione.
Nel nostro caso, utilizzeremo il primo. Aggiungi quindi al file functions.php del tuo tema, che trovi nello spazio FTP del tuo sito, in:

wp-content/themes/{nome_del_tema}/

il codice:

// Rimuove il campo “Ragione sociale” dall’indirizzo di fatturazione
add_filter( 'woocommerce_billing_fields', function( $fields ) {
	unset( $fields['billing_company'] );

	return $fields;
} );

e controlla il risultato:

Per semplificare il lavoro, ecco un elenco dei campi contenuti negli array, così da poterli modificare a tuo piacimento:

Billing

  • billing_first_name
  • billing_last_name
  • billing_company
  • billing_address_1
  • billing_address_2
  • billing_city
  • billing_postcode
  • billing_country
  • billing_state
  • billing_email
  • billing_phone

Shipping

  • shipping_first_name
  • shipping_last_name
  • shipping_company
  • shipping_address_1
  • shipping_address_2
  • shipping_city
  • shipping_postcode
  • shipping_country
  • shipping_state

Ma sai che è possibile agire su ognuno dei campi modificandone le proprietà per personalizzarli come preferisci?
Nel caso volessi, ad esempio, non eliminare il campo Ragione sociale, ma renderlo obbligatorio, ecco come fare:

// Rende obbligatorio il campo “ragione sociale” nell’indirizzo di fatturazione
add_filter( 'woocommerce_billing_fields', function( $fields ) {
	$fields['billing_company']['required'] = true;

	return $fields;
} );

Ed ecco l’elenco delle proprietà contenute in ogni campo:

  • type: Tipo di input (text, textarea, password, select)
  • label: Etichetta di testo per il campo
  • placeholder: Testo segnaposto
  • class: Classi da applicare
  • required: True o false, indica se il campo è obbligatorio
  • clear: True o false, stabilisce se il campo può avere altri campi accanto
  • priority: La priorità utilizzata per l’ordinamento dei campi
  • label_class: Classi da applicare all’etichetta del campo
  • options: Utilizzato dagli input di tipo select, è un array contenente le singole opzioni (nella forma key => value)

Aggiungere un campo personalizzato

Ma se anziché modificare o eliminare campi già esistenti volessi aggiungerne uno nuovo? Sì, anche questo è possibile, ma è necessario qualche passaggio supplementare.
Sono sicuro, una delle richieste che molti utilizzando WooCommerce si sono trovati a dover affrontare è:

È possibile aggiungere un campo “Partita IVA / Codice fiscale” all’indirizzo di fatturazione?

Colto nel segno, vero? Beh, la risposta è sì, ovviamente, ma il plus è farlo senza alcun plugins!
Utilizzando lo stesso book menzionato in precedenza, aggiungi nel file functions.php del tuo tema, che trovi nello spazio FTP del tuo sito, in:

wp-content/themes/{nome_del_tema}/

il codice:

// Aggiunge il campo "Partita IVA / Codice fiscale"
add_filter( 'woocommerce_billing_fields', function( $fields ) {
    $fields['billing_vat'] = array(
        'label'         => __( 'Vat number / Tax code', 'woocommerce' ),
        'placeholder'   => _x( 'Vat number / Tax code', 'placeholder', 'woocommerce' ),
        'required'      => true,
        'class'         => array( 'form-row-wide' ),
        'clear'         => true,
        'priority'      => 35
    );

    return $fields;
} );

Ti starai chiedendo: ma adesso come faccio a salvare il valore del campo appena inserito? Giusta osservazione, ma la risposta è molto più semplice di quanto prevedi. I campi inseriti nell’array checkout_fields vengono automaticamente processati e salvati senza alcun tipo di implementazione supplementare. Per maggiore chiarezza e completezza, il campo viene salvato, come accade per gli altri, tra i post meta dell’ordine con la nomenclatura _billing_vat.


Visualizzare il campo personalizzato nel backend

Bene, abbiamo aggiunto un nuovo campo, abbiamo verificato che viene correttamente visualizzato nel frontend e sappiamo che WooCommerce lo processa correttamente come se fosse un campo nativo. Ma un attimo, hai notato che non vi è traccia di questo campo nel backend di WordPress? Non preoccuparti, non c’è alcun errore o problema.
Se è vero che il salvataggio del valore del campo avviene in automatico, è anche vero però che la sua visualizzazione nel backend di WordPress non è altrettanto automatica.
Ma niente paura, sono sufficienti poche righe di codice:

// Visualizza il campo "Partita IVA / Codice fiscale" nella scheda ordine nel backend di WordPress
add_filter( 'woocommerce_admin_order_data_after_billing_address', function( $order ) {
    echo '<p><strong>' . __( 'Vat number / Tax code', 'woocommerce' ) . ':</strong> ' . get_post_meta( $order->get_ID(), '_billing_vat', true ) . '</p>';
}, 10, 1 );

Andando nel backend di WordPress e aprendo una scheda ordine, noterai che adesso è visibile il nuovo campo:


Visualizzare il nuovo campo nella mail dell'ordine

Ci siamo quasi, un ultimo sforzo. Potresti avere la necessità di voler visualizzare il campo appena creato anche nella mail dell’ordine. Anche stavolta, è sufficiente aggiungere nel file functions.php del tuo tema, che trovi nello spazio FTP del tuo sito, in:

wp-content/themes/{nome_del_tema}/

il codice:

// Aggiunge il campo "Partita IVA / Codice fiscale" alla mail dell'ordine
add_filter( 'woocommerce_email_customer_details_fields', function( $fields, $sent_to_admin, $order ) {
     $fields['_billing_vat'] = array(
     	'label' => __( 'Vat number / Tax code', 'woocommerce' ),
     	'value' => get_post_meta( $order->get_ID(), '_billing_vat', true )
     );
     return $fields;
}, 10, 3 );

e WooCommerce si occuperà di fare il resto!


Aggiornamento: campo editabile

Ma se volessi che il nuovo campo fosse anche editabile? Beh, anche questo è risolvibile!

La parte di creazione del campo non varia, quindi puoi fare riferimento al paragrafo “Aggiungere un campo personalizzato”, mentre i passaggi successivi cambiano leggermente.
È necessario adesso far in modo che il nuovo campo sia visibile nell’indirizzo di fatturazione formattato, quindi prima definisci le variabili da utilizzare, sempre nel file functions.php:

// Crea la variabile "Partita IVA / Codice fiscale" per la stampa
add_filter( 'woocommerce_formatted_address_replacements', function( $address, $args ) {
    $address['{vat}'] = '';
    $address['{vat_upper}'] = '';

    if ( ! empty( $args['vat'] ) ) {
        $address['{vat}'] = $args['vat'];
        $address['{vat_upper}'] = strtoupper($args['vat']);
    }
    return $address;
}, 10, 2 );

ed infine inserisci il nuovo campo nell’indirizzo formattato:

// Ridefinisce la formattazione per stampare l'indirizzo, compreso il campo "Partita IVA / Codice fiscale"
add_filter( 'woocommerce_localisation_address_formats', function( $formats ) {
    return str_replace( "{company}", "{company}\n{vat_upper}", $formats );
} );

In questo modo, il campo è stato aggiunto direttamente nella funzione che formatta e visualizza l’indirizzo di fatturazione, quindi verrà aggiunto automaticamente ad esso sia nell’ordine nel backend, sia nella mail dell’ordine senza utilizzare ulteriore codice e, inoltre, risulta adesso anche modificabile! Prova per credere, apri nel backend del tuo e-commerce un ordine e clicca sul pulsante di modifica indirizzo di fatturazione.



Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come inserire il pulsante "Condividi su WhatsApp" su WordPress

Come inserire il pulsante ‘Condividi su WhatsApp’ su WordPress


Ecco un utile consiglio su come aumentare la diffusione delle pagine e degli articoli del tuo WordPress introducendo il pulsante di condivisione su WhatsApp. Condividere da smartphone non è mai stato così semplice.

Come resettare la password di WordPress con phpMyAdmin

Come resettare la password di WordPress con phpMyAdmin


Hai dimenticato la password per accedere al backend del tuo WordPress e non sai come fare? Questa guida fa al caso tuo! Scopri come modificare la password del tuo account direttamente dal database

Oppure cerca tra gli articoli correlati


Qualche dubbio? Ecco le opinioni degli altri utenti

Ottimo lavoro 🙂 e se io volessi modificare l’ordine della visualizzazione dei campi del Billing?
Grazie

In risposta a Roberto

Ciao Roberto, grazie mille!
Per modificare l’ordine, ti basta utilizzare il filtro ‘woocommerce_billing_fields’, agendo sull’attributo priority del campo che ti interessa. Ad esempio, per spostare in fondo il campo company, potresti inserire nel file functions.php lo snippet:

// Sposta il campo “Ragione sociale” in fondo
add_filter( 'woocommerce_billing_fields', function( $fields ) {
	$fields['billing_company']['priority'] = 999;

	return $fields;
} );

Se ti può essere utile, ecco l’elenco dei campi del Billing con le relative priorità di default:

  • billing_first_name -> 10
  • billing_last_name -> 20
  • billing_company -> 30
  • billing_country -> 40
  • billing_address_1 -> 50
  • billing_address_2 -> 60
  • billing_city -> 70
  • billing_state -> 80
  • billing_postcode -> 90
  • billing_phone -> 100
  • billing_email -> 110

Saluti

Qui in realtà ho risolto con un frammento di codice recuperato su gitub:
https://gist.github.com/bavington/f325d5bee9325001bba3
grazie ancora e buon lavoro

Salve. grazie per l’articolo molto semplice e dettagliato. Vorrei chiederti: se volessi rendere un prodotto acquistabile solo attraverso l’inserimento di un coupon da inserire nel carrello? È possibile?

In risposta a Gennaro

Ciao Gennaro,
la logica è un po’ complessa: considera che un prodotto se non vendibile non può essere aggiunto al carrello, l’approccio dovrebbe essere un altro. Ad esempio, potresti lasciare vendibile il prodotto, ma considerare di bloccare la possibilità di procedere al checkout se non è presente il coupon. Questa soluzione però bloccherebbe l’acquisto per tutti i prodotti in assenza del coupon, non so se possa fare al caso tuo. Occorrerebbe un’analisi più approfondita dello store, del processo di acquisto e della logica che desideri applicare, ma in linea di massima questa può essere una base da cui partire.
Spero di esserti stato di aiuto…

Ok grazie tante del suggerimento

Ciao, ho letto il tuo articolo che trovo interessante e ben fatto. Io però vorrei modificare la scritta "Dettagli di fatturazione" e la check "Dettagli di spedizione". In sostanza vorrei che le etichette cambiassero nome, poi se nel backend i campi mantengono il nome di billink e shipping non importa. Come posso fare?

In risposta a Claudio

Ciao Claudio, grazie mille! Purtroppo i testi che vorresti cambiare non sono modificabili tramite hooks. Le alternative sono due, la prima è modificare il file di traduzione di WooCommerce (o del tuo tema, se la label è stata sovrascritta), oppure modificando direttamente il file woocommerce/checkout/form-billing.php nella cartella del tuo tema.

Ciao, grazie per la risposta. Sono riuscito a cambiare l'etichetta "Dettagli di fatturazione" dal file form-billing.php, però mi sono resoconto che non posso modificare di conseguenza anche questi campi (togliendo per esempio nome, cognome e ragione sociale) in quanto li utilizza per creare la fattura. La cosa migliore forse è personalizzare i campi "dettagli di spedizione". Però non ho capito come far apparire la check da selezionare per visualizzare i campi di spedizione e da dove cambiare l'etichetta: nel file form-billing.php non c'è…
Grazie ancora.

In risposta a Claudio

Ciao Claudio,
mi fa piacere esserti stato di aiuto. La checkbox e la relativa etichetta, puoi trovarla nel file woocommerce/checkout/form-billing.php nella cartella del tuo tema

Ciao woocommerce mette due differenti indirizzi visualizzabili (fatturazione e spedizione). Qualora volessi che fosse visibile solo quello di spedizione e chiuso (ed attivabile col segno di spunta) quello di fatturazione? cosa devo fare?

In risposta a gianfranco

Ciao Gianfranco,
la cosa non è semplicissima, ma neanche molto complessa. Ci sono tre files su cui focalizzare l’attenzione: form-checkout.php, form-billing.php, form-shipping.php che trovi nella cartella wp-content/plugins/woocommerce/templates/checkout/.
Considera però che questi files hanno quasi sempre un override, presente nella cartella woocommerce all’interno del tema attivo.
Di default, l’indirizzo di fatturazione è attivo e sempre visibile, quello di spedizione invece è attivabile tramite checkbox, quindi esattamente il contrario di quello che interessa a te! Però, analizzando i tre files, puoi invertirne il funzionamento, l’unica cosa leggermente più complessa (dipende da quanto mastichi codice) è scrivere un piccolo javascript che alla spunta della checkbox apra l’indirizzo di fatturazione e non quello di spedizione.
Spero che questo consiglio possa esserti di aiuto ed indirizzarti sulla giusta via!

Ciao, io vorrei invece levare l'obbligo alla voce "partita iva" nel campo di fatturazione e spedizione, come devo fare?

In risposta a marco

Ciao marco,
il campo Partita IVA non fa parte di quelli di default di WooCommerce, quindi la gestione dipende dall’eventuale plugin/funzione che hai utilizzato per visualizzarlo. In linea di massima, prova a farti stampare il contenuto della variabile $fields all’interno dell’hook:
apply_filters( 'woocommerce_billing_fields', $fields );
per capire come viene chiamato il campo relativo alla Partita IVA e modifica il valore in corrispondenza di “required” così come nell’esempio utilizzato nell’articolo.

Complimenti, ottimo articolo, scritto in modo chiaro e molto interessante.
Avrei una domanda. Io utilizzo un child theme, per non perdere le mie modifiche con gli aggiornamenti. È sufficiente intervenire sul file functions.php del child theme, anziché su quello del tema genitore o devo fare qualcos'altro?
Grazie e ancora complimenti.
Daniele

In risposta a Daniele

Buongiorno Daniele,
grazie mille per i complimenti!
Puoi tranquillamente intervenire sul file functions.php del child theme, anzi, è fortemente consigliato così da evitare di perdere le modifiche in caso di aggiornamento del tema padre.
Saluti

Ciao, e se invece volessi avere la possibilità di modificare come admin il campo codice fiscale inserito dal cliente, nel caso fosse stato inserito in modo errato?

In risposta a barbara

Ciao Barbara,
ho appena aggiornato l’articolo, modificando gli snippets di codice in maniera da utilizzare altri hooks in grado di creare il campo editabile ed aggiungerlo direttamente all’indirizzo di fatturazione, spero possa esserti utile e risolvere il tuo problema!
Saluti

E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)