Aggiungere un checkbox nella pagina di pagamento di WooCommerce

Tempo richiesto: 10 minuti.

Ecco come aggiungere un checkbox nella pagina di pagamento di WooCommerce in pochi e semplici passi modificando il file functions.php del proprio tema child.

1. Inserisci il campo checkbox WooCommerce

   Aggiungi il seguente codice nel file functions.php, l’esempio utilizza un nuovo campo checkbox chiamato ‘checkout_checkbox’
   
   add_action( 'woocommerce_review_order_before_submit', 'bt_add_checkout_checkbox', 10 );
/**
*Campo casella di controllo obbligatorio nella pagina di pagamento di WooCommerce
*/
function bt_add_checkout_checkbox() {
woocommerce_form_field( 'checkout_checkbox', array( // CSS ID
'type' => 'checkbox',
'class' => array('form-row mycheckbox'), // CSS Class
'label_class' => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
'input_class' => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
'required' => true, // Obbligatorio o opzionale
'label' => 'Dichiaro di essere maggiorenne', // Etichetta
));
}
add_action( 'woocommerce_checkout_process', 'bt_add_checkout_checkbox_warning' );
/**
*Alert se la casella non é selezionata
*/
function bt_add_checkout_checkbox_warning() {
if ( ! (int) isset( $_POST['checkout_checkbox'] ) ) {
wc_add_notice( __( 'Dichiara di essere maggiorenne' ), 'error' );
}
}
   
   Se si desidera lasciare la casella di controllo come facoltativa e disabilitare il messaggio di errore, disabilitare il secondo blocco del codice e sostituire il valore required nel primo blocco di codice in false .
   Quindi personalizza il label ed il testo della notifica secondo le tue necessità

2. Stile dell’etichetta e del checkbox

   Modifica il CSS aggiungendo lo stile nel file style.css del tema child o nelle impostazione del css nel backend inserendo il seguente codice.
   
   .woocommerce-invalid #checkout-checkbox {
outline: 2px solid red!important;
outline-offset: 2px!important;
}
   
   Con il codice sopra impostiamo un bordo rosso intorno al checkbox se questo non viene selezionato.
   Potrebbe essere necessario apportare qualche modifica per adattarlo al tuo tema.
   
   Fin qui la casella di controllo viene visualizzato solo sulla pagina di pagamento, seguire i passaggi successivi per salvare il valore nel database e visualizzarlo negli ordini nel backend e nelle email.

3. Aggiungi il nuovo campo personalizzato al database come Meta ordine

   Per aggiungere questo campo e valore al database di WordPress inserisci il seguente codice
   
   add_action( 'woocommerce_checkout_update_order_meta', 'bt_checkout_field_order_meta_db' );
/**
*Aggiungere il campo personalizzato al database come Meta ordine
*/
function bt_checkout_field_order_meta_db( $order_id ) {
if ( ! empty( $_POST['checkout_checkbox'] ) ) {
update_post_meta( $order_id, 'checkout_checkbox', sanitize_text_field( $_POST['checkout_checkbox'] ) );
}
}
   

4. Recupera e visualizza il campo personalizzato nell’ordine del backend di WooCommerce

   Inserisci il seguente codice per visualizzare il campo personalizzato e l’etichetta nell’ordine WooCommerce nel backend.
   
   add_action( 'woocommerce_admin_order_data_after_billing_address', 'bt_checkout_field_display_admin_order_meta', 10, 1 );
/**
*Visualizza il valore 1 se il checkbox è stato selezionato
*/
function bt_checkout_field_display_admin_order_meta($order){
echo '<p><strong>'.__('Checkbox selezionato').': </strong>' . get_post_meta( $order->get_id(), 'checkout_checkbox', true ) . '</p>';
}


5. Aggiungi il campo personalizzato nelle email di conferma ordine di WooCommerce

   Con il seguente codice si visualizza il campo nelle email di conferma ordine:
   
   add_filter('woocommerce_email_order_meta_keys', 'bt_custom_order_meta_email');
function bt_custom_order_meta_email( $keys ) {
$keys[] = 'checkout_checkbox'; // Questo cercherà il campo personalizzato chiamato 'checkout_checkbox' e lo aggiungerà alle email di WooCommerce
return $keys;
}
   
   Con il codice sopra possiamo visualizzare nell’email se il checkbox è stato selezionato o meno (1 o 0), se invece si vuole personalizzare con del testo specifico aggiungere invece il seguente codice:
   
   add_filter( 'woocommerce_email_order_meta_fields', 'bt_woocommerce_email_order_meta_fields', 10, 3 );
/**
*Aggiunge nell'ordine il campo personalizzato con testo ed etichetta
*/
function bt_woocommerce_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
$checkbox = get_post_meta( $order->get_id(), 'checkout_checkbox', true );
if( $checkbox == 1 ) {
$fields['checkout_checkbox'] = array(
'label' => __( 'Clausola maggiore età' ),
'value' => __( 'Una volta verificati i dati dichiarati procederemo con la spedizione' ),
);
return $fields;
};
else {
$fields['checkout_checkbox'] = array(
'label' => __( 'Clausola maggiore età' ),
'value' => __( 'Checkbox non selezionato' ), ); return $fields;
/**
*Se il checkbox non è obbligatorio e non è stato selezionato, nell'ordine appare il valore qui sopra
*/
};
}