Come aggiungere campi personalizzati al processo di pagamento di WooCommerce Senza Plugin

Stai cercando un modo per aggiungere campi personalizzati al processo di pagamento di WooCommerce? Senza utilizzare un plug-in, ti mostrerò come fare in questo articolo.

Iniziamo discutendo prima di cosa sono i campi personalizzati e perché potrebbero essere importanti.

I campi personalizzati consentono ai proprietari dei negozi di raccogliere informazioni sui propri clienti che in genere non vengono raccolte durante il processo di acquisto.

Questi dati possono quindi essere utilizzati per scopi di marketing o altre cose come lo sviluppo del prodotto.

La buona notizia è che è facile e veloce configurare il tuo sito WooCommerce con ‘aggiunta di campi personalizzati aggiuntivi senza dover utilizzare plug-in!

Usa questo snippet di codice per aggiungere campi personalizzati alla tua pagina di pagamento:

add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) {
	
	echo '<div id="my_custom_checkout_field"><h3>'.__('My Field').'</h3>';
				
	woocommerce_form_field( 'my_field_name', array( 
		'type' 			=> 'text', 
		'class' 		=> array('my-field-class orm-row-wide'), 
		'label' 		=> __('Fill in this field'),
		'required'		=> true,
		'placeholder' 	=> __('Enter a number'),
		), $checkout->get_value( 'my_field_name' ));

	echo '</div>';
}

/**
 * Elabora il check-out
 **/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
	global $woocommerce;
	
	if ( ! $_POST['my_field_name'] )
        wc_add_notice( __( 'Please fill My Field.' ), 'error' );
}

/**
 * Aggiorna l' user meta con il valore del campo
 **/
add_action('woocommerce_checkout_update_user_meta', 'my_custom_checkout_field_update_user_meta');

function my_custom_checkout_field_update_user_meta( $user_id ) {
	if ($user_id && $_POST['my_field_name']) update_user_meta( $user_id, 'my_field_name', esc_attr($_POST['my_field_name']) );
}

/**
 * Aggiorna l'order meta con il valore del campo
 **/
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');

function my_custom_checkout_field_update_order_meta( $order_id ) {
	if ($_POST['my_field_name']) update_post_meta( $order_id, 'My Field', esc_attr($_POST['my_field_name']));
}

/**
 * Aggiungi il campo per ordinare le email
**/
add_filter('woocommerce_email_order_meta_keys', 'my_custom_checkout_field_order_meta_keys');

function my_custom_checkout_field_order_meta_keys( $keys ) {
	$keys[] = 'My Field';
	return $keys;
} 

Aggiungere campi personalizzati al processo di pagamento di WooCommerce – Analiziamo funzione per funzione questo snippet di codice.

1. Creiamo un campo personalizzato

Per prima cosa creiamo un campo personalizzato.

add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) {
	
	echo '<div id="my_custom_checkout_field"><h3>'.__('My Field').'</h3>';
				
	woocommerce_form_field( 'my_field_name', array( 
		'type' 			=> 'text', 
		'class' 		=> array('my-field-class orm-row-wide'), 
		'label' 		=> __('Fill in this field'),
		'required'		=> true,
		'placeholder' 	=> __('Inserisci un testo'),
		), $checkout->get_value( 'my_field_name' ));

	echo '</div>';
}

Con il primo echo definisco l’etichetta dell’input, con la funzione woocommerce_form_field invece definisco il campo (input) vero e proprio.

A questo link potrete trovare gli argomenti accettati dalla funzione così da personalizzare il campo a vostro piacimento.

Successivamente tramite $checkout->get_value stampiamo il campo e richiudiamo il div.

2. Rendiamo il campo required

Tramite la funzione my_custom_checkout_field_process possiamo rendere il campo required e stampare un errore nel caso non sia compilato.

add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
	global $woocommerce;
	
	if ( ! $_POST['my_field_name'] )
        wc_add_notice( __( 'Please fill My Field.' ), 'error' );
}

3. Salviamo il campo sui meta dell’utente e/o sui meta dell’ordine

In base alle necessità il campo può essere salvato sui meta dell’utente e/o dell’ordine.

Funzione per salvarlo nei meta dell’utente:

add_action('woocommerce_checkout_update_user_meta', 'my_custom_checkout_field_update_user_meta');

function my_custom_checkout_field_update_user_meta( $user_id ) {
	if ($user_id && $_POST['my_field_name']) update_user_meta( $user_id, 'my_field_name', esc_attr($_POST['my_field_name']) );
}

Funzione per salvarlo nei meta dell’ordine:

add_filter('woocommerce_email_order_meta_keys', 'my_custom_checkout_field_order_meta_keys');

function my_custom_checkout_field_order_meta_keys( $keys ) {
	$keys[] = 'My Field';
	return $keys;
} 

Se questo articolo ti è piaciuto o hai qualche domanda, non esitare a lasciare un commento.