Personnaliser le formulaire de validation de commande Woocommerce

Le tunnel de vente d’un site E-commerce est extrêmement important pour que les ventes se convertissent.
Une page de validation de commande trop succincte, peu réfléchie, ou au contraire une page surchargée aura un impact négatif sur vos ventes.
Découvrons ensemble comment personnaliser la page de checkout pour offrir une expérience utilisateur optimale à vos clients.

Le filtre woocommerce checkout fields sera votre ami

Si on se penche un petit peu sur le code source de Woocommerce et les diverses possibilité au niveau de la page de validation de commande, on se rend compte qu’un filtre est appliqué avant de retourner les champs du formulaire.

Ce filtre, c’est le woocommerce_checkout_fields, qui va nous permettre de faire toutes les modifications souhaitées sur le formulaire :

la variable $fields retournée par ce filtre est un Array multidimensionnel qui comprend à la fois les informations du formulaire de facturation et du formulaire de livraison.
Les informations du formulaire de facturation seront contenues dans $fields[‘billing’] et celles du formulaire de livraison seront contenues dans $fields[‘shipping’]

Ajouter des champs personnalisés

Pour ajouter un champ personnalisé à notre formulaire, il va falloir le déclarer et l’insérer dans l’Array multidimensionnel $fields.
Pour cela, nous allons utiliser le filtre woocommerce_checkout_fields, ajouter des valeurs dans l’array $fields, et le retourner.

Imaginons que nous voulons ajouter un champ textarea à notre formulaire de facturation pour que le client puisse laisser une note sur sa commande qui concerne la facturation. Cela donne : 

				
					function MSW_add_field_form_checkout( $fields ) 
{
   $fields['billing']['custom_order_notes'] = array(
      'type' => 'textarea',
      'label' => 'Notes de commande',
      'class' => array('form-row-wide'),
      'priority' => 100,
   );
   
   return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'MSW_add_field_form_checkout', 10 , 1 );
				
			

Nous avons donc ajouté un champ custom_order_notes à notre formulaire de facturation, et nous avons déclaré quelques informations pour définir le comportement de ce champ :

Notre nouveau champ s’affiche désormais dans le formulaire de facturation, c’est une première étape réussie :).

Attention :
Affiche le champ ne suffit pas. Il faut ensuite le traiter à la soumission du formulaire.
Ce n'est pas l'objet de cet article, mais pour le traitement il faudra utiliser un Hook qui se déclenche à la soumission du formulaire. Pour cet exemple, nous pouvons utiliser le Hook woocommerce_checkout_update_order_meta qui permettra d'ajouter une note à la commande.

Retirer des champs inutiles à notre formulaire

Pour retirer un ou plusieurs champ(s) du formulaire, il va falloir ce coup-ci supprimer de l’Array multidimensionnel $fields certains champs que l’on ne veut pas voir afficher. Nous allons utiliser le filtre woocommerce_checkout_fields, supprimer une ou plusieurs valeurs de cet array $fields grâce à la fonction unset(), et le retourner.

Imaginons que nous voulons supprimer les champs nom de l’entreprise des formulaires de facturation et de livraison, cela donne : 

				
					function MSW_remove_input_entreprise_adresses_form( $fields ) 
{
	unset( $fields['billing']['billing_company'] );
	unset( $fields['shipping']['shipping_company'] );

	return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'MSW_remove_input_entreprise_adresses_form', 10, 1 );
				
			

Nos deux champs sont supprimés. Et la bonne nouvelle, c’est qu’il n’y a aucun traitement à faire à la soumission du formulaire.
En effet, les champs étant supprimés du formulaire, Woocommerce se comportera comme s’ils n’avaient pas été remplis !

Réorganiser l'ordre des champs du formulaire

Nous en parlions plus haut, $fields est un Array multidimensionnel qui va nous permettre, pour chaque champ, de définir son comportement.
Ainsi nous pouvons définir pour chaque champ une priorité d’affichage.

Afin de réorganiser totalement notre formulaire de facturation et de livraison, nous allons reprendre l’ensemble des champs que nous souhaitons afficher dans un Array temporaire, et nous allons utiliser un foreach sur notre Array temporaire pour réorganiser notre Array final $fields. Cela donne :

				
					function MSW_reorder_fields_form_checkout($fields)
{
	$array_billing = array(
		'billing_first_name',
		'billing_last_name',
		'billing_email',
		'billing_phone',
		'billing_company',
		'billing_address_1',
		'billing_address_2',
		'billing_postcode',
		'billing_city',
		'billing_country',
		'billing_state'
	);
		
	$priority = 0;
	
	foreach($array_billing as $field_name)
	{
		$priority += 10;
		$fields['billing'][$field_name]['priority'] = $priority;
	}

	$array_shipping = array(
		'shipping_first_name',
		'shipping_last_name',
		'shipping_company',
		'shipping_address_1',
		'shipping_address_2',
		'shipping_postcode',
		'shipping_city',
		'shipping_country',
		'shipping_state'
	);
	
	$priority = 0;

	foreach($array_shipping as $field_name)
	{
		$priority += 10;
		$fields['shipping'][$field_name]['priority'] = $priority;
	}

	return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'MSW_reorder_fields_form_checkout', 10, 1 );
				
			

Ainsi, nous avons redéfini grâce à nos deux array $array_billing et $array_shipping l’ordre personnalisé d’affichage de nos champs !
Si vous souhaitez modifier l’ordre d’affichage de vos champs, il vous suffit d’utiliser cette fonction et de modifier l’ordre des éléments dans les deux array $array_billing et $array_shipping.

Modifier les classes d'un champ du formulaire

Nous vous en parlions également plus haut. L’affichage et le comportement des champs peut être défini par des classes qui vont permettre d’organiser au mieux notre formulaire. Plusieurs classes sont disponibles, les voici :

update_totals_on_change peut s’avérer utile si vous ajoutez des champs supplémentaires qui ont un impact sur le prix de votre commande. Si vous ajoutez une case à cocher « ajouter un emballage cadeau » à ma commande, cette classe vous permettra de mettre à jour le formulaire de validation de commande et donc éventuellement d’ajouter un supplément à la commande.

Imaginons que nous voulons passer sur deux colonnes l’adresse E-mail et le numéro de téléphone du formulaire de facturation, mais aussi la ville et le pays des deux formulaires de facturation et de livraison, cela donne :

				
					function MSW_modify_class_form_checkout($fields)
{
	$fields['billing']['billing_email']['class'] = array('form-row-first');
	$fields['billing']['billing_phone']['class'] = array('form-row-last');

	$fields['billing']['billing_city']['class'] = array('form-row-last');
	$fields['shipping']['shipping_city']['class'] = array('form-row-last');
	
	$fields['billing']['billing_country']['class'] = array('form-row-first');
	$fields['shipping']['shipping_country']['class'] = array('form-row-first' , 'update_totals_on_change' );

	return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'MSW_modify_class_form_checkout', 10, 1 );
				
			

Vous pourrez voir que nous avons ajouté plusieurs classes au champ pays du formulaire de livraison shipping_country. Cela se fait encore une fois avec un Array. Vu que nous avons redéfini la classe et nous souhaitons un affichage dans la colonne de gauche avec form-row-first, nous devons également rajouter la classe update_totals_on_change pour que le checkout se mette à jour si l’utilisateur change de pays de livraison (si cela à un impact sur le coût de la livraison, mais à moins que vous vendiez des produits virtuels, cela aura quasiment toujours un impact :)).

Modifier le placeholder d'un champ du formulaire

Un placeholder est un texte de substitution qui se trouve dans un champ de formulaire et qui permet de donner une indication au visiteur pour l’aider à remplir son champ.

Imaginons que nous voulons ajouter un placeholder au champ numéro de téléphone pour indiquer à l’utilisateur le format du numéro à saisir. Cela donne :

				
					function MSW_add_placeholder_form_checkout($fields)
{
	$fields['billing']['billing_phone']['placeholder'] = 'Ex : 06 12 34 56 78';

	return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'MSW_add_placeholder_form_checkout', 10, 1 );
				
			

Ainsi, le formulaire pourra être plus facilement rempli et votre site pourra générer plus de conversion !

Astuce :
Vous pouvez alléger tout votre formulaire en remplacement les label par des placeholder. Pour cela, il vous suffit de définir le placeholder de chaque champ et de supprimer le label. Supprimons par exemple le label du champ téléphone :
unset ( $fields['billing']['billing_phone']['label'] );

La conclusion !

Il existe de multiples possibilités pour mettre en place un tunnel de vente optimisé permettant de générer des conversions.
Nettoyer le formulaire de validation de commande pour qu’il soit minimaliste et suffisant pour votre site est une priorité.
Selon votre activité et les produits que vous vendez, il pourra être parfois utile de fusionner les pages panier et validation de commande pour réduire le nombre d’étapes avant d’arriver au fameux bouton « Acheter ».
Vous pouvez aussi faire le choix d’un formulaire de validation de commande en plusieurs étapes pour ne pas trop surcharger l’affichage et décourager votre potentiel client. Pour cela, nous vous recommandons le plugin Woocommerce Multi Step Checkout.

Et vous, quelles sont vos astuces pour un tunnel de vente qui convertit ? 🙂

Les tags

A bientôt pour de nouvelles astuces ! 🙂

Vous avez aimé cet article ? Vous pouvez

Le partager avec votre communauté

ou
ou

Nous laisser votre commentaire pour nous en dire plus

Articles similaires

Pourquoi nous avons créé notre plugin Monsieur Site Web

WordPress est magique, certes !
Mais pour réaliser un site internet professionnel, WordPress à quelques inconvénients et certaines fonctionnalités nécessaires doivent être ajoutées sur chaque site internet.
C’est pourquoi chez Monsieur Site Web, nous avons créé notre propre plugin qui nous permet d’effectuer des actions de manière automatique sur votre futur site.
Découvrons en détails le fonctionnement de notre plugin.

Lire l'article

Les commentaires

Excellent tuto

12 mai 2023

Excellent article, le seul qui stipule clairement qu’il faut utiliser un hook pour enregistrer les données des champs personnalisés lors de la récupération de la valeur des champs en $_POST.

Sans cette info on est content, on a créé des beaux champs mais il n’y a rien est enregistré en DB et les infos ne remontent pas dans l’onglet commande.

Secri

Réponse de Monsieur Site Web

Merci beaucoup pour votre avis ! 🙂

Remerciement

13 mai 2022

Mille Merci !

Cela mérite 5 étoiles de plus (=10) !

Raoul

Réponse de Monsieur Site Web

Merci beaucoup 🙂

Laisser un commentaire