Come vengono caricati i campi del checkout in WooCommerce ?
I campi della sezione billing (fatturazione) e shipping (spedizione) sono dichiarati all’interno della classe (class-wc-countries.php) e nella funzione get_address_fields . Ciò permette a WooCommerce di abilitare o disabilitare i campi basandosi sulla geolocalizzazione dell’utente.
Prima di renderizzare i campi, WooCommerce passa i vari campi all’interno di un filtro in modo tale che siano modificabili da plugin di terze parti, dal tema in uso e dal codice PHP personalizzato.
Come fare un override dei campi di checkout di WooCommerce
Per esempio potremmo modificare la label e il placeholder del box “Note sull’ordine” in questo modo
|
1 2 3 4 5 6 7 8 9 |
// Hook in add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); // Our hooked in function - $fields is passed via the filter! function custom_override_checkout_fields( $fields ) { $fields['order']['order_comments']['placeholder'] = 'My new placeholder'; $fields['order']['order_comments']['label'] = 'My new label'; return $fields; } |
Oppure rimuovere dei campi in questo modo
|
1 2 3 4 5 6 7 8 9 |
// Hook in add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); // Our hooked in function - $fields is passed via the filter! function custom_override_checkout_fields( $fields ) { unset($fields['order']['order_comments']); return $fields; } |
Nella tabella lascio una lista dei campi passati attraverso l’array woocommerce_checkout_fields
| Billing (Fatturazione) | Shipping (Spedizione) | Account | Ordini |
| billing_first_name | shipping_first_name | account_username | order_comments |
| billing_last_name | shipping_last_name | account_password | |
| billing_company | shipping_company | account_password-2 | |
| billing_address_1 | shipping_address_1 | ||
| billing_address_2 | shipping_address_2 | ||
| billing_city | shipping_city | ||
| billing_postcode | shipping_postcode | ||
| billing_country | shipping_country | ||
| billing_state | shipping_state | ||
| billing_email | |||
| billing_phone |
Ogni campo contiene le seguenti opzioni presenti in un array
- type – tipo di campo (text, textarea, password, select)
- label – la label per i campi input
- placeholder – placeholder per i campi input
- class – classe CSS per i campi input
- required – true o false, definisce se il campo è obbligatorio oppure no
- clear – true o false, applica il clear ai campi o alle label
- label_class – classe CSS per le label
- options – per i campi select, inserire le opzioni in un array (key => valore)
Come rendere facoltativo un campo di WooCommerce al checkout
Se volessimo invece sovrascrivere i valori di default di un campo, per esempio per renderlo facoltativo, dovremmo utilizzare la lista dei campi contenuti in woocommerce_default_address_fields , ossia :
- country
- first_name
- last_name
- company
- address_1
- address_2
- city
- state
- postcode
Quindi per rendere il campo address_1 facoltativo, scriveremo :
|
1 2 3 4 5 6 7 8 9 |
// Hook in add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' ); // Our hooked in function - $address_fields is passed via the filter! function custom_override_default_address_fields( $address_fields ) { $address_fields['address_1']['required'] = false; return $address_fields; } |
Come aggiungere un nuovo campo nel checkout di WooCommerce
La cosa che mi chiedono più spesso è quella di inserire il campo Codice Fiscale e renderlo obbligatorio, non chè stamparlo anche nella mail dell’ordine e nella gestione ordine a back end.
Per fare ciò utilizzo un filtro
Qui aggiungo il campo Codice Fiscale e lo aggiungo all’ordine
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
add_filter( 'woocommerce_checkout_fields' , 'codice_fiscale' ); function codice_fiscale( $fields ) { $fields['billing']['codice_fiscale'] = array( 'label' => __('Codice Fiscale', 'woocommerce'), 'placeholder' => _x('Codice Fiscale', 'placeholder', 'woocommerce'), 'required' => true, 'class' => array('form-row-last'), 'clear' => true ); return $fields; } add_action( 'woocommerce_checkout_update_order_meta', 'codice_fiscale_order_meta' ); function codice_fiscale_order_meta( $order_id ) { if ( ! empty( $_POST['codice_fiscale'] ) ) { update_post_meta( $order_id, 'Codice Fiscale', sanitize_text_field( $_POST['codice_fiscale'] ) ); } } |
Qui invece mostro il campo nell’ordine a back end
|
1 2 3 4 5 |
add_action( 'woocommerce_admin_order_data_after_billing_address', 'codice_fiscale_order_meta_admin', 10, 1 ); function codice_fiscale_order_meta_admin($order){ echo '<p><strong>'.__('Codice Fiscale').':</strong> ' . get_post_meta( $order->id, 'Codice Fiscale', true ) . '</p>'; } |
Ed infine lo inserisco nella mail dell’ordine
|
1 2 3 4 5 6 |
add_filter('woocommerce_email_order_meta_keys', 'my_custom_fiscale_order_meta_keys'); function my_custom_fiscale_order_meta_keys( $keys ) { $keys[] = 'Codice Fiscale'; return $keys; } |
Per far apparire un errore nel caso in cui il campo Codice Fiscale non venga compilato, scriverò questo codice
|
1 2 3 4 5 6 7 |
add_action('woocommerce_checkout_process', 'required_cf_checkout_field_process'); function required_cf_checkout_field_process() { // Check if set, if its not set add an error. if ( ! $_POST['codice_fiscale'] ) wc_add_notice( __( 'Compila il campo Codice Fiscale .' ), 'error' ); } |
Parte dell’articolo è stato liberamente tradotto da https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
Programmatore WordPress Esperto WooCommerce
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
Ciao, ho installato il plugin però non riesco a disattivare i campi obbligatori, come posso fare? Utilizzo Woocommerce. Grazie
Ciao Chiara,
nel codice dove trovi “required => true” metti “required => false”
Ciao, volevo chiederti come si procede per cambiare la sequenza dei campi? esempio mettere prima il last_name e poi il first_name.
Grazie in anticipo
Ciao Michele,
bisogna fare una funzione PHP che utilizza un filtro di WooCommerce, passa in un array PHP i campi della registrazione e li ri-ordina a tuo piacimento.
A breve scriverò un articolo in merito.
Ciao Alessio, io vorrei aggiungere il campo obbligatorio con la data di nascita del cliente, come posso fare? Grazie
Ciao Chiara, WooCommerce, almeno al momento, non supporta il campo input datepicker, quindi bisogna fare un magheggio.
Crei un campo input text, come id gli metti datepicker, poi con jQuery gli passi la funzione “datepicker”, così ti aggiunge il calendario.
Lo script è questo :
$(function(){
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy"
});
});
Salve,
un bellissimo, interessante e utile articolo complimenti.
Ho apportato alcune modifiche alla pagina checkout grazie ai tuoi suggerimenti.
Mi resta solamente un aspetto da definire e sarebbe quello di limitare l’area di vendita al un solo CAP ed impossibilitare altre zone alla possibilità di acquisto.
E’ possibile fare qualcosa del genere?
Ti ringrazio anticipatamente per la tua disponibilità
Cordiali saluti
Denise
Ciao Denise,
devi scrivere una funzione PHP, che non posso scriverti qui, ma te la spiego.
Inibisci / rimuovi il pulsante di pagamento e ordine se il campo capo è diverso da quello che vuoi accettare.
ciao! Grazie per condividere questi trucchi con tutti 😉 potresti dirmi invece come fare per mettere il codice fiscale obbligatorio solo per chi compra dall’italia?
Ciao Chiara, grazie.
Va fatto un plugin per fare quello che chiedi; se ti serve puoi chiedermi una consulenza.
Ciao Alessio ho inserito : // Hook in
add_filter( ‘woocommerce_checkout_fields’ , ‘custom_override_checkout_fields’ );
// Our hooked in function – $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
unset($fields[‘order’][‘order_comments’]);
return $fields;
}
per rimuovere il campo box informazioni aggiuntive però è rimasta la scritta informazioni aggiuntive come la tolgo? grazie mille
Ciao Dante, la puoi togliere con il CSS usando display:none sull’elemento
Scusa Alessio mi puoi mettere il comando giusto in css perchè ho provato ma non funziona
Manda il link del sito
https://host.webintasca.com/
è in fase di costruzione non ti spaventare e grazie per il tuo aiuto
.page-id-1152 .woocommerce-additional-fields h3{display: none;}
Grazie Alessio davvero ottimo professionista
Di nulla
Ciao Alessio,
grazie per i trucchi suggeriti, li trovo molto interessati.
Volevo chiederti, ho impostato la richiesta di “ricevuta” e “fattura” ma vorrei far visualizzare dei campi solo a seconda della scelta dell’utente, secondo te è possibile?
Grazie!
Ciao Adriano,
si, dovresti fare una script jQuery che usa delle condizioni sui campi che vuoi “colpire”.
Buona sera. Vorrei inserire un campo numero “(A)” sul pagina del prodotto che compilerà il cliente. Una volta effettuato l’acquisto vorrei che il cliente ricevesse una email con un numero generato da un calcolo tipo numero (A) + 10 X 3 . Grazie in anticipo.
Buonasera Massimo, occorre fare un plugin custom, se vuoi puoi contattarmi per una consulenza.
Ciao,
è possibile creare un campo per fare caricare all’utente un documento ?
Grazie per la risposta
Ciao Dora,
si certo, va sviluppato un plugins.
Ciao Alessio, articolo interessante. Quindi se voglio inserire il campo codice fiscale/P.Iva basta inserire
add_filter ecc… nel file .php che trovo nella directory plugin/woocommerce/includes/class-wc-countries.php.
Il campo viene automaticamente aggiunto, oppure devo modificare anche in functions.php o altre parti?
Grazie
Ciao Lorenzo,
no non devi mettere nulla nei file di WooCommerce… lo script lo metti nel file functions.php del tuo template, meglio se child.
Ciao Alessio,
è possibile inserire un campo già prevalorizzato?
O meglio, per un determinato prodotto, sto cercando di modificare il campo note
$fields[‘order’][‘order_comments’]
Come posso dargli un valore già predefinito che non sia il placeholder?
Ciao Andrea,
non cosa devi valorizzare però puoi partire da questa funzione che ho scritto:
add_filter( ‘woocommerce_checkout_fields’, ‘custom_default_value’ );
function custom_default_value( $fields ) {
$post_id = get_the_ID();
$fields[‘order’][‘order_comments’][‘default’] = $post_id;
return $fields;
}
Ciao Alessio,
è pobbile mostrare i campi solo se, mi spiego:
sarebbe ideale avere un menù a tendina con:
Privato – Ricevuta
I campi che ci sono sono sufficienti (senza codice fiscale)
Privato – Fattura
Inserire e rendere obbligatorio il campo Codice fiscale e inserire PEC non obbligatorio
Azienda – Fattura
Inserire e rendere obbligatori:
P.IVA
PEC
SDI
inserire, personalizzare o togliere, sono riuscto a farlo tramite i tuoi codici qui sopra, ma metterli con un IF… non so farlo,
grazie anticipatamente,
Ciao, va fatto un plugin per fare quello che chiedi e bisogna usare jQuery.
Se vuoi puoi chidermi una consulenza.
La migliore guida in assoluto. Grazie Alessio
Grazie mille, gentilissimo Paolo.
Ciao Alessio
ecco il mio problema sto cercando di modificare i campi del check out di woocommerce usando il plugin “Checkout Field Editor and Manager for WooCommerce” che è molto semplice il problema è che quando faccio le modifiche esse non hanno effetto non cambia nulla…
Leggendo quà è la mi sembra di capire che il problema risieda nel mio tema istallato che non permette le modifiche
Che ne pensi?
Grazie Valerio
Ciao Valerio,
probabilmente stai utilizzando il checkout a blocchi Gutenberg, al momento non c’è un plugin in commercio che permetta di modificare i campi del checkout di WooCommerce; ci sono solo due modi al momento; o lo sviluppo di un plugin personalizzato oppure vai nella pagina del checkout ed al posto dei blocchi, utilizzi lo shortcode [woocommerce_checkout], a quel punto vedrai che le modifiche ai campi del checkout si vedranno, considera che la grafica sarà diversa.
Grazie Alessio per i tuoi pronti e preziosi consigli
Valerio