Comment personnaliser la page de paiement WooCommerce

La page de paiement est essentiellement la partie la plus cruciale de tout site Web de commerce électronique moderne pour plusieurs raisons. La raison principale est que les clients exigent le processus de paiement le plus fluide et le plus simple possible pour leur expérience d'achat en ligne.

La présentation de votre page de paiement joue le rôle le plus important dans cette section, car 70 à 85 % de tous les paniers d' achat en ligne sont abandonnés pendant le processus de paiement . La majorité de ces abandons sont imputés à la façon dont la conception de la page de paiement WooCommerce est présentée et au fait que les clients changent d'avis au sujet de leur panier au dernier moment.

Pour ratifier ce problème, la meilleure solution serait d'intégrer le panier WooCommerce et le paiement sur la même page, avec une expérience de paiement plus fluide.

Comment créer une page de paiement personnalisée dans WooCommerce

Alors qu'au début, il semble difficile d'avoir une page de paiement WooCommerce fonctionnelle avec tous les champs nécessaires. Mais c'est en fait un processus assez simple avec un modèle de page de paiement WooCommerce correctement configuré.

Heureusement, il existe des outils tels que ShopReady - le constructeur de boutique WooCommerce qui est livré avec un assortiment de modules et de widgets WooCommerce qui fait le gros du travail, vous n'avez donc pas à vous soucier du codage, et vous pouvez plutôt vous concentrer sur la façon de personnaliser Page de paiement WooCommerce adaptée à l'identité de votre marque.

Bien qu'il puisse sembler redondant d'avoir une page de paiement correctement stylisée. Mais faites-nous confiance, chaque élément compte lorsque vous essayez d'optimiser votre plate-forme de commerce électronique pour les meilleures installations d'achat possibles.

Assez dit, passons au processus de personnalisation de la page de paiement WooCommerce.

Étape 1 : Installation du plug-in de personnalisation de la page de paiement WooCommerce

Au lieu d'installer des plugins séparés pour différentes fonctions sur WordPress, nous utiliserons le ShopReady WooCommerce Shop Builder pour ce processus de personnalisation. Pour installer le constructeur de boutique WooCommerce, connectez-vous à votre compte WordPress et rendez-vous sur le tableau de bord des plugins . À partir de là, cliquez sur Ajouter nouveau et recherchez le plug-in ShopReady, puis appuyez sur Installer .

Attendez la fin du processus d'installation pour activer le plugin. Et vous serez invité à installer le plugin WooCommerce et le générateur de page par glisser-déposer Elementor .

Vous pouvez maintenant commencer à ajouter des produits à votre plateforme de commerce électronique à partir du menu Produit WooCommerce . Si vous ne savez pas comment vous y prendre. Nous avons un guide détaillé sur - Comment ajouter des produits pour la personnalisation de la page produit WooCommerce .

Étape 2 : Installation du modèle Elementor

Ensuite, pour approfondir notre processus de personnalisation de la vitrine WooCommerce et pour appliquer une page de paiement appropriée, nous devrons appliquer un thème WordPress WooCommerce approprié. Cela nous fournit toutes les fonctionnalités et installations nécessaires pour accueillir un site Web de commerce électronique.

Pour simplifier nos efforts de personnalisation, nous pouvons également utiliser l'un des thèmes de commerce électronique Elementor fournis par ShopReady - WooCommerce Shop Builder sous la forme de modèles Elementor importables.

Actuellement, ShopReady comprend plus de 8 thèmes de commerce électronique complets. Ces thèmes importables en un clic sont conçus et développés pour s'adapter à n'importe quel champ personnalisé de page de paiement WooCommerce, une fonction d'ajout au panier, des pages de produits hautement réactives, des grilles de produits, des curseurs de produits, et bien plus encore.

Pour installer l'un de ces modèles, vous devez d'abord installer le plugin Unyson - WordPress et son extension de contenu de sauvegarde et de démonstration associée , qui fonctionne comme l'importateur de démonstration en un clic pour le module complémentaire ShopReady WooCommerce.

L' extension Backup & Demo Content peut être téléchargée et activée à partir du tableau de bord Unyson après son installation à partir du référentiel WordPress.

Le thème ShopReady WooCommerce peut être installé à partir du tableau de bord WordPress > Outils > Installation du contenu de démonstration . À partir de là, vous pouvez sélectionner et installer l'un des modèles WooCommerce fournis par ShopReady. Cliquez simplement sur Installer et attendez que le processus se termine, auquel cas vous serez redirigé vers la page de destination de WooCommerce.

Le résultat final devrait ressembler à ceci.

Étape 3 : Personnalisation de la page du panier WooCommerce à l'aide de ShopReady

Il s'agit d'un élément crucial qui doit être inclus pour exploiter une entreprise de commerce électronique efficace. Vous pouvez simplement tirer parti d'un shortcode de panier WooCommerce et créer un panier de commerce électronique fonctionnel de cette manière avec l'aide d'un constructeur de magasin WooCommerce tel que ShopReady. Vous pouvez également utiliser un widget ShopReady pour ajouter cette fonctionnalité à votre site Web.

Vous devrez d'abord ajouter le widget « Ajouter au panier » à la page produit afin d'obtenir un panier opérationnel. Ce que nous avons déjà fait. Maintenant que les marchandises ont été ajoutées au panier, revenons en arrière et construisons la page du panier elle-même, où toutes les choses seront affichées après leur achat.

Les utilisateurs de ShopReady - WooCommerce Shop Builder peuvent choisir l'un des deux modèles de panier distincts, accessibles depuis le tableau de bord ShopReady. Activez et modifiez votre modèle de panier prédéfini WooCommerce en cliquant sur le bouton Modifier.

Vous serez redirigé vers la page Elementor Editor. À partir de là, vous pouvez facilement personnaliser la fonctionnalité et l'apparence de votre page de panier.

C'est aussi simple que d'ajouter le widget ShopReady Cart à ce stade, puis votre page de panier prendra immédiatement sa forme. Avec ShopReady, il est possible de créer un panier d'achat WordPress sans avoir besoin d'un plugin puisque la procédure est si simple.

Si vous avez déjà ajouté quelque chose à votre panier, il devrait ressembler à ceci.

Ressources supplémentaires : Si vous ne savez pas comment ajouter des produits à votre tableau de bord WooCommerce, consultez ce guide sur – Comment ajouter des produits sur la page de la boutique WooCommerce .

Étape 4 : Passons maintenant à la modification de la page de paiement WooCommerce WordPress

Au lieu de passer par le processus fastidieux de codage CSS de la page de paiement WooCommerce, nous pouvons utiliser un modèle prédéfini de paiement ShopReady pour accélérer la personnalisation de notre page. L'utilisation d'un modèle prédéfini élimine non seulement le besoin d'utiliser un plug-in de personnalisation de page de produit WooCommerce, mais cela peut également vous faire gagner beaucoup de temps et de tracas dans votre travail de développement.

Pour commencer, rendez-vous sur Tableau de bord WordPress > Tableau de bord ShopReady > Modèles . Activez maintenant le préréglage de la page de paiement WooCommerce et cliquez sur l'icône de modification.

Et vous serez redirigé vers l'écran Elementor Editor. Utilisez maintenant le widget ShopReady Checkout pour WooCommerce dans la section de votre page Elementor.

Et voilà, votre éditeur de page de paiement WooCommerce. Maintenant, à partir d'ici, vous pouvez choisir entre plusieurs options de champ de paiement prédéfinies fournies par ShopReady à partir de l' option Disposition de l' onglet Contenu . Ou vous pouvez créer votre propre page de paiement WooCommerce ajouter un champ personnalisé.

Si vous le souhaitez, vous pouvez également utiliser un shortcode de page de paiement WooCommerce en déployant le widget ShopReady ShortCode avec la possibilité d'utiliser un CSS personnalisé de page de paiement WooCommerce.

Avec le backend du widget ShopReady, les développeurs et les experts en codage peuvent également utiliser les crochets de page de paiement WooCommerce pour ajouter des fonctionnalités uniques qui différencieront votre page de paiement des autres. Mais pour la plupart, la quantité de contenu fournie par le modèle prédéfini est suffisante pour n'importe quel site Web de commerce électronique.

Étape 5 : Mettez en ligne votre page de paiement personnalisée

Lorsque vous avez terminé de personnaliser votre toute nouvelle page de paiement personnalisée, il est temps de la mettre en ligne. Pour ce faire, cliquez simplement sur Publier/Mettre à jour en bas à gauche de l'écran.

Essayez maintenant de vérifier un produit pour voir les résultats.

Conclusion

L'abandon du panier WooCommerce est un énorme casse-tête pour les propriétaires d'entreprise de commerce électronique, une grande partie des visiteurs abandonnant leur panier dès la page de paiement. Comme le suggèrent les experts du secteur, le meilleur moyen de contrer l'abandon des paniers de commerce électronique consiste à utiliser des processus de paiement WooCommerce bien personnalisés avec une fonctionnalité de paiement rapide.

Cela réduit le temps nécessaire aux utilisateurs pour passer de la page du panier à la page de paiement, en conservant leur intérêt pour leur achat et en passant par la confirmation de commande.