Comment personnaliser les champs de paiement WooCommerce

Publié: 2020-01-09

Le processus de paiement est l'une des étapes les plus importantes du parcours de l'acheteur. C'est la dernière chance dont vous disposez pour convaincre les acheteurs d'effectuer un achat. Mais 63,23 % des paniers d'achat en ligne sont abandonnés. C'est beaucoup d'acheteurs en ligne qui décident d'acheter un produit mais changent d'avis à la dernière seconde.

Il existe une variété de facteurs qui ont un impact sur les paniers abandonnés (comme les frais d'expédition et les options de paiement), mais la page de paiement elle-même joue également un rôle. S'il est trop compliqué, trop long ou nécessite des informations trop personnelles, les clients peuvent partir et acheter un produit similaire ailleurs.

Une façon d'optimiser votre page de paiement ? Champs de paiement personnalisés en fonction des besoins de votre entreprise et de votre public cible. Par exemple : si vous ne vendez généralement pas à des entreprises, supprimez le champ Nom de l'entreprise . Si vous envoyez des surprises d'anniversaire à vos clients, incluez un champ Date de naissance . Si vous vendez des produits pour animaux de compagnie, il peut être judicieux de demander Type d'animal de compagnie .

Dans cet article, nous vous expliquerons comment personnaliser votre page de paiement pour répondre aux besoins de votre public cible et de votre entreprise.

Modifications du champ de paiement

WooCommerce fournit tous les champs essentiels pour votre page de paiement. Par défaut, il demande aux clients :

  • Détails de la facturation
  • Prénom
  • Nom de famille
  • Nom de l'entreprise
  • De campagne
  • Adresse
  • Ville/Ville
  • Quartier
  • Code postal/ZIP
  • Téléphoner
  • Adresse e-mail
  • Notes d'ordre

Il existe de nombreuses façons de personnaliser la page, notamment :

  • Modification du dessin
  • Modification du texte du bouton "Passer la commande"
  • Suppression d'un champ
  • Rendre un champ obligatoire (ou non obligatoire)
  • Modification des étiquettes de champ de saisie et du texte d'espace réservé
  • Collecte des numéros de compte des clients
  • Vérifier une préférence de livraison
  • Permettre aux clients de demander une date ou un délai de livraison
  • Définir une méthode de contact préférée

Ce ne sont là que quelques-unes des personnalisations que vous pouvez effectuer. WooCommerce offre une flexibilité presque infinie pour chaque niveau d'expérience. Si vous êtes à l'aise avec l'édition de code, vous pouvez le personnaliser avec des extraits de code. Si vous préférez un peu plus de structure, il existe une variété d'extensions et de plugins pour modifier les champs de paiement.

Personnalisez les champs de paiement à l'aide d'extraits de code

Remarque : si vous n'êtes pas familier avec le code et la résolution des conflits potentiels, sélectionnez un WooExpert ou un développeur pour obtenir de l'aide. Nous ne sommes pas en mesure de fournir une assistance pour les personnalisations dans le cadre de notre politique d'assistance.

Les extraits de code sont des moyens flexibles pour les développeurs et les propriétaires de magasins de personnaliser les champs de paiement WooCommerce. Voici une liste des balises principales, y compris les classes et les identifiants, que vous pouvez utiliser pour personnaliser la conception visuelle de votre page de paiement. Ajoutez le CSS personnalisé à votre thème enfant ou au personnalisateur WordPress.

Pour voir toutes les classes et tous les sélecteurs, utilisez l'inspecteur de votre navigateur sur votre site Web pour trouver la zone exacte que vous souhaitez personnaliser.

 <body class="woocommerce-checkout"> <div class="woocommerce"> <form class="woocommerce-checkout"> <div class="col2-set"> <div class="woocommerce-billing-fields"> <p class="form-row"> <div class="woocommerce-shipping-fields"> <p class="form-row"> <div class="woocommerce-additional-fields"> <div class="woocommerce-checkout-review-order"> <table class="woocommerce-checkout-review-order-table"> <div> <ul class="wc_payment_methods payment_methods methods"> <div class="form-row place-order">

Par exemple, si vous souhaitez modifier la couleur d'arrière-plan des zones de saisie de texte et leur donner des coins arrondis, vous ajouterez :

 input[type="text"] { border-radius: 10px !important; background-color: #222 !important; }

Supprimer un champ de paiement :

C'est assez simple, mais soyez prudent , car ce changement pourrait provoquer des conflits avec d'autres extensions et plugins.

Ajoutez le code suivant au fichier functions.php de votre thème enfant. Notez que coller le code entier supprimera tous champs de la page de paiement, assurez-vous donc d'inclure uniquement les champs que vous souhaitez supprimer.

 /** Remove all possible fields **/ function wc_remove_checkout_fields( $fields ) { // Billing fields unset( $fields['billing']['billing_company'] ); unset( $fields['billing']['billing_email'] ); unset( $fields['billing']['billing_phone'] ); unset( $fields['billing']['billing_state'] ); unset( $fields['billing']['billing_first_name'] ); unset( $fields['billing']['billing_last_name'] ); unset( $fields['billing']['billing_address_1'] ); unset( $fields['billing']['billing_address_2'] ); unset( $fields['billing']['billing_city'] ); unset( $fields['billing']['billing_postcode'] ); // Shipping fields unset( $fields['shipping']['shipping_company'] ); unset( $fields['shipping']['shipping_phone'] ); unset( $fields['shipping']['shipping_state'] ); unset( $fields['shipping']['shipping_first_name'] ); unset( $fields['shipping']['shipping_last_name'] ); unset( $fields['shipping']['shipping_address_1'] ); unset( $fields['shipping']['shipping_address_2'] ); unset( $fields['shipping']['shipping_city'] ); unset( $fields['shipping']['shipping_postcode'] ); // Order fields unset( $fields['order']['order_comments'] ); return $fields; } add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

Remarque : Le champ Pays est obligatoire . Si vous le supprimez, les commandes ne peuvent pas être complétées et votre formulaire de paiement affichera l'erreur suivante : "Veuillez entrer une adresse pour continuer."

Rendre un champ obligatoire non obligatoire :

Dans l'exemple ci-dessous, nous allons modifier le champ Téléphone de facturation . Ajoutez ce code au fichier functions.php de votre thème enfant.

 add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field'); function wc_unrequire_wc_phone_field( $fields ) { $fields['billing_phone']['required'] = false; return $fields; }

Sinon, si vous souhaitez rendre un champ obligatoire, remplacez le texte « faux » par « vrai ».

Modifiez les libellés et les espaces réservés des champs de saisie :

Ajoutez le code suivant au fichier functions.php de votre thème enfant et personnalisez-le selon vos besoins.

 add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields'); function custom_override_checkout_fields($fields) { unset($fields['billing']['billing_address_2']); $fields['billing']['billing_company']['placeholder'] = 'Business Name'; $fields['billing']['billing_company']['label'] = 'Business Name'; $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name'; $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; $fields['billing']['billing_last_name']['placeholder'] = 'Last Name'; $fields['billing']['billing_email']['placeholder'] = 'Email Address '; $fields['billing']['billing_phone']['placeholder'] = 'Phone '; return $fields; }

Personnalisez les champs de paiement avec des plugins

WooCommerce fournit quelques excellentes extensions pour modifier les champs de paiement sans toucher à une ligne de code.

Éditeur de champ de paiement

L'extension Checkout Field Editor vous permet d'ajouter et de supprimer des champs de paiement, ou de mettre à jour le type, l'étiquette et la valeur de l'espace réservé en quelques clics. Vous pouvez également marquer chaque champ de paiement comme "requis" ou "non requis".

capture d'écran des options de l'éditeur de champ de paiement

Lors de l'ajout d'un nouveau champ, vous pouvez choisir parmi les types suivants :

  • Texte – saisie de texte standard
  • Mot de passe – saisie du texte du mot de passe
  • Textarea – Un champ de zone de texte
  • Sélectionner – Une liste déroulante/boîte de sélection
  • Multi-sélection – Une case à sélection multiple
  • Radio - Un ensemble d'entrées radio
  • Case à cocher – Un champ de case à cocher
  • Sélecteur de date - Un champ de texte avec un sélecteur de date attaché
  • En-tête – Un en-tête, pour organiser une page plus longue

Si vos produits sont généralement offerts en cadeau, vous pouvez proposer plusieurs options d'emballage. Vous pouvez utiliser des boutons radio pour permettre aux clients de choisir entre un emballage neutre, un emballage sur le thème de l'anniversaire ou un emballage sur le thème de l'anniversaire. Vous pouvez rendre ce champ obligatoire, définir l'étiquette sur "Choisissez votre type de package" et définir l'espace réservé sur "plain".

Pour faciliter les personnalisations avancées, Checkout Field Editor fournit une documentation utile.

Modules complémentaires de paiement WooCommerce

L'extension WooCommerce Checkout Add-Ons vous donne la possibilité d'offrir des add-ons gratuits ou payants à la caisse, comme l'exécution urgente, l'emballage cadeau ou les ventes incitatives comme les autocollants ou l'assurance. Vous pouvez ajouter plusieurs types de champs à votre page de paiement, notamment des champs de texte, des zones de texte, des listes déroulantes, des sélections multiples, des boutons radio, des cases à cocher, des cases à cocher multiples et des téléchargements de fichiers.

Modules complémentaires de paiement affichés sur une page de paiement

Dans votre tableau de bord, vous pourrez également trier et filtrer les commandes en fonction des options que vous avez créées. Cela peut être utile si vous souhaitez hiérarchiser les commandes par date de livraison ou afficher uniquement les commandes avec traitement accéléré. Ou vous voudrez peut-être emballer toutes les commandes dans un emballage cadeau en même temps.

Paiement sur une page WooCommerce

Vous souhaitez encore plus simplifier votre processus de paiement ? L'extension WooCommerce One Page Checkout transforme n'importe quelle page en page de paiement.

Selon une étude du Baymard Institute, un acheteur sur quatre a abandonné un panier au cours du dernier trimestre en raison d'un processus de paiement long ou compliqué. WooCommerce One Page Checkout combat cela en permettant aux clients d'ajouter des produits à leur panier et de soumettre le paiement sur la même page.

Vous pouvez même ajouter des champs de paiement aux pages de destination , ce qui est particulièrement utile si vous êtes une entreprise de services.

Connexion sociale WooCommerce

Forcer un client à créer un compte sur votre site Web est un obstacle potentiel à l'achat. Leur donner la possibilité d'utiliser leurs profils de médias sociaux existants pour créer un compte aide à briser cette barrière.

Invite de connexion sociale WooCommerce sur la page de connexion client

L'extension WooCommerce Social Login rend ce processus aussi simple et sécurisé que possible. Les clients peuvent se connecter à votre site en utilisant leurs comptes Facebook, Twitter, Google, Amazon, LinkedIn, PayPal, Instagram, Disqus, Yahoo ou VK au lieu de créer de nouvelles informations de connexion.

Commencez à personnaliser

Le processus de paiement peut avoir un impact significatif sur votre taux de conversion, vous devez donc apporter des modifications avec soin, avec un objectif spécifique en tête.

Heureusement, WooCommerce vous donne la possibilité de personnaliser votre processus de paiement pour mieux servir vos clients en ligne. Que vous ayez besoin d'apporter des modifications visuelles ou d'ajouter et de supprimer des champs de paiement, vous avez le choix entre de nombreuses solutions.