Comment configurer une page de paiement WooCommerce avec Divi

L'étape la plus importante d'un parcours d'achat en ligne est la réalisation d'un achat. Peu importe le temps qu'un utilisateur passe à parcourir votre boutique en ligne, si cela ne se traduit pas par une vente, cela n'est pas pertinent.

Il est crucial de rendre le processus de paiement aussi transparent que possible pour vos clients. Alors, comment créer une page de paiement facile à utiliser sur votre boutique WooCommerce ? Dans cet article, nous verrons comment configurer une page de paiement WooCommerce personnalisée avec Divi.

Pourquoi avez-vous besoin d'une page de paiement WooCommerce personnalisée ?

Aucun client n'a à faire face à un processus de paiement fastidieux. La vérité est que vos clients ne traîneraient pas si votre page de paiement et votre processus étaient stressants. Si vous rencontrez actuellement des paniers abandonnés sur votre site de commerce électronique, il peut être judicieux de réviser votre page de paiement.

Vous devez donner à vos clients un effet « wow » du début de leur expérience d'achat jusqu'à l'étape finale. Si vous choisissez la page de paiement WooCommerce traditionnelle, vous n'obtiendrez pas cet effet.

Vous devez créer un processus de paiement unique, transparent et facile à utiliser pour offrir une expérience d'achat fluide à vos clients. Certains des avantages de la création d'une page de paiement personnalisée sont les suivants :

• Réduction des abandons de panier

Les opportunités de vente manquées sont souvent causées par l'abandon du panier. C'est une situation où les clients placent déjà des articles dans leur panier mais quelque part le long de la ligne, ils quittent le site sans que l'achat soit terminé. Une page de paiement compliquée entraîne souvent l'abandon du panier.

Si votre client doit passer par un long processus ou estime que le processus n'est pas sécurisé, il est susceptible de perdre tout intérêt à conclure la transaction. Avec une page de paiement personnalisée, il y a de fortes chances que vos clients trouvent le processus plus simple et plus sûr.

• Transactions rapides et faciles

Votre entonnoir de vente doit être aussi court et rapide à compléter que possible. Lorsque vous configurez et personnalisez votre page de paiement WooCommerce, vous supprimez facilement la charge inutile et vous vous concentrez uniquement sur les détails importants du processus de transaction.

Ayant un processus de paiement avec plusieurs pages à remplir, les clients seront probablement fatigués et quitteront votre site. Cependant, lorsque l'ensemble du processus est rationalisé, vous pouvez aider vos clients à terminer le parcours d'achat plus rapidement et plus facilement.

Comment configurer une page de paiement WooCommerce personnalisée

Votre page WooCommerce est livrée avec une page de paiement par défaut. Vous pouvez le modifier avec un plugin tiers ou un shortcode. Si vous êtes un nouvel utilisateur, vous aurez peut-être du mal à modifier votre page de paiement à l'aide de ces options. C'est là qu'intervient l'utilisation d'un plugin comme le Divi Builder.

Divi Builder dispose d'un module Divi Shop qui vous permet de créer une superbe boutique en ligne avec une page de paiement personnalisée. Dans cette section, nous examinerons le guide étape par étape pour configurer votre page de paiement WooCommerce personnalisée.

Avant cela, il est crucial de comprendre l'importance des certificats SSL, de la protection des données et de la sécurité sur votre site. Vous avez besoin d'un certificat SSL pour une couche de sécurité supplémentaire afin de chiffrer les données stockées sur votre plateforme.

Un certificat SSL montre à vos clients que votre site est sûr pour fournir des détails de carte de crédit. Maintenant que nous avons effacé cette partie, plongeons-nous dans les détails de la création d'une page de paiement WooCommerce personnalisée.

Première étape : configurez votre page de paiement dans les paramètres du plugin WooCommerce avant d'utiliser le plugin Divi Builder. Pour cela, rendez-vous sur votre tableau de bord WooCommerce et cliquez sur « Paramètres ».

Ensuite, cliquez sur l'onglet "Avancé" et localisez la page de paiement. Sélectionnez l'option "Commander" dans le menu déroulant et faites défiler jusqu'à la fin de la page pour cliquer sur le bouton "Enregistrer" pour enregistrer les modifications.

Deuxième étape : avec la page de paiement déjà définie, l'étape suivante consiste à installer le plug-in Divi Shop Builder. Alors, accédez au site officiel d'Elegant Theme pour acheter le plugin Divi Shop Builder. Cliquez sur le lien de téléchargement de votre « page Mon compte » pour télécharger.

Après le téléchargement, installez et activez le plugin. le plugin apparaîtra dans le menu Divi après avoir terminé l'installation. Avant de continuer, assurez-vous d'authentifier le plugin pour votre achat.

Pour ce faire, rendez-vous sur « Page Mon compte » sur le site Web d'Elegant Theme pour copier la clé de licence. Lorsque vous avez authentifié le plugin, vous pouvez commencer à l'utiliser. Le Divi Shop Builder fonctionne dans le plugin Divi Builder, ce qui fait de la création de votre boutique WooCommerce une tâche très transparente.

Troisième étape : L'étape suivante consiste à créer votre page de paiement WooCommerce personnalisée. Pour ce faire, cliquez pour ouvrir la page de paiement et activez le Divi Builder acheté. Ensuite, ouvrez le plugin Divi Builder et commencez à ajouter des modules.

Vous trouverez cinq nouveaux modules (Checkout Billing, Checkout Coupon, Checkout Order, Checkout Shipping et Panier/Checkout Notices) ajoutés au Divi Builder. Ces modules vous aideront à configurer votre page de paiement personnalisée sur votre boutique WooCommerce. Voici comment ces modules fonctionnent.

Facturation de la caisse : cela permet de personnaliser tous les champs de saisie du formulaire dans lesquels les clients peuvent saisir leurs informations de facturation. Vous pouvez modifier les étiquettes de champ selon vos besoins.

Expédition à la caisse : cela permet à vos clients de spécifier une adresse secondaire. Comme pour la facturation de Checkout, vous pouvez également modifier les champs du formulaire selon vos besoins.

Coupon de paiement : cela permet à vos clients d'entrer un code promotionnel unique qui leur a été attribué pour bénéficier d'une remise spéciale. Vous devez placer le module Checkout Coupon séparément des autres modules pour les faire fonctionner. Si vous avez une contrainte d'espace, réduisez le remplissage entre les lignes et les sections pour créer plus d'espace.

Commande de paiement : C'est ici que votre client établit et confirme la commande avant de passer à l'option de paiement. Vous pouvez également modifier cette partie selon vos besoins à l'aide de la fonction glisser-déposer.

Avis de paiement : si vous souhaitez ajouter une note à d'autres pages de paiement, vous pouvez utiliser ce module. Vous pouvez être aussi élaboré ou simple dans votre conception que vous le souhaitez.

Lorsque vous utilisez les modules Checkout, vous devez vous assurer qu'ils ne se trouvent pas dans les mêmes sections que les autres modules de formulaire. Si vous les placez ensemble, ils ne fonctionneront pas. Vous devez placer le module de formulaire de contact, le module de formulaire d'inscription, le module de commentaire et le module de connexion dans des sections distinctes lors de la création de la page de paiement pour qu'ils fonctionnent correctement.

Comme les autres modules du thème Divi, vous pouvez personnaliser le style de vos modules de paiement avec Divi Builder. Pour faire ça, suit les étapes suivantes:

• Cliquez pour ouvrir les modules de paiement

• Cliquez sur l'onglet "Conception"

• Utilisez les différents éléments pour styliser votre page d'une manière qui corresponde à votre design et à l'identité de votre marque

• Vous pouvez également ajouter plus de personnalisation via l'onglet Avancé. Dans l'onglet Avancé, vous pouvez définir les effets de défilement, les transitions, le positionnement et les paramètres de visibilité pour un appareil. Vous pouvez également ajouter des ID et des classes personnalisés pour les scripts CSS avancés.

Conclusion

Divi élimine le stress de la configuration d'une page de paiement WooCommerce. Il vous permet de modifier votre page de paiement actuelle et également de créer une page de panier personnalisée. Le plugin Divi est livré avec de nombreuses fonctionnalités pour rendre votre boutique aussi attrayante pour les clients que vous pouvez l'imaginer. Cela rend également les achats et le processus de paiement très transparents.