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 5 minuti, 40 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
  • 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
	);

	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_action( 'woocommerce_admin_order_data_after_billing_address', function( $order ) {
    echo '<p><strong>' . __( 'Vat number / Tax code', 'woocommerce' ) . ':</strong> ' . get_post_meta( $order->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->id, '_billing_vat', true )
     );
     return $fields;
}, 10, 3 );

e WooCommerce si occuperà di fare il resto!



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

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. (Privacy Policy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Privacy Policy)
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. (Privacy Policy)