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 :
- Ajouter des champs personnalisés.
- Retirer des champs inutiles à notre formulaire
- Réorganiser l'ordre des champs du formulaire.
- Modifier les classes d'un champ du formulaire
- Modifier le placeholder d'un champ du 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 :
- Type : Permet de définir le type de champ souhaité (text, textarea, select, radio etc).
- Label : Le label du champ qui sera affiché au dessus
- Class : Les classes à appliquer à ce champ du formulaire. Nous le détaillerons dans la partie modifier les classes d'un champ du formulaire
- Priority : Permet de définir une priorité d'affichage. Nous le détaillerons dans la partie réorganiser l'ordre des champs du formulaire)
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 :
- form-row-wide permet d'afficher un champ sur toute la largeur du formulaire
- form-row-first permet d'afficher un champ dans la colonne de gauche du formulaire
- form-row-last permet d'afficher un champ dans la colonne de drotie du formulaire
- update_totals_on_change permet d'actualiser les informations de validation de commande.
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é
Articles similaires
Ajouter les prix de revient des produits Woocommerce, calculer les marges nettes sans plugin
Woocommerce est l’extension de référence pour créer une boutique E-commerce sur un site WordPress. Cependant, Woocommerce ne permet pas tout. Par défaut, il n’est pas prévu de pouvoir saisir les prix d’achat (ou prix de revient ) des produits pour connaître les marges nettes réalisées.
Découvrons ensemble comment ajouter cette fonctionnalité à Woocommerce.
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.
La bonne marche à suivre pour modifier un plugin
Vous avez une modification à effectuer sur un plugin WordPress et vous ne savez pas comment vous y prendre ?
Nous allons détailler pour vous les différentes possibilités qui s’offrent à vous et comment les mettre en place.
Les commentaires
Excellent tuto
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.
Réponse de Monsieur Site Web
Merci beaucoup pour votre avis ! 🙂
Remerciement
Mille Merci !
Cela mérite 5 étoiles de plus (=10) !
Réponse de Monsieur Site Web
Merci beaucoup 🙂
