Personalizza i campi del checkout di WooCommerce

Diciamoci la verità, WooCommerce semplifica molto la nostra vita da sviluppatori perché basta installarlo e tutti gli aspetti dedicati a un eCommerce sono già implementati.

Possiamo caricare nuovi prodotti, gestire la loro quantità nel magazzino, utilizzare qualsiasi sistema di pagamento ed estenderlo con uno qualsiasi delle sue estensioni.

Peccato però che spesso tutto questo non basta al nostro cliente.

Molte volte il cliente prende tutte queste funzionalità come già integrate e si spinge a chiedere delle personalizzazioni avanzate senza dubitare delle nostre capacità. In fin dei conti il sito lo hai creato tu.

Per esempio il cliente potrebbe chiedere di aggiungere i campi relativi alla Partita IVA e alla email certificata perché nel checkout di WooCommerce non sono presenti.

Tranquillo, so anche io che esistono diversi plugin per aggiungere questi campi, ma non ti piacerebbe imparare a inserire qualsiasi campo venga richiesto?

Non sarebbe bello poter padroneggiare a pieno la schermata di checkout che WooCommerce mette a disposizione?

Se stai continuando a leggere immagino che la tua risposta sia sì quindi la prima cosa da sapere quando si parla dei campi di checkout sono le opzioni di WooCommerce.

Mostra e nascondi campi checkout dalle opzioni WooCommerce

Ho deciso di fare una piccola introduzione su questo aspetto perché io stesso mi sono trovato a dover imparare come WooCommerce gestisce alcuni di questi campi e credo che la mia esperienza possa esserti di aiuto.

Per prima cosa dobbiamo dire che la pagina checkout è veramente complessa e mostra/nasconde dei campi in base al tipo di prodotto che è stato messo nel carrello.

L’esempio più semplice è quello in cui nel carrello è presente un prodotto virtuale e/o scaricabile.

Questi prodotti non necessitano di una spedizione e per questo motivo, anche se la nostra piattaforma è configurata per chiedere questo indirizzo, non li mostrerà al cliente.

A parte questo ci sono altre opzioni che vale la pena di conoscere.

Nascondere l’indirizzo di spedizione

Di base WooCommerce permette al visitatore di inserire l’indirizzo di fatturazione e di aggiungere (opzionalmente) anche un indirizzo di spedizione diverso.

Questa è un’opzione molto comoda se per qualche motivo il cliente vuol usare i dati aziendali per l’acquisto ma desidera ricevere il pacco a un indirizzo diverso da quello di fatturazione.

Come dobbiamo fare se il cliente per il quale stiamo realizzando il sito ci chiede di rimuovere questo campo?

Dobbiamo navigare tra gli Hook di WooCommerce per rimuovere la funzione che mostra questa checkbox?

Assolutamente no!

Non fare lo stesso errore del sottoscritto alla ricerca del corretto Hook, ti basterà andare a controllare le impostazioni di WooCommerce per rimuovere questo campo.

Tutto quello che devi fare una volta eseguito l’accesso alla tua installazione WordPress è andare su WooCommerce > Impostazioni > Spedizione > Opzioni di spedizione e selezionare la casella Forza la spedizione all’indirizzo di fatturazione del cliente, proprio come ti mostro in questa immagine:

Una volta salvate queste opzioni la possibilità di aggiungere un indirizzo di spedizione verrà rimossa e il cliente del sito web potrà inserire soltanto un indirizzo.

Ogni gateway di pagamento ha i suoi campi

Man mano che lavorerai con i gateway di pagamento scoprirai che questi permettono di personalizzare ulteriormente la pagina di checkout.

Non ti sto parlando di grandi modifiche ma, anche se può sembrare ovvio, ogni tipo di checkout ha delle informazioni specifiche che deve ottenere.

Il bonifico bancario deve mostrare l’IBAN e il messaggio personalizzato per l’utente che deve effettuare il pagamento.

PayPal mostra il suo pulsante di login e il testo introduttivo mentre Stripe mostra i campi relativi alla carta di credito per concludere l’acquisto.

Questo è soltanto un piccolo assaggio di quello che ti devi aspettare dai gateway di pagamento perché se attivi anche dei sistemi di pagamento come Apple Pay, Google Pay o se utilizzi i PayPal Smart Buttons ti troverai di fronte a nuovi elementi da gestire nella tua interfaccia.

Aggiungi i campi di registrazione

In quasi tutti i casi quando andiamo a creare un eCommerce dobbiamo permettere al cliente di creare un proprio account, sia per semplificare le sua esperienza di acquisto futura (un account permette di salvare gli indirizzi e le informazioni di pagamento) sia per poter tracciare lo stato del proprio ordine.

Controllando la tab Account e privacy presente sempre nelle impostazioni di WooCommerce si trovano diverse voci che ci aiutano a personalizzare i campi presenti nel checkout.

Mantenendo le impostazioni impostate nella figura il cliente non si accorgerà assolutamente di niente.

Concluderà l’ordine e verrà reindirizzato automaticamente alla propria pagina Mio Account dove potrà controllare lo stato del suo ordine e modificare le informazioni relative al proprio profilo.

WooCommerce lavorerà dietro le quinte per creare un utente WordPress utilizzando l’indirizzo email inserito in fase di checkout e invierà, allo stesso indirizzo, una mail contenente tutte le informazioni per eseguire in futuro il login all’interno della piattaforma.

Se inizi a personalizzare le opzioni noterai che in base alle tue scelte appariranno nuovi campi nella schermata di checkout. Campi che permetteranno al cliente di inserire il proprio nome utente o la propria password, a seconda delle opzioni che hai deciso di impostare.

Esiste un plugin per tutto!

Siamo all’interno di WordPress e prima di proseguire con il codice che ti permetterà di personalizzare la pagina di checkout come desideri voglio farti sapere che esiste una via più semplice.

Se non hai voglia di aprire il tuo functions.php oppure di creare un functional plugin per modificare i campi del checkout potresti sempre affidarti a uno dei plugin presenti nel mercato.

Diversi sono i plugin che ti permettono di applicare le tue modifiche nel checkout ma onestamente mi sento di consigliare soltanto quello creato dalla stessa WooCommerce, in fin dei conti chi se non loro conoscono la piattaforma da capo a piedi.

Il plugin in questione si chiama Checkout Field Editor e anche se è molto utile per avere un’esperienza punta-e-clicca per posizionare, aggiungere o rimuovere i campi del checkout personalmente ti consiglio questa soluzione solo se non puoi farne a meno.

In fin dei conti se sei sulle pagine di SkillsAndMore significa che ti piace la programmazione, ecco perché dovresti continuare a leggere la prossima sezione.

Come modificare i campi del checkout di WooCommerce

Adesso che le introduzioni sono terminate andiamo nel vivo di questo articolo e scopriamo come WooCommerce ci permette di personalizzare i campi mostrati in questa pagina.

Se hai letto l’articolo dedicato alla personalizzazione di un tema per WooCommerce probabilmente avrai pensato che tutto quello che ti serve si trova all’interno della cartella templates/checkout/.

Purtroppo non è esattamente così perché ti basterà aprire uno dei file contenuti al suo interno per scoprire che non è presente nessun <form> e neanche nessun campo <input> o altri che ti permettono di gestire il modulo mostrato nella pagina.

Ecco per esempio il contenuto di templates/checkout/form-billing.php, il file che gestisce la porzione relativa all’indirizzo di fatturazione:

<?php defined( 'ABSPATH' ) || exit; ?>
<div class="woocommerce-billing-fields">
	<?php if ( wc_ship_to_billing_address_only() && WC()->cart->needs_shipping() ) : ?>

		<h3><?php esc_html_e( 'Billing &amp; Shipping', 'woocommerce' ); ?></h3>

	<?php else : ?>

		<h3><?php esc_html_e( 'Billing details', 'woocommerce' ); ?></h3>

	<?php endif; ?>

	<?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?>

	<div class="woocommerce-billing-fields__field-wrapper">
		<?php
		$fields = $checkout->get_checkout_fields( 'billing' );

		foreach ( $fields as $key => $field ) {
			woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
		}
		?>
	</div>

	<?php do_action( 'woocommerce_after_checkout_billing_form', $checkout ); ?>
</div>

<?php if ( ! is_user_logged_in() && $checkout->is_registration_enabled() ) : ?>
	<div class="woocommerce-account-fields">
		<?php if ( ! $checkout->is_registration_required() ) : ?>

			<p class="form-row form-row-wide create-account">
				<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
					<input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="createaccount" <?php checked( ( true === $checkout->get_value( 'createaccount' ) || ( true === apply_filters( 'woocommerce_create_account_default_checked', false ) ) ), true ); ?> type="checkbox" name="createaccount" value="1" /> <span><?php esc_html_e( 'Create an account?', 'woocommerce' ); ?></span>
				</label>
			</p>

		<?php endif; ?>

		<?php do_action( 'woocommerce_before_checkout_registration_form', $checkout ); ?>

		<?php if ( $checkout->get_checkout_fields( 'account' ) ) : ?>

			<div class="create-account">
				<?php foreach ( $checkout->get_checkout_fields( 'account' ) as $key => $field ) : ?>
					<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
				<?php endforeach; ?>
				<div class="clear"></div>
			</div>

		<?php endif; ?>

		<?php do_action( 'woocommerce_after_checkout_registration_form', $checkout ); ?>
	</div>
<?php endif; ?>

Beh ad essere onesto se leggi con attenzione il codice noterai che un campo <input> è presente ma serve soltanto per creare un campo checkout che facilita la creazione di un account nel caso questo sia reso opzionale dalle impostazioni di WooCommerce.

Tutti gli altri campi del modulo dedicati all’indirizzo di fatturazione sono completamente assenti!

Però se studi attentamente il codice che ti ho appena mostrato noterai un foreach molto interessante al rigo 19, te lo presento nuovamente qua sotto:

foreach ( $fields as $key => $field ) {
	woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
}

La variabile $fields viene popolata poco sopra grazie al metodo get_checkout_fields( 'billing' ) e una volta che vengono presi tutti i campi necessari alla sezione di fatturazione (in inglese billing) è possibile mostrarli con la funzione woocommerce_form_field().

Questa funzione ci permette di capire che WooCommerce genera i campi relativi alla fatturazione durante il caricamento della pagina e dato che get_checkout_fields() accetta come parametro billing questo ti dovrebbe far pensare che esistono diverse sezioni nella pagina di checkout che vengono generate automaticamente.

Le sezioni del modulo di checkout sono 4:

• billing fields – campi relativi all’indirizzo di fatturazione, gli ID di questi campi iniziano con billing_
• shipping fields – campi relativi all’indirizzo di spedizione, gli ID di questi campi iniziano con shipping_
• order fields – campi relativi all’ordine specifico. L’unico campo presente in un’installazione di base WooCommerce sono le Note dell’ordine e l’ID di questi campi iniziano con order_
• account fields – campi relativi alle informazioni sull’account (come nome utente e password), gli ID di questi campi iniziano con account_

Nella lista precedente ho condiviso con te anche la radice degli ID che vengono generati perché ci saranno molto utili in una prossima sezione dove ti mostrerò come poter rimuovere i campi standard di WooCommerce.

Prima però di poter aggiungere o rimuovere dei campi nella pagina di checkout è necessario scoprire quali sono gli Hook che WooCommerce ci mette a disposizione.

Gli Hook della pagina checkout di WooCommerce

Ogni pagina WooCommerce è ricca di Hook con i quali possiamo aggiungere, rimuovere o modificare l’output generato da questo plugin.

In questo articolo stiamo parlando nello specifico della modifica del modulo di checkout quindi elencherò soltanto quelli che riguardano questa attività.

I Filter Hook che WooCommerce mette a disposizione per personalizzare il modulo sono:

• woocommerce_default_address_fields – permette di gestire in un colpo solo i campi di default dedicati all’indirizzo di fatturazione e di spedizione (più avanti troverai un esempio dettagliato),
• woocommerce_billing_fields – permette di aggiungere/rimuovere campi specifici per la sezione dell’indirizzo di fatturazione,
• woocommerce_shipping_fields – permette di aggiungere/rimuovere campi specifici per la sezione dell’indirizzo di spedizione,
• woocommerce_checkout_fields – questo è l’ultimo filtro che WooCommerce mette a disposizione e contiene tutti i campi che sono stati aggiunti e utilizzati nella pagina, molto utile per rimuovere diversi campi in un colpo solo.

Leggendo l’ultimo punto della lista precedente forse hai iniziato a pensare che per aggiungere un qualsiasi campo tu desideri puoi utilizzare tranquillamente la funzione woocommerce_checout_fields ma ti sconsiglio di farlo.

Ti sconsiglio di farlo soltanto per semplificare il tuo codice perché utilizzando gli Hook specifici potrai eliminare la necessità di dichiarare la loro sezione di appartenenza.

Facciamo subito un esempio per chiarire la situazione.

Diciamo che hai bisogno di creare un nuovo campo nella sezione dedicata all’indirizzo di fatturazione.

All’interno del functions.php del tuo tema o (meglio ancora) nel functional plugin che hai creato per il sito potresti aggiungere il campo con woocommerce_checkout_fields in questo modo:

add_filter( 'woocommerce_checkout_fields', 'sam_random_field' );
function sam_random_field( $fields ){
	$fields['billing']['billing_rand'] = [
		'label' => 'Random field',
		'type' => 'text',
		'class' => [ 'form-row-wide' ],
		'priority' => 5,
		'required' => true
	];
	return $fields;
}

Però come ti ho appena detto la stessa cosa si potrebbe ottenere utilizzando il filter Hook woocommerce_billing_fields:

add_filter( 'woocommerce_billing_fields', 'sam_random_field' );
function sam_random_field( $fields ){
	$fields['billing_rand'] = [
		'label' => 'Random field',
		'type' => 'text',
		'class' => [ 'form-row-wide' ],
		'priority' => 5,
		'required' => true
	];
	return $fields;
}

Ora come puoi vedere la differenza è minima perché l’unica differenza che possiamo vedere è che nel primo esempio l’array $fields richiede la dichiarazione dell’indice billing prima di poter dichiarare il nostro billing_rand.

Per mantenere la pace dei sensi in questo articolo utilizzerò i filter hook specifici per aggiungere nuovi campi mentre woocommerce_checkout_fields verrà utilizzato esclusivamente per rimuovere i campi che non vogliamo utilizzare.

Come sempre tu sarai libero di seguire la strada che preferisci ma ho ritenuto importante fare questa distinsione prima di proseguire.

Aggiungere un campo nel checkout WooCommerce

E arriviamo finalmente alla sezione più interessante di tutto l’articolo, la parte in cui scopri come poter aggiungere il tuo campo personalizzato durante la fase di checkout.

Seguendo l’esempio che abbiamo impostato a inizio articolo il mio interesse è quello di aggiungere un campo Partita IVA e un campo per la PEC.

Precedentemente ti ho mostrato il codice necessario per inserire un nuovo campo ma dato che non l’ho neanche commentato mi sembra doveroso approfondire leggermente questo aspetto.

Ripresentiamo il codice che ci ha permesso di aggiungere un campo all’interno della sezione dedicata all’indirizzo di fatturazione:

add_filter( 'woocommerce_billing_fields', 'sam_random_field' );
function sam_random_field( $fields ){
	$fields['billing_rand'] = [
		'label' => 'Random field',
		'type' => 'text',
		'class' => [ 'form-row-wide' ],
		'priority' => 5,
		'required' => true
	];
	return $fields;
}

Come puoi vedere tu stesso il filtro woocommerce_billing_fields passa un parametro alla funzione che verrà agganciata. Per comodità ho dato il nome $fields alla variabile che conterrà i valori passati ma puoi utilizzare qualsiasi nome desideri.

La cosa importante da capire in questo caso è che $fields è un array associativo che contiene tutti i campi che vengono mostrati nella sezione e dato che stiamo usando il filtro woocommerce_billing_fields non abbiamo bisogno di dichiararla all’interno dell’indice.

Inoltre ricordati di restituire la variabile quando avrai finito di modificarla altrimenti WooCommerce non sarà in grado di costruire il modulo di checkout.

Ora che abbiamo annunciato le cose importanti scopriamo come creare un nuovo campo.

Se hai letto il codice il compito è molto semplice, l’unica cosa che dobbiamo fare è dichiarare un nuovo indice dell’array $fields che verrà anche usato durante la generazione del campo.

All’interno dell’array appena dichiarato possiamo impostare i valori che il campo dovrà assumere.

Nell’esempio abbiamo utilizzato label per popolare l’elemento <label>, type per far creare un campo di testo tra quelli messi a disposizione da WooCommerce, class per impostare una classe, priority per posizionare il nuovo campo e required per renderlo obbligatorio.

Grazie a questo filtro potrai creare tutti i campi che desideri senza dover neanche toccare una singola riga di codice HTML.

I tipi di campo che mette a disposizione WooCommerce

Come hai potuto scoprire dall’esempio precedente se abbiamo bisogno di un tipo di input specifico all’interno del modulo non è necessario dichiarare l’intero elemento HTML, basta passare un valore a type e WooCommerce genererà al posto nostro tutto il codice necessario.

Ma quali altri valori possiamo passare oltre a text? Ecco la lista dei 18 valori accettati da WooCommerce:

1. country
2. state
3. textarea
4. checkbox
5. text
6. password
7. datetime
8. datetime-local
9. date
10. month
11. time
12. week
13. number
14. email
15. url
16. tel
17. select
18. radio

Puoi utilizzare tranquillamente uno qualsiasi di questi tipi di campi per farli apparire nelle tue pagine di checkout.

Unico dettaglio che vorrei mettere in luce prima di passare ad analizzare tutti i parametri che puoi impostare è che per i campi di tipo select e radio è necessario utilizzare anche il parametro options per impostare i valori che questi campi possono assumere.

I parametri da usare per creare un campo nel checkout

Adesso hai quasi tutte le conoscenze a disposizione per poter creare un tuo campo personalizzato all’interno del checkout WooCommerce ma farei veramente un pessimo lavoro se non ti presentassi anche tutti i parametri che puoi utilizzare.

Poco fa ti ho parlato dei parametri label, class, priority, required e ovviamente type ma WooCommerce ne mette a disposizione molti altri per fare praticamente qualsiasi cosa.

Ecco un blocco di codice che racchiude tutti quelli che sono a tua disposizione:

$defaults = [
    'type'              => 'text',
    'label'             => '',
    'description'       => '',
    'placeholder'       => '',
    'maxlength'         => false,
    'required'          => false,
    'autocomplete'      => false,
    'id'                => $key,
    'class'             => array(),
    'label_class'       => array(),
    'input_class'       => array(),
    'return'            => false,
    'options'           => array(),
    'custom_attributes' => array(),
    'validate'          => array(),
    'default'           => '',
    'autofocus'         => '',
    'priority'          => '',
);

Tutti questi campi ti saranno utili quando avrai la necessità di personalizzare in modo avanzato i campi del checkout.

Dato che l’articolo si sta facendo già abbastanza lungo e voglio parlarti anche di altre cose non voglio rubarti altro tempo ma ti propongo un accordo.

Se c’è qualcosa che non comprendi o con la quale hai difficoltà chiedi maggiori informazioni nei commenti, oltre a risponderti tornerò qua e estenderò questa sezione.

Aggiungi i campi Partita IVA e PEC

Ora è giunto il momento di completare l’esempio che ti ho presentato all’inizio dell’articolo spiegandoti come aggiungere i campi dedicati all’inserimento della Partita IVA e della PEC dei clienti che dispongono di queste informazioni.

Senza perderci in troppe spiegazioni ecco il codice che dovrai inserire all’interno del functions.php nella cartella del tema che stai sviluppando o nel functional plugin:

add_filter( 'woocommerce_billing_fields', 'sam_piva_pec_fields' );
function sam_piva_pec_fields( $fields ) {
	$fields['billing_partita_iva'] = [
		'label' => __( 'Partita IVA', 'sam-text' ),
		'class' => [ 'form-row-first' ],
		'placeholder' => __( 'IT-XXXXXXXXXXX', 'sam-text' ),
		'type' => 'text',
		'priority' => 35,
	];

	$fields['billing_pec'] = [
		'label' => __( 'PEC', 'sam-text' ),
		'class' => [ 'form-row-last' ],
		'type' => 'email',
		'validate' => [ 'email' ],
		'priority' => 35,
	];

	return $fields;
}

Praticamente non c’è molto codice nuovo in questo esempio, abbiamo aggiunto un placeholder per indicare come strutturare la Partita IVA e un validate per utilizzare la validazione interna di WooCommerce per i campi email.

Rimuovi i campi che non ti servono

Aggiungere i campi è utile ma in alcuni casi è necessario rimuovere la richiesta di informazioni che non ci interessano e rendono il processo di checkout più lungo.

Chiarito il punto dedicato al country passiamo al codice con il quale possiamo rimuovere i campi.

Precedentemente abbiamo detto che esistono diversi filtri che ci permettono di modificare i campi del checkout, come detto abbiamo utilizzato woocommerce_billing_fields per aggiungere i campi Partita IVA e PEC e sostituendo ma per rimuovere gli elementi preferisco usare il filtro woocommerce_checkout_fields perché raccoglie in un unico posto tutti i campi che vengono mostrati nel checkout.

Qua sotto ti lascio una lista che ti permette di rimuovere tutti i campi e anche se WooCommerce sarà in grado di concludere l’ordine, il mio consiglio è selezionare soltanto i campi che desideri rimuovere:

add_action( 'woocommerce_checkout_fields', 'sam_remove_fields' );
function sam_remove_fields( $fields ) {

	// Campi fatturazione.
	unset( $fields['billing']['billing_first_name'] );
	unset( $fields['billing']['billing_last_name'] );
	unset( $fields['billing']['billing_company'] );
	unset( $fields['billing']['billing_address_1'] );
	unset( $fields['billing']['billing_address_2'] );
	unset( $fields['billing']['billing_postcode'] );
	unset( $fields['billing']['billing_city'] );
	unset( $fields['billing']['billing_state'] );
	unset( $fields['billing']['billing_phone'] );
	unset( $fields['billing']['billing_email'] );

	// Campi spedizione.
	unset( $fields['shipping']['shipping_company'] );
	unset( $fields['shipping']['shipping_phone'] );
	unset( $fields['shipping']['shipping_state'] );
	unset( $fields['shipping']['shipping_first_name'] );
	unset( $fields['shipping']['shipping_last_name'] );
	unset( $fields['shipping']['shipping_address_1'] );
	unset( $fields['shipping']['shipping_address_2'] );
	unset( $fields['shipping']['shipping_city'] );
	unset( $fields['shipping']['shipping_postcode'] );

	// Campi ordine.
	unset( $fields['order']['order_comments'] );

	return $fields;

}

Con questo elenco puoi creare la tua funzione personalizzata per rimuovere qualsiasi campo presente nel checkout. Vuoi rimuovere i campi del telefono e del CAP nell’indirizzo di fatturazione?

Niente di più semplice:

add_action( 'woocommerce_checkout_fields', 'sam_remove_fields' );
function sam_remove_fields( $fields ) {

	// Campi fatturazione.
	unset( $fields['billing']['billing_postcode'] );
	unset( $fields['billing']['billing_phone'] );

	return $fields;

}

Modifica i campi già presenti nel checkout

Aggiungere e rimuovere i campi nel checkout sono sicuramente attività fondamentali ma come dobbiamo comportarci se vogliamo modificare alcuni dei campi già presenti?

Magari il nostro unico interesse è rendere non obbligatorio l’inserimento del numero di telefono, anche in questo caso il filtro woocommerce_checkout_fields arriva in nostro soccorso:

add_action( 'woocommerce_checkout_fields', 'sam_not_required_fields' );
function sam_not_required_fields( $fields ){
	$fields['billing']['billing_phone']['required'] = false;

	return $fields;
}

In alcuni casi però questo codice può non funzionare.

Nello specifico alcuni campi rimangono obbligatori anche se le nostre impostazioni non lo richiedono e questo può essere dovuto ad alcune impostazioni del gateway di pagamento. Per esempio se forziamo la richiesta dell’indirizzo di fatturazione con PayPal Checkout questi campi rimarranno obbligatori anche se il nostro codice dichiara diversamente.

In altri casi invece sembra impossibile poter modificare altri aspetti dei campi presenti.

Diciamo che vuoi cambiare la label per billing_address_1, con il codice che ti ho presentato scriveresti qualcosa del genere:

add_action( 'woocommerce_checkout_fields', 'sam_change_address_label_fields' );
function sam_change_address_label_fields( $fields ){
	$fields['billing']['billing_address_1']['label'] = __( 'Inserisci il tuo indirizzo', 'sam-text' );

	return $fields;
}

Purtroppo per noi questo codice non funziona e la label del campo resterà Via e numero.

In questo caso non possiamo fare affidamento all’hook woocommerce_checkout_fields ma dovremmo utilizzare woocommerce_default_address_fields.

add_action( 'woocommerce_default_address_fields', 'sam_change_fields' );
function sam_change_fields( $fields ) {

	$fields['address_1']['label'] = __( 'Inserisci il tuo indirizzo', 'sam-text' );

	return $fields;
}

Come puoi notare dall’indice utilizzato in questo caso non abbiamo aggiunto il prefisso billing_ perché con address_1 andiamo a modificare la label presente per il campo billing_address_1 e shipping_address_1 in un colpo solo.

Conclusioni

Siamo giunti alla fine di questo articolo ma ci sarebbero ancora tante cose da dire per quanto riguarda la personalizzazione dei campi del checkout e dello sviluppo in WooCommerce in generale.

Però come ti ho anticipato poco fa questo articolo è diventato veramente lungo e voglio rispettare il tuo tempo.

Potresti aiutarmi a capire meglio quali sono gli aspetti che desideri approfondire all’interno dei commenti, in questo modo tu otterrai risposta ai tuoi dubbi e curiosità e io saprò con precisione quali sono gli argomenti che ti appassionano e quali domande richiedono risposta.