Comment personnaliser la section Adresse de livraison et de facturation dans WooCommerce ?

Publié: 2018-09-14

La section de l'adresse d'expédition et de facturation de WooCommerce est la section la plus importante de la caisse. Cela fonctionne bien par défaut. Parfois, vous avez besoin de quelque chose de plus. Vous ne pouvez pas changer son fonctionnement et son apparence ou... pouvez-vous ? Je vais vous apprendre dans cet article comment personnaliser ces sections comme vous le souhaitez !

Section d'adresse d'expédition et de facturation WooCommerce

Vos clients doivent fournir leurs informations de facturation lors de la commande. Il existe une option pour définir une adresse de livraison différente. Un client doit cocher une case sur la page de paiement.

Sections d'adresse de facturation et d'expédition WooCommerce

Cela fonctionne très bien par défaut. Dans la plupart des cas, il n'est pas nécessaire de modifier cette page. Je suppose que vous êtes ici parce que vous avez besoin de quelque chose de plus :)

Vous pouvez personnaliser la page de paiement comme vous le souhaitez :

  • définir certains champs comme non obligatoires
  • désactiver tous les champs (par exemple, pour les biens numériques)
  • changer l'ordre des champs
  • et ajoutez vos propres champs personnalisés.

Vous avez besoin d'un simple plugin : Flexible Checkout Fields pour le faire. Plus de 70 000 magasins WooCommerce l'utilisent quotidiennement.

Regardez cette vidéo et voyez par vous-même ce que ce plugin peut vous offrir dans la version gratuite :

Champs de paiement flexibles WooCommerce

Modifiez, ajoutez de nouveaux champs ou masquez les champs inutiles du formulaire de paiement. Il s'agit de conversions et d'une meilleure expérience utilisateur.

Télécharger gratuitement ou Allez sur WordPress.org
Plus de 70 000 installations actives
Dernière mise à jour : 2022-10-13
Fonctionne avec WooCommerce 6.7 - 7.0.x

Une fois que vous l'avez installé, vous pouvez configurer les sections d'adresse d'expédition et de facturation de WooCommerce. Allez dans WooCommerce → Champs de paiement. Vous pouvez passer de l'un à l'autre à l'aide des onglets en haut de l'écran ( Facturation et Expédition ) :

Ajouter un nouveau champ dans les champs de paiement flexibles
Champs de paiement flexibles - ajoutez un nouveau champ et modifiez votre adresse de livraison et de facturation

Comme vous le voyez, vous pouvez facilement ajouter un nouveau champ ou modifier une section . Vous avez des options telles que :

  • Activer le champ
  • Champs requis
  • Étiquette
  • Validation

Il existe de nombreuses autres fonctionnalités sous les onglets Apparence, Affichage activé et Avancé . Vous pouvez les vérifier par vous-même. Si vous voulez en savoir plus à leur sujet, continuez avec cet article.

Configuration des champs de paiement

Regardons les options de configuration.

Champs obligatoires

Certains champs des sections Adresse de livraison et Adresse de facturation sont obligatoires. Vous pouvez facilement changer cela. Voir:

adresse de facturation woocommerce

Comme vous le voyez, ces champs sont facultatifs . Vous pouvez également créer de nouveaux champs personnalisés et les définir selon vos besoins :

Champ personnalisé

Comment? Cochez ou décochez simplement l'option Champ obligatoire :

champs obligatoires champs de paiement flexibles

En savoir plus sur les champs obligatoires de paiement WooCommerce

Validation

Vous pouvez utiliser la validation WooCommerce par défaut ou votre validation personnalisée.

La validation est très utile :

Erreur : adresse e-mail invalide

Si vous souhaitez ajouter une validation à vos sections d'adresse de livraison et de facturation, utilisez notre Guide de validation de la caisse WooCommerce →

Affichage activé

Vous pouvez configurer où afficher un champ ici. Par défaut, le plugin affiche le champ à tous les emplacements :

  • Page de remerciement
  • Page Mon compte - section adresse
  • Page Mon compte - section commandes
  • dans les e-mails

Vous pouvez le changer. Consultez notre guide sur les champs personnalisés de mon compte WooCommerce →

Apparence

Modifiez l'apparence de vos champs dans les sections d'expédition et de facturation de WooCommerce.

Définissez votre propre classe personnalisée pour un champ :

classe CSS personnalisée

De cette façon, vous pouvez modifier n'importe quel champ à partir de ceci :

Champ radio : aspect par défaut

Dans ceci (ou tout ce que vous voulez):

Exemple de style de bouton radio

En savoir plus dans notre guide sur le style des champs personnalisés avec CSS →

Logique conditionnelle

Vous pouvez implémenter une logique conditionnelle dans les sections d'adresse de livraison et de facturation. Vous voulez un exemple ? Voir:

Je veux une case à cocher de facture

Un client doit cocher la case Je veux une facture . Après cette action, de nouveaux champs apparaissent.

Il existe de nombreux scénarios dans lesquels vous pouvez utiliser la logique conditionnelle. Vous pouvez configurer une logique conditionnelle pour les champs...

exemple de logique conditionnelle

...les produits/la catégorie...

logique conditionnelle pour le produit ou la catégorie

...ou la méthode d'expédition sélectionnée.

logique conditionnelle pour les méthodes d'expédition woocommerce

Comme vous le voyez, vous devez aller dans l'onglet Avancé . Vous y trouverez toutes les options.

En savoir plus sur les champs conditionnels de paiement WooCommerce →

Autres réglages

Le plug-in Flexible Checkout Fields vous permet d'ajouter des champs personnalisés à d'autres sections telles que :

  • Notes d'ordre
  • Détails du client
  • ou Formulaire d'inscription

Faites-en bon usage ! Lire notre article sur la personnalisation de la page de paiement →

Éditeur de champs de paiement WooCommerce

Comme vous le voyez, le plugin Flexible Checkout Fields est très puissant. Pour nous (les développeurs) ce plugin est le meilleur du marché :)

Mais ne vous contentez pas de nous croire sur parole, plus de 70 000 magasins WooCommerce dans le monde l'utilisent quotidiennement.

dépôt fcf
Plugin Flexible Checkout Fields dans le référentiel

Nous ajoutons souvent de nouvelles fonctionnalités ou corrigeons des bogues dans ce plugin. Les gens apprécient vraiment !

Ce plugin utilise également l'apparence et la convivialité de WordPress et est très facile à utiliser grâce à son interface épurée.

Les gens apprécient ce que nous avons créé :

Examen des champs de paiement flexibles

Vous pouvez trouver de nombreuses autres critiques positives comme celle ci-dessus! Cependant, vous n'avez pas à me croire sur parole. Vous pouvez télécharger ce plugin gratuitement et le vérifier vous-même !

Télécharger les champs de paiement flexibles →

Personnaliser la section Adresse d'expédition et de facturation dans les e-mails WooCommerce

Afin de personnaliser la section d'expédition et de facturation dans les modèles d'e-mail Woo, vous aurez besoin d'un plugin tiers appelé YayMail. Vous pouvez le télécharger gratuitement et concevoir les e-mails dans un générateur d'e-mails par glisser-déposer.

La version premium de ce personnalisateur de messagerie WooCommerce prend en charge les champs de paiement flexibles. Cela permet d'afficher vos champs personnalisés ajoutés dans les modèles d'e-mail de commande et de localiser la section comme vous l'aimez.

Options de conception intégrées pour vous aider à embellir l'e-mail, notamment :

  • Titre de facturation
  • Titre d'expédition
  • Famille de polices
  • Arrière-plan/bordure de la boîte/couleur du texte

Sommaire

Dans ce court article, je vous ai montré la simplicité de la personnalisation des sections d'adresse d'expédition et de facturation de WooCommerce. Ça vous plaît? Faites-le moi savoir dans la section des commentaires ci-dessous.

Une fois que vous êtes ici, vous aurez peut-être besoin d'un guide pour la configuration de la caisse WooCommerce. Nous avons déjà créé un guide génial sur les paramètres de paiement WooCommerce →

Vérifiez également: Liste de souhaits flexible - Analyses et e-mails