Come personalizzare i campi del checkout con Woocommerce

In questo articolo vedremo come personalizzare i campi del checkout con Woocommerce utilizzando Actions e Filters messi a disposizione per noi sviluppatori curiosi. (riprendiamo un argomento affrontato nel nostro precedente articolo)

Aggiornare campi predefiniti dal Sistema

Utilizzando il filter woocommerce_checkout_fields  sarà possibile interagire con qualsiasi campo previsto dal core di Woocommerce. I campi  sui quali possiamo mettere le mani sono relativi alla fatturazione, alla spedizione, all’account e all’ordine. Elenchiamo di seguito tutti i campi suddivisi per macro categorie e poi vedremo degli esempi pratici di utilizzo:

• 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
• account
  • account_username
  • account_password
  • account_password-2
• order
  • order_comments

Ognuno di questi campi contiene un array di proprietà che elenchiamo:

• type – tipologia del campo (text, textarea, password, select)
• label – etichetta del campo
• placeholder – placeholder del campo
• class – classe del campo
• required – valore true o false a seconda del fatto che il campo sia richiesto o meno
• clear – valore true o false associato al campo o all’etichetta; permette di definire se vogliamo applicare l’attributo “clear” all’elemento
• label_class – classe associata alla label
• options – per gli elementi Select, array di opzioni (coppie chiave => valore)

In alcuni casi è necessario utilizzare il filter  woocommerce_default_address_fields. Questo filtro ci permette di interagire con tutti i campi relativi ai campi di fatturazione e spedizione:

• country
• first_name
• last_name
• company
• address_1
• address_2
• city
• state
• postcode

Esempi Pratici

Vedremo ora un paio di esempi di utilizzo dei filter descritti in precedenza. Come prima cosa vedremo come è possibile rimuovere il campo relativo all’order, chiamato order_comments:

// 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;
}

Nel prossimo esempio vedremo invece come utilizzare il filter woocommerce_default_address_fields per rendere il campo address_1 non obbligatorio

// 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;
}

Conclusioni

Come potete vedere grazie a questi filter è possibile personalizzare al meglio i campi del checkout di Woocommerce.

Avete mai utilizzato questi filter? Che ne pensate?

Diteci la vostra, potrebbe essere un’informazione importante per altri lettori 🙂

Buon Woocommerce a tutti!