Come inserire dei campi personalizzati in Woocommerce nella fase di checkout.

Sfruttando l’hook che woocommerce ci mette a disposizione, in questo caso woocommerce_after_order_notes, possiamo scrivere una funzione come la seguente da inserire nel file functions.php del tema attivo:

Aggiungere un checkbox al checkout:

add_action('woocommerce_after_order_notes', 'add_checkbox');
function add_checkbox( $checkout ) {
    echo '<div id="box_checkbox_personalizzato"><h3>'.__('Campo Personalizzato').'</h3>';
    woocommerce_form_field( 'checkbox_personalizzato', array(
        'type'          => 'checkbox',
        'class'         => array('checkbox_personalizzato-class'),
        'label'         => __('Etichetta Campo personalizzato')
        ));
    echo '</div>';
}

La funzione sopra descritta, aggiungerà un checkbox personalizzato in fase di checkout. Possiamo personalizzare l’etichetta da visualizzare, il nome della classe e il nome del campo a nostro piacere e in base alle nostre necessità.

Ad esempio, se avessimo bisogno di inserire un campo di testo modificheremo la funzione sopra descritta in questo modo,

Aggiungere un campo di testo al checkout:

add_action('woocommerce_after_order_notes', 'add_text');
function add_text( $checkout ) {
    echo '<div id="box_text_personalizzato"><h3>'.__('Campo Personalizzato').'</h3>';
    woocommerce_form_field( 'text_personalizzato', array(
        'type'          => 'text',
        'class'         => array('text_personalizzato-class'),
	'placeholder'	=> "Placeholder",
        'label'         => __('Etichetta Campo personalizzato')
        ), "Valore campo");
    echo '</div>';
}

La funzione sopra descritta invece, aggiunge un campo di testo al checkout. Anche qui possiamo personalizzare il nome del campo, l’etichetta, la classe e, a differenza del checkbox, possiamo dare un valore al placeholder (il nuovo attributo html5 per visualizzare un valore di default fino a che non andiamo a scrivere all’interno del campo) e il valore vero e proprio del campo.

Rendere i campi obbligatori:

per rendere obbligatori i campi personalizzati, woocommerce ci viene in aiuto con l’hook woocommerce_checkout_process. Tramite questa funzione possiamo controllare il campo e passare a woocommerce l’errore in caso venga lasciato vuoto,

add_action('woocommerce_checkout_process', 'add_validation');
 function add_validation() {
    global $woocommerce;
    // Se non è compilato, aggiungiamo l'errore.
    if (!$_POST['checkbox_personalizzato'])
         $woocommerce->add_error( __('<strong>Campo checkbox Personalizzato</strong> è obbligatorio.') );
    if (!$_POST['text_personalizzato'])
         $woocommerce->add_error( __('<strong>Campo text Personalizzato</strong> è obbligatorio.') );
}

Ora non resta che salvare il nuovo campo nel db una volta che l’utente clicca su “Effettua l’ordine”.

Utilizzando l’hook di woocommerce woocommerce_checkout_update_order_meta possiamo intercettare l’invio dei dati e salvare i campi personalizzati nella tabella postmeta di wordpress.

Salvare i campi personalizzati:

/**
 * Aggiorno i valori dei campi personalizzati una volta salvato l'ordine
 **/
add_action('woocommerce_checkout_update_order_meta', 'update_campi_personalizzati');

function update_campi_personalizzati( $order_id ) {
    if ($_POST['text_personalizzato']) update_post_meta( $order_id, 'Chiave campo', esc_attr($_POST['text_personalizzato']));
}

Ed ecco qui che abbiamo inserito e salvato i nostri campi personalizzati.

N.B.: la guida sopra descritta, non serve per aggiungere campi personalizzati alla spedizione e alla fatturazione. Per qullo potete leggere la guida al seguente link: Aggiungere la partita IVA a woocommerce.