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!
Sommario
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_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_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
Hai trovato interessante l’articolo? Allora ti consiglio di leggere:
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
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
Ottimo lavoro 🙂 e se io volessi modificare l’ordine della visualizzazione dei campi del Billing?
Grazie