3 façons efficaces de personnaliser et de modifier la page de paiement WooCommerce

Vous recherchez le meilleur moyen de modifier la page de paiement WooCommerce ?

Apprendre à personnaliser la page de paiement WooCommerce vous permet de mieux contrôler sa conception et augmente le potentiel de ventes supplémentaires.

‍ Dans ce didacticiel détaillé, nous vous montrerons trois façons sans code de personnaliser la page de paiement, notamment en ajustant entièrement la conception et/ou en modifiant les champs qui apparaissent sur la page de paiement.

Nous passerons également en revue toutes les fonctionnalités intégrées proposées par WooCommerce pour personnaliser l'expérience de paiement.

Commençons…

Raisons de modifier la page de paiement WooCommerce

Existe-t-il une raison évidente de modifier la page de paiement WooCommerce pour commencer ? Ça dépend. Le module de paiement intégré est propre, fonctionnel et suffisamment rapide pour traiter les paiements sans ennuyer vos clients.

Mais vous remarquerez peut-être aussi ses inconvénients. Voici les principales raisons pour lesquelles vous pourriez vouloir modifier la page de paiement WooCommerce :

• Pour remplacer les éléments de marque WooCommerce par défaut, tels que leurs polices, styles et le violet WooCommerce prédéfinis.
• Pour ajouter des éléments Web liés à votre entreprise, comme un logo, les couleurs de la marque et des liens vers la documentation de support.
• Si l'optimisation de la caisse pour les conversions est nécessaire après le test.
• Pour accélérer le processus de paiement en le convertissant en une seule étape.
• Pour intégrer les ventes incitatives, les ventes croisées et les produits connexes.
• Pour ajouter des champs personnalisés ou supprimer certains champs fournis par WooCommerce.
• Pour modifier les options d'expédition.
• Pour modifier des éléments de conception tels que le texte du bouton, le texte du champ prédéfini et les options de paiement des invités.

Comment modifier la page de paiement WooCommerce

Vous avez plusieurs options disponibles pour modifier la page de paiement WooCommerce. La méthode qui vous convient le mieux dépendra des modifications spécifiques que vous essayez d'effectuer et si vous êtes ouvert ou non à l'utilisation d'un plugin.

Ci-dessous, nous allons passer en revue trois des meilleures méthodes :

1. Paramètres natifs de WooCommerce – WooCommerce inclut de nombreuses options intégrées pour personnaliser le paiement, que nous détaillerons dans la première méthode. Votre thème peut également offrir ses propres options pour personnaliser la conception de la page de paiement.
2. Elementor Pro - Elementor Pro propose désormais son propre widget de paiement qui vous permet de personnaliser entièrement la conception de la page de paiement. C'est une excellente option si vous souhaitez spécifiquement modifier la conception de la page.
3. Éditeur de champ de paiement - c'est une excellente option si vous souhaitez modifier les champs de formulaire qui apparaissent sur la page de paiement. Vous pouvez l'utiliser pour ajouter de nouveaux champs, supprimer des champs par défaut et tout réorganiser selon vos besoins.

Passons par eux..

Méthode 1 : Utiliser les paramètres de paiement par défaut de WooCommerce

WooCommerce propose des paramètres intégrés pour modifier votre module de paiement, et votre thème WordPress peut déjà fournir des outils pour ajuster certains champs et paramètres de paiement dans WordPress Customizer.

Il est toujours sage de vérifier ces paramètres avant de rechercher un plug-in, un thème ou un personnalisateur de champ supplémentaire, car vous disposez peut-être déjà des fonctionnalités dont vous avez besoin.

Par exemple, WooCommerce dispose d'outils pour supprimer certains champs, activer les taux de taxe lors du paiement et afficher les champs de coupon.

Étape 1 : Ajoutez des calculs de taxes et un champ de coupon lors du paiement

WooCommerce a des paramètres intégrés pour automatiser les calculs des taxes et accepter les coupons à la caisse.

Pour activer/désactiver l'un ou l'autre, accédez à WooCommerce > Paramètres sur WordPress.

Choisissez l'onglet Général et faites défiler jusqu'à la section Activer les taxes . Cochez la case pour activer les taux de taxe et les calculs lors du paiement. Cela génère et affiche les frais de taxe en fonction des taux que vous configurez dans WooCommerce ( WooCommerce > Paramètres > Taxe > Tarifs standard ).

Cochez la case pour activer l'utilisation des codes de réduction pour afficher un champ dans lequel les clients peuvent saisir des codes de réduction.

Si vous préférez ne pas afficher certains éléments, décochez simplement les cases. Assurez-vous de cliquer sur le bouton Enregistrer pour voir vos modifications sur le frontend.

Étape 2 : Afficher les prix des produits avec ou sans taxe

C'est une chose de calculer les taxes à la fin du paiement, mais vous devez également décider si vous souhaitez inclure les taxes dans le coût global des produits, en particulier lorsque les clients passent à la caisse.

En général, cela montre plus de transparence, au lieu d'augmenter le prix avec la taxe juste avant que le client ne paie.

Pour inclure la taxe avec le prix dans le processus de paiement, accédez à WooCommerce > Paramètres > Taxe .

Faites défiler la page vers le bas pour trouver le champ "Afficher les prix pendant le panier et le paiement".

Choisissez dans la liste déroulante :

• Taxes comprises
• Hors tax

Cliquez sur Enregistrer les modifications .

Étape 3 : Définissez les éléments d'expédition à afficher lors du paiement

De plus, sous WooCommerce > Paramètres , vous pouvez marquer la zone d'expédition, les méthodes et les calculs qui apparaissent dans la caisse WooCommerce.

Accédez simplement à l'onglet Expédition et ajustez :

• Calculs : pour activer le calculateur d'expédition sur la page du panier
• Calculs : pour masquer les frais d'expédition lors du paiement jusqu'à ce qu'une adresse soit insérée
• Destination d'expédition : pour définir les adresses d'expédition par défaut lors du paiement

Cliquez sur Enregistrer les modifications .

Étape 4 : Gérer les comptes et la confidentialité lors du paiement

Tout en restant sous WooCommerce > Paramètres , rendez-vous dans l'onglet Comptes & Confidentialité .

En haut de la page, vous verrez deux champs :

• Paiement en tant qu'invité : inclure/supprimer les paiements en tant qu'invité et les connexions de compte existantes
• Création de compte : permet aux clients de créer un compte ou de démarrer un abonnement lors du paiement

Continuez sur la page Comptes et confidentialité pour trouver la zone Politique de confidentialité .

Remplissez la zone de texte Politique de confidentialité de paiement pour vous assurer que les clients voient la politique lors de leur paiement. Laissez le champ vide si vous préférez ne pas afficher de politique de confidentialité dans cette zone.

Étape 5 : Choisissez la page de paiement réelle et d'autres paramètres avancés

Accédez à l'onglet Avancé pour révéler une section Mise en page ; cela incite les commerçants à indiquer à WooCommerce où envoyer les clients lors de leur paiement.

Par défaut, WooCommerce génère des pages Panier , Paiement , Mon compte et Termes et conditions , que vous pouvez trouver en accédant à Pages > Toutes les pages sur WordPress.

Cependant, vous avez la possibilité de générer une toute nouvelle page et de la lier ici. Cela remplace les pages de paiement par défaut et envoie les clients vers les pages personnalisées.

Une autre option de l'onglet Avancé consiste à Forcer le paiement sécurisé , ce qui nécessite un certificat SSL.

Étape 6 : Modifiez la conception de paiement de votre thème dans WordPress Customizer

Les thèmes WordPress avec la fonctionnalité WooCommerce installent souvent les outils WordPress Customizer pour ajuster facilement votre style de paiement.

Gardez à l'esprit que tous les thèmes WooCommerce offrent des paramètres de personnalisation WordPress uniques (certains n'ont aucun paramètre du tout), mais dans l'ensemble, cela vaut la peine de vérifier le personnalisation WordPress pour un contrôle rapide de la caisse.

Pour commencer, allez dans Apparence > Personnaliser sur WordPress.

S'il est disponible, votre thème doit afficher un bouton WooCommerce quelque part dans WordPress Customizer. Cliquez dessus.

Ceci n'est qu'un exemple avec le thème Storefront (vous ne verrez donc peut-être pas la même chose), mais il est assez courant que les thèmes aient un onglet Checkout dans le Customizer. Choisissez cela, ou quelque chose de similaire, qui peut indiquer le contrôle de la caisse.

Parcourez tous les paramètres de paiement proposés par votre thème. Dans le thème Storefront, vous pouvez rendre ces champs facultatifs, obligatoires ou masqués :

• Champ Nom de l'entreprise
• Champ Adresse ligne 2
• Champ Téléphone

Il est également possible de mettre en surbrillance les champs obligatoires avec un astérisque.

Enfin, le thème Storefront offre des options pour afficher une page Politique de confidentialité et Conditions générales à la fin du paiement.

Méthode 2 : Utiliser un constructeur de page pour modifier les champs de paiement WooCommerce et le style général

Les constructeurs de pages comme Elementor, Beaver Builder et Themify proposent tous des widgets de contenu WooCommerce pour remplacer ce qui se trouve actuellement sur la page de paiement WooCommerce.

Les constructeurs de pages réservent presque exclusivement leurs modules de paiement WooCommerce pour leurs plans Premium, il y a donc de fortes chances que vous deviez payer pour cette fonctionnalité. Par exemple, vous recevez le widget Elementor Checkout avec le plan Pro.

Cela dit, un constructeur de page vous donne un contrôle presque complet sur votre page de paiement, c'est donc un moyen facile de modifier le paiement WooCommerce sans connaissances en codage, et seulement pour environ 50 $ à 100 $ par an.

Dans ce didacticiel, nous allons vous montrer comment la personnalisation de la caisse fonctionne généralement avec un constructeur de page, à l'aide d'Elementor.

Étape 1 : Ouvrez la page de paiement désignée dans Elementor

Pour modifier le paiement WooCommerce dans Elementor, vous devez vous rendre sur la page de paiement créée automatiquement par WooCommerce . Trouvez-le sous Pages> Toutes les pages .

Ouvrez la page intitulée "Page de paiement", puis cliquez sur Modifier avec Elementor .

Étape 2 : Supprimer le shortcode de paiement WooCommerce

WooCommerce a automatiquement ajouté son « WooCommerce checkout" dans l'éditeur, qui rend le module de paiement WooCommerce par défaut.

L'objectif est de l'échanger contre un module de paiement de votre constructeur de page. Alors, supprimez le shortcode de paiement WooCommerce.

Étape 3 : déposez le widget Elementor Checkout

Il est maintenant temps de trouver le widget de paiement de votre constructeur de page. Elementor en propose un appelé Checkout , que vous pouvez trouver en utilisant la barre de recherche ou en naviguant sous la rubrique WooCommerce. Cliquez et faites glisser le widget Checkout sur la page vierge, où il est écrit « Faites glisser le widget ici ».

Remarque : Vous ne verrez peut-être pas le widget Checkout si vous n'avez pas effectué la mise à niveau vers la version Premium d'Elementor. C'est le cas pour la plupart des constructeurs de pages.

Étape 4 : Personnalisez le contenu, le style et les fonctionnalités avancées

Après avoir fait glisser le widget de paiement, Elementor affiche l'aperçu du paiement. Vous pouvez ensuite cliquer sur ces onglets à gauche pour personnaliser chaque aspect du paiement :

Par exemple, vous pouvez basculer la mise en page générale sur une colonne et ajuster le texte de l'espace réservé pour le champ du prénom.

Les autres onglets de personnalisation incluent :

• Détails de la facturation
• Informations Complémentaires
• Votre commande
• Coupon
• Paiement

Il existe également d'innombrables façons de modifier le paiement WooCommerce sous l'onglet Style .

Utilisez ces onglets :

• Sections
• Typographie
• Formes
• Récapitulatif de la commande
• Bouton d'achat

Par exemple, nous avons remplacé le bouton bleu Acheter par un bouton vert.

Enfin, l'onglet Avancé propose des outils encore plus puissants pour éditer :

• Dispositions
• Effets de mouvement
• Transformations
• Arrière-plans
• Les frontières
• Masques
• Réactivité
• Les attributs
• CSS personnalisé

Tant que vous vous en tenez à la page précédemment définie comme "Page de paiement" pour WooCommerce et que vous remplacez le shortcode de paiement WooCommerce par le widget de paiement du générateur de page, vous pouvez enregistrer les modifications et terminer le processus !

Méthode 3 : Installer un plug-in de personnalisation pour modifier les champs

De nombreux plugins de personnalisation de paiement WooCommerce existent, tels que :

La plupart des plugins de paiement WooCommerce fournissent des outils de personnalisation supplémentaires pour modifier et ajouter des champs, mais il y en a quelques-uns pour repenser complètement la conception, comme le plugin Multi-step Checkout.

Nous vous suggérons de consulter tous les plugins recommandés ci-dessus, mais nous allons passer par un rapide tutoriel avec le plugin Checkout Field Editor pour vous aider à comprendre comment modifier le paiement WooCommerce avec un plugin.

Étape 1 : Installez et activez le plug-in Checkout Field Editor

Installez le plug-in Checkout Field Editor, puis suivez le processus d'activation du plug-in.

Une fois actif, le plugin ajoute un nouvel onglet sur WordPress, auquel vous pouvez accéder en vous rendant sur WooCommerce > Checkout Form .

Étape 2 : Modifier les champs actuels

Le plugin affiche tous les champs actuels dans votre caisse WooCommerce, sauf que le plugin est désormais lié à la caisse WooCommerce par défaut, vous avez donc un contrôle total sur les champs.

Vous pouvez modifier :

• Champs de facturation
• Champs d'expédition
• Champs supplémentaires

Pour modifier les champs de paiement WooCommerce, cliquez sur Modifier à côté du champ que vous souhaitez modifier. Pour cet exemple, nous allons modifier le champ Nom de l'entreprise .

Dans la fenêtre Modifier le champ , vous pouvez modifier les options du champ, telles que :

• Étiquette
• Espace réservé
• Valeur par défaut
• Classer
• Validation

Il est également possible de décocher la case Obligatoire , afin que les clients ne soient pas obligés de remplir le champ. Vous pouvez également désactiver le champ afin qu'il ne s'affiche pas du tout lors du paiement. Assurez-vous de cliquer sur Enregistrer et fermer .

Le plugin enregistre généralement tout après cela, mais vous pouvez cliquer à nouveau sur le bouton Enregistrer les modifications pour vous assurer qu'il fonctionne.

Comme vous pouvez le constater, nous avons supprimé le champ Nom de l'entreprise de la zone de paiement.

Et il est parti de la caisse frontale.

Vous pouvez également modifier quelque chose comme le texte de l' espace réservé . Dans ce cas, c'est le même processus d'ouverture du champ en question et de modification des paramètres.

Le champ Prénom de notre paiement révèle maintenant un nouveau texte d'espace réservé.

Étape 3 : Ajouter un nouveau champ à la caisse WooCommerce

Pour ajouter un champ entièrement nouveau, cliquez sur le bouton Ajouter un champ .

Choisissez le Type de champ, en choisissant parmi des options telles que :

• Texte
• Numéro
• Caché
• Mot de passe
• Téléphoner
• Case à cocher
• Mois
• URL
• et beaucoup plus

Par exemple, nous allons créer un champ Numéro et demander aux clients de saisir leur numéro de fidélité. Vous pouvez également désigner des éléments tels que des espaces réservés, des valeurs par défaut et indiquer s'il s'agit d'un champ obligatoire.

Assurez-vous de cocher la case Activé , puis cliquez sur Enregistrer et fermer .

Étape 4 : Afficher les résultats

Sur le backend, vous verrez le nouveau champ de paiement en bas de la liste. Il est placé à la fin par défaut, mais vous pouvez cliquer et faire glisser pour réorganiser.

Et le nouveau champ apparaît également sur le module de paiement frontal.

Créez la page de paiement parfaite aujourd'hui

Nous vous recommandons de commencer par les paramètres de paiement par défaut de WooCommerce pour voir s'ils vous aident à atteindre les résultats souhaités. Pour des modifications plus avancées, envisagez d'utiliser des champs personnalisés. Et pour les personnalisations avancées, mais relativement faciles à mettre en œuvre, utilisez l'un des constructeurs de page suggérés.

Quelles sont vos principales questions sur la façon de modifier le paiement WooCommerce ? Partagez votre opinion dans les commentaires!