Filtra la ricerca ...
Frase esatta
Categorie

Come aggiungere campi personalizzati e customizzare il checkout di WooCommerce

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

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

Oppure rimuovere dei campi in questo modo

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 :

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

Qui invece mostro il campo nell’ordine a back end

Ed infine lo inserisco nella mail dell’ordine

Per far apparire un errore nel caso in cui il campo Codice Fiscale non venga compilato, scriverò questo codice

come aggiungere il codice fiscale a woocommerceParte dell’articolo è stato liberamente tradotto da https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

32 commenti su “Come aggiungere campi personalizzati e customizzare il checkout di WooCommerce”

    • 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.

      Rispondi
    • 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"
      });
      });

      Rispondi
  1. 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

    Rispondi
    • 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.

      Rispondi
  2. 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?

    Rispondi
  3. 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

    Rispondi
  4. 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!

    Rispondi
  5. 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.

    Rispondi
  6. 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

    Rispondi
    • 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.

      Rispondi
  7. 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?

    Rispondi
    • 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;
      }

      Rispondi
  8. 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,

    Rispondi
Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Rispondi a Michele Annulla risposta


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.