Une bonne page de paiement WooCommerce peut augmenter les profits de votre boutique de manière exponentielle.
Vous devrez cependant consacrer un peu de temps à la personnalisation de la page de paiement de WooCommerce.
La bonne nouvelle, c’est qu’après l’avoir fait, vous devriez constater une augmentation des taux de conversion sans avoir à faire quoi que ce soit d’autre.
Dans cet article, nous allons vous apprendre à personnaliser les pages de paiement de WooCommerce. Nous vous montrerons également comment créer des pages de paiement WooCommerce à une seule page. L’un des designs les plus performants !
L’importance d’une page de paiement optimisée pour l’e-commerce
Selon notre étude statistique sur le eCommerce, 70% des paniers d’achat en ligne sont abandonnés.
Cela signifie que 7 personnes sur 10 envisageaient d’acheter dans votre boutique mais ont fini par abandonner en cours de route.
Il peut y avoir un certain nombre de raisons pour lesquelles ils n’ont pas acheté chez vous, mais vous pouvez parier qu’un processus de paiement long ou compliqué était l’une d’entre elles !
Un passage en caisse rapide et sans friction peut transformer le parcours client. Plus vous facilitez le passage à la caisse, plus le client est susceptible de le terminer.
C’est aussi simple que cela.
Il n’y a rien de mieux pour une entreprise qu’un client heureux.
Tout le monde y gagne !
Dans WooCommerce, la personnalisation de la page de paiement est encore plus importante, car la page par défaut n’est pas la plus attrayante ni la plus convertible. Si vous utilisez WooCommerce et que vous souhaitez améliorer l’expérience de paiement, lisez 15+ conseils d’optimisation de paiement pour WooCommerce. Cela vous aidera à coup sûr !
Comment personnaliser la page de paiement de WooCommerce en utilisant le plugin CartFlows
CartFlows est un plugin riche en fonctionnalités qui vous permet d’optimiser votre flux de paiement afin d’augmenter le revenu par commande. C’est un plugin essentiel que nous recommandons à tous les propriétaires de boutiques car il est plus que rentable !
Le processus de paiement dépend du thème que vous utilisez. Nous vous recommandons d’utiliser un thème optimisé.
Tout problème a une solution et le problème de la personnalisation du processus de paiement n’est pas différent.
Dans cette section, nous allons créer un processus de paiement personnalisé avec des ventes incitatives et des ventes incitatives à l’aide de ce plugin.
Nous illustrerons également comment vous pouvez utiliser les modèles de paiement personnalisés, apporter des modifications à la conception du paiement, ajouter ou supprimer des ventes et personnaliser la page de remerciement.
Veuillez vous assurer que vous avez installé et activé CartFlows si vous souhaitez suivre cette formation.
Nous vous recommandons également d’utiliser la nouvelle interface utilisateur plus rapide :
Comment utiliser les modèles de page de paiement personnalisés
Il n’est pas compliqué d’utiliser les modèles de page de paiement du plugin CartFlows.
Tout d’abord, connectez-vous à votre site en tant qu’administrateur, et sur le tableau de bord de WordPress, cliquez sur CartFlows > Flows.
Cela ouvrira une liste de tous les modèles de flux.
Cliquez sur Ajouter un nouveau.
Vous pouvez créer votre propre modèle à partir de zéro. Vous pouvez également sélectionner un modèle prêt à l’emploi, que vous pouvez personnaliser.
Cliquez sur Start From Scratch, où nous allons créer notre modèle de flux personnalisé.
Entrez le nom du flux et cliquez sur Concevoir votre flux.
Vous serez redirigé vers toutes les étapes du flux. Pour personnaliser ces étapes, cliquez sur Modifier.
CartFlows est compatible avec le constructeur de pages Elementor, ce qui vous permet de personnaliser ces étapes.
Modifier la page d’atterrissage
Tout d’abord, modifions la page d’atterrissage. Tout ce que vous avez à faire est de cliquer sur l’onglet Paramètres et de copier le lien Étape suivante.
Vous pouvez utiliser n’importe quel constructeur de pages pour concevoir la page d’atterrissage et ajouter ce lien au bouton pour amener les utilisateurs à l’étape suivante du flux.
Une fois que vous avez terminé, cliquez sur Retour pour éditer le flux.
Modifier la page de paiement
L’étape suivante consiste à modifier la page de paiement. Vous remarquerez qu’une notification vous informe qu’aucun produit n’a été attribué. Cliquez sur Modifier à l’étape de la page de paiement.
Cliquez sur l’onglet Produits, où vous ajouterez ou créerez le(s) produit(s).
Vous pouvez également activer les conditions d’options de produit.
Cliquez sur le bouton Enregistrer les paramètres pour mettre à jour vos modifications.
Cliquez sur l’onglet Settings pour copier le shortcode que nous utiliserons pour créer la page de paiement. Il se trouve dans la section Shortcodes.
Une fois que vous avez copié le shortcode, collez-le dans la page de paiement que vous allez créer.
Voici le résultat :
Une fois que vous avez terminé, cliquez sur Back pour éditer le flux.
Modifier la page de remerciement
La dernière étape consiste à éditer la page de remerciement. Cliquez sur Settings et cliquez sur l‘onglet Shortcode.
Copiez le shortcode et collez-le dans la page de remerciement que vous allez créer.
Voici le résultat :
Ensuite, cliquez sur l’onglet Général, où vous pouvez modifier le titre de l’étape et le slug.
Vous pouvez également activer les champs que vous souhaitez afficher sur cette page, sous l’onglet Paramètres des champs.
Dans cette section, vous pouvez voir que CartFlows inclut des fonctionnalités qui vous aideront à optimiser les paiements et à augmenter vos ventes.
Dans l’onglet Paramètres avancés, vous pouvez modifier le texte de la page de remerciement et activer les redirections après achat. N’oubliez pas d’enregistrer vos modifications en cliquant sur le bouton Enregistrer les paramètres.
Une fois que vous avez terminé, cliquez sur Retour pour modifier le flux.
Comment modifier le design de la page de paiement ?
CartFlows simplifie le processus de personnalisation du design de la page de paiement. L’interface utilisateur simple et rapide permet à tout le monde de personnaliser le design de la page de paiement.
Pour personnaliser le design de la page de paiement, cliquez sur Modifier.
Cela ouvrira les paramètres de la page de paiement. Descendez jusqu’à la section Design Settings et cochez l’option Enable Design Settings.
Cliquez sur l’onglet Design de la caisse.
Sous cet onglet, vous pouvez modifier l’habillage de la caisse, la couleur primaire et la famille de polices.
L’onglet suivant est celui des textes et boutons de caisse.
Vous pouvez activer les options avancées, qui vous permettent de personnaliser l’en-tête, les champs de saisie, les boutons et les sections.
Vous pouvez également modifier la conception de le bond bosse de commande et de l’offre de paiement.
N’oubliez pas de cliquer sur Enregistrer les paramètres pour mettre à jour vos modifications.
Nous avons modifié le design de l’habillage de la caisse pour qu’il ne comporte qu’une seule colonne.
Voici le résultat :
Comment modifier les paramètres de la page de paiement dans CartFlows
Dans la section des paramètres de la page de paiement, cliquez sur l’onglet Paramètres de paiement. Ici, vous pouvez modifier le texte du bouton “Passer commande”.
N’oubliez pas d’enregistrer les modifications apportées.
Comment ajouter ou supprimer des champs de votre page de paiement ?
Comme nous l’avons mentionné précédemment, vous n’avez besoin que de 6 à 8 champs sur la page de paiement.
Dans la page de paiement standard de WooCommerce, il y a 18 à 20 champs, dont certains ne sont pas nécessaires pour compléter une commande.
CartFlows vous permet d’ajouter ou de supprimer des champs de votre page de paiement. Dans la section des paramètres de la caisse, cliquez sur l’onglet Champs du formulaire pour modifier les champs.
Vous pouvez modifier le champ coupon, le champ supplémentaire et la section expédier à une adresse différente. Il existe également une option pour rendre le champ de coupon et le champ supplémentaire repliables.
Lorsque vous activez l’éditeur de champs personnalisés, vous pouvez supprimer n’importe quel champ en cliquant sur l’icône “œil”.
Par exemple, nous avons désactivé le champ du nom de l’entreprise :
Pour ajouter un champ personnalisé, cliquez sur le bouton Ajouter un champ personnalisé.
Vous pouvez ajouter le champ à la section de facturation ou d’expédition. Il est également possible de saisir l’étiquette du champ, le texte par défaut et le texte de remplacement.
Vous pouvez ajuster la largeur du champ et le rendre obligatoire ou repliable.
Une fois que vous avez terminé, cliquez sur le bouton Ajouter un nouveau champ.
N’oubliez pas de cliquer sur Enregistrer les paramètres pour sauvegarder vos modifications.
Nous vous recommandons d’ajouter le champ s’il est nécessaire pour terminer la commande. L’ajout de nombreux champs sur la page de paiement peut augmenter le taux d’abandon du panier.
Comment créer des offres de vente incitative dans WooCommerce
L’un des moyens de stimuler les ventes dans votre boutique est d’inclure une offre de vente incitative dans votre flux de paiement.
La vente incitative consiste à encourager un client à acheter une version plus chère de ce qu’il a dans son panier. Par exemple, vous pouvez proposer un MacBook Pro lorsqu’un client a sélectionné un MacBook.
En lui montrant ce produit, vous répondez à ses besoins et vous augmentez votre chiffre d’affaires.
Pour ajouter une offre de vente incitative à votre flux de paiement, cliquez sur Ajouter une nouvelle étape.
La page de la bibliothèque d’étapes s’ouvre.
Cliquez sur l’onglet Créer votre propre étape et sélectionnez Offre de vente incitative dans le menu déroulant. Ensuite, cliquez sur le bouton Créer une étape.
Cela ajoutera une nouvelle étape au flux de paiement, mais vous devrez d’abord entrer le nom de l’étape. Faites glisser l’étape de vente incitative et placez-la sous l’étape de la page de paiement comme suit :
Vous remarquerez qu’une notification vous informe qu’aucun produit n’est attribué. Pour attribuer un produit, cliquez sur Modifier pour ouvrir la page Paramètres de vente incitative.
Cliquez sur l’onglet Produits pour sélectionner le produit de vente incitative. Il existe d’autres options qui méritent d’être explorées. Il s’agit notamment de la quantité du produit, du tarif d’expédition forfaitaire, du prix de la remise, du type de remise et des paramètres de l’offre de commande.
Cliquez ensuite sur l’onglet Paramètres, où vous trouverez différents shortcodes pouvant être utilisés sur la page de l’offre.
Vous pouvez modifier le titre et l’intitulé de l’étape dans l’onglet Général.
L’onglet Redirections conditionnelles vous permet d’ajouter des redirections conditionnelles si l’acheteur accepte ou rejette l’offre.
Veillez à sélectionner un produit dont le prix est supérieur à celui du panier.
Une fois que vous êtes satisfait de vos paramètres, cliquez sur Enregistrer les paramètres.
Comment créer des offres Downsell dans WooCommerce
Les offres downsell sont des alternatives moins chères que l’acheteur peut acheter s’il refuse d’acheter un produit ou une offre. Idéalement, les upsells devraient précéder les downsells, mais vous devez les concevoir en fonction de votre public cible.
Le processus de création d’un upsell est le même que celui d’un upsell.
Dans votre flux de paiement, cliquez sur Ajouter une nouvelle étape.
Cela ajoutera une nouvelle étape au flux de paiement. Faites glisser l’étape de vente à la baisse et placez-la sous l’étape de vente à la hausse comme suit :
L’étape suivante consiste à attribuer un produit en cliquant sur le lien Modifier. Les étapes sont les mêmes que pour la création d’une vente incitative, mais vous devez vous assurer que le prix du produit est inférieur à celui du produit de vente incitative.
Ensuite, cliquez sur l’onglet Paramètres, où vous trouverez différents shortcodes qui peuvent être utilisés sur la page de l’offre de vente incitative.
Tout comme pour l’offre de vente incitative, vous pouvez également modifier le titre de l’étape, le nom de l’étape et modifier les redirections conditionnelles.
Comment personnaliser la page de remerciement de WooCommerce
La page de remerciement est l’un des éléments les plus importants de la maturation des prospects dans une boutique WooCommerce. C’est la page que les prospects, les visiteurs et les clients voient après avoir soumis un formulaire sur la page de destination.
Elle est très utile, car c’est la dernière étape du processus de conversion.
Nous vous recommandons d’y inclure un message, une offre, du contenu supplémentaire, un bouton d’appel à l’action supplémentaire ou des options sociales.
CartFlows propose différents modèles que vous pouvez utiliser ou personnaliser.
Personnaliser la page de remerciement avec CartFlows n’est pas un processus compliqué. Cliquez sur le lien Modifier, comme indiqué ci-dessous :
Cliquez sur l’onglet Design et cochez l’option Activer les paramètres de design.
Dans l’onglet En-tête, vous pouvez modifier la couleur, la famille de police et le poids de la police de l’en-tête.
Dans l’onglet Texte, vous pouvez modifier la couleur du texte, la famille de polices et la taille de police souhaitée.
L’onglet suivant est l’onglet Options avancées. Cochez la case Activer les options avancées pour afficher les options disponibles. Deux nouvelles options apparaissent, vous permettant de modifier la largeur du conteneur et la couleur d’arrière-plan de la section.
Vous pouvez également choisir l’un des modèles prêts à l’emploi et les personnaliser à l’aide d’un constructeur de pages ou de l’éditeur WordPress.
Comment personnaliser la page de paiement de WooCommerce sans plugin
WooCommerce est flexible et utilisable par des personnes de tout niveau d’expérience. Si vous êtes à l’aise avec l’édition de code, vous pouvez facilement personnaliser la page de paiement.
Pour accéder à la vue du code lorsque vous êtes sur la page de paiement, faites un clic droit n’importe où sur la page et cliquez sur inspecter.
La page de paiement est la dernière étape d’une commande, au cours de laquelle vous devez saisir les informations relatives à l’expédition et à la facturation.
Vous pouvez également cliquer sur F12 pour lancer l’inspecteur du navigateur dans les navigateurs populaires comme Chrome. Les modifications que vous apportez ici ne seront pas enregistrées et seront perdues lorsque la page sera actualisée.
N’oubliez pas de toujours disposer d’une sauvegarde afin de pouvoir revenir à votre version par défaut en cas de problème. Nous vous recommandons d’utiliser un plugin de sauvegarde WordPress.
Tout d’abord, nous allons examiner les balises primaires, y compris les classes et les ID, qui peuvent être utilisées pour personnaliser le design de la page de paiement :
<body class=”woocommerce-checkout”>
<div class=”woocommerce”>
<form class=”woocommerce-checkout”>
<div id=”customer_details” 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 id=”order_review” class=”woocommerce-checkout-review-order”>
<table class=”woocommerce-checkout-review-order-table”>
<div id=”payment”>
<ul class=”wc_payment_methods payment_methods methods”>
<div class=”form-row place-order”>Vous pouvez également supprimer des éléments de la page de paiement à l’aide de crochets d’action.
Une action est une fonction du code WordPress qui est exécutée à certains moments au cœur de votre site. Il existe de nombreuses actions prédéfinies dans WordPress et WooCommerce qui permettent aux développeurs d’ajouter du code personnalisé. Cela vous permet d’étendre WordPress ou tout autre plugin comme WooCommerce.
D’autre part, les crochets sont des fonctions qui peuvent être appliquées aux actions ou aux filtres. Les filtres permettent de modifier les fonctions.
La page de paiement comporte 9 crochets d’action :
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing
- woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- woocommerce_checkout_after_order_review
- woocommerce_after_checkout_form
Il y a 7 crochets supplémentaires disponibles. Cela dépend de votre mise en page :
- woocommerce_checkout_before_terms_and_conditions
- woocommerce_checkout_after_terms_and_conditions
- woocommerce_before_checkout_billing_form
- woocommerce_before_checkout_registration_form
- woocommerce_after_checkout_registration_form
- woocommerce_before_checkout_shipping_form
- woocommerce_after_checkout_shipping_form
Personnalisons maintenant la page de paiement sans plugin.
Modifier la couleur d’arrière-plan des champs et leur donner des coins arrondis
Ajoutez l’extrait de code suivant dans la section Additional CSS.
Pour localiser cette section :
- Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu’utilisateur administrateur.
- Cliquez sur Appearance Menu > Customize dans le menu du tableau de bord. Cela lancera l’interface du personnalisateur de thème de WordPress.
- Cliquez sur l’onglet Additional CSS dans le panneau de gauche.
- Une nouvelle section s’ouvre, dans laquelle vous pouvez ajouter des feuilles de style CSS personnalisées, avec un aperçu en direct sur la droite.
Ajoutez le code CSS suivant :
input[type="text"] {
border-radius: 10px !important;
background-color: yellow !important;
}Voici le résultat :
Supprimer un champ de paiement :
L’extrait de code suivant supprime tous les champs de la page de paiement. N’incluez que les champs que vous souhaitez supprimer.
Copiez et collez l’extrait de code suivant dans le fichier functions.php de votre thème enfant :
/**
Remove all fields on the checkout page
**/
function wpastra_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', 'wpastra_remove_checkout_fields' );Vous remarquerez que le champ “pays” est obligatoire. Si vous supprimez ce champ, les commandes passées dans votre boutique ne seront pas exécutées. Un message d’erreur s’affichera : “Veuillez saisir une adresse pour continuer”.
Voici le résultat :
Rendre un champ obligatoire non obligatoire
Copiez et collez cet extrait de code dans le fichier functions.php de votre thème enfant avant le code de fermeture :
add_filter('woocommerce_checkout_fields', 'wpchanger_override_checkout_fields');
function wpchanger_override_checkout_fields($fields)
{
unset($fields['billing']['billing_address_2']);
$fields['billing']['billing_company']['label'] = 'Business Name';
return $fields;
}L’extrait de code ci-dessus rend le champ téléphone facultatif.
Voici le résultat :
Modifier les étiquettes des champs de saisie
Copiez et collez cet extrait de code dans le fichier functions.php de votre thème enfant :
add_filter('woocommerce_checkout_fields', 'wpastra_override_checkout_fields');
function wpastra_override_checkout_fields($fields)
{
unset($fields['billing']['billing_address_2']);
$fields['billing']['billing_company']['label'] = 'Business Name';
return $fields;
}L’extrait de code ci-dessus remplace l’étiquette de saisie “Nom de la société” par “Nom de l’entreprise”.
Voici le résultat :
Plugins pour personnaliser la page de paiement de WooCommerce
Checkout Manager for WooCommerce
Checkout Manager for WooCommerce est un plugin freemium qui vous permet de personnaliser les champs de la page de paiement.
Le plugin a plus de 80 000 installations actives sur le dépôt WordPress.
Vous pouvez ajouter des champs personnalisés à votre page de paiement et personnaliser les champs existants selon vos besoins. Le plugin comprend également une fonctionnalité unique qui permet à des rôles d’utilisateurs spécifiques d’afficher ou de masquer des champs sur la page de paiement.
Le plugin vous permet d’afficher ou de masquer des champs lorsque certaines conditions sont remplies. Par exemple, des champs spécifiques peuvent apparaître ou disparaître en fonction de la catégorie ou du produit ajouté au panier. Si votre boutique vend des produits virtuels, il n’est pas nécessaire d’afficher des champs dans la section relative à l’adresse de livraison.
Il permet également aux clients de votre boutique de télécharger des fichiers. Les données collectées peuvent être exportées ou importées si nécessaire.
Le prix de la version premium commence à 19 $ pour une licence de site unique.
Voici quelques fonctionnalités principales :
- Il vous permet de supprimer les champs inutiles de la caisse, pour un processus de paiement plus rapide
- Il vous permet d’ajouter des champs conditionnels. Cela vous permet de modifier l’apparence et le comportement du champ en fonction de certaines conditions lors de la visualisation du contenu.
- Il vous permet d’éditer les fichiers téléchargés directement sur le tableau de bord pour gagner du temps.
Checkout Field Editor (Checkout Manager) for WooCommerce
Checkout Field Editor (Checkout Manager) pour WooCommerce est un plugin populaire qui offre des options pour personnaliser les champs de la page de paiement. Il vous permet d’ajouter, de supprimer et de réorganiser les champs avec facilité.
Le plugin compte plus de 300 000 installations actives.
Il comprend différents types de champs que vous pouvez ajouter à la page de paiement. Dans la version gratuite, il propose des types de champs de saisie de texte et de sélection. La version premium comprend des types de champs supplémentaires.
Lorsque vous créez de nouveaux champs, vous pouvez définir si les détails soumis seront affichés dans les notifications par courrier électronique ou dans les détails de la commande.
Vous pouvez supprimer définitivement un champ ou le désactiver pour une période donnée.
Le plugin comprend également une option permettant de réorganiser l’ordre par défaut des champs sur la page de paiement.
La version de base est gratuite, mais les meilleures fonctionnalités se trouvent dans la version premium. Elle est proposée au prix de 39 $ pour une licence de site unique.
Voici quelques fonctionnalités :
- Il offre 17 types de champs différents qui vous permettent de personnaliser les champs de la page de paiement
- Il comprend des champs conditionnels. Cela vous permet de modifier l’apparence et le comportement du champ en fonction de certaines conditions lors de l’affichage du contenu.
- Il dispose d’un validateur personnalisé pour chaque champ, ce qui permet aux clients d’apporter facilement des modifications en cas d’erreur.
- Il vous permet d’ajouter une nouvelle section avec des champs supplémentaires si vous avez besoin de recueillir des informations supplémentaires.
WooCommerce Multi-Step Checkout
Si vous cherchez un plugin pour diviser le processus de paiement, WooCommerce Multi-Step Checkout est l’une des solutions que nous recommandons.
Il divise une page de paiement unique en plusieurs petites étapes et fournit un indicateur de progression en haut de la page. Les indicateurs de progression fournissent des indications visuelles afin que les acheteurs sachent exactement où ils en sont dans le processus de paiement et combien il leur reste à faire pour terminer leur achat.
Cela crée une expérience utilisateur riche pour les acheteurs dans votre magasin et augmente l’engagement des répondants.
Ce plugin a plus de 10 000 installations actives sur le dépôt WordPress et est régulièrement mis à jour.
Les clients sauront exactement où ils en sont dans le processus de paiement en vérifiant l’indicateur de progression. Cela élimine l’inquiétude que cela prenne plus de temps et assure aux visiteurs qu’ils ont presque terminé.
WooCommerce Multi-Step Checkout dispose également d’un design intuitif que les clients apprécieront.
Voici quelques fonctionnalités :
- Il dispose d’un design responsive qui garantit que l’indicateur de progression s’affiche bien sur n’importe quel appareil
- Il vous permet d’hériter du design des boutons de formulaire de votre thème afin qu’il s’intègre parfaitement à votre site.
- Il inclut une barre d’indicateur de progression cliquable qui peut vous ramener à l’étape précédente ou suivante.
Flexible Checkout Fields for WooCommerce
Flexible Checkout Fields for WooCommerce est un plugin puissant qui vous permet de personnaliser complètement la page de paiement de votre boutique WooCommerce.
Il a plus de 70 000 installations actives.
Le plugin s’intègre parfaitement à WordPress et WooCommerce et vous permet d’ajouter, d’éditer ou de supprimer des champs dans le flux de paiement.
La version gratuite vous permet de modifier et de mettre à jour jusqu’à 12 types de champs différents, tandis que la version pro en autorise 21 et inclut d’autres fonctionnalités puissantes telles que l’ajout de sections personnalisées et de champs conditionnels.
Son prix commence à 59 $ pour une licence de site unique.
Voici quelques-unes de ses fonctionnalités :
- Il vous permet de réorganiser facilement les champs à l’aide d’un éditeur par glisser-déposer, ce qui vous fait gagner du temps.
- Il vous permet d’ajouter des feuilles de style CSS personnalisées pour styliser les champs nouveaux ou existants.
- Il est compatible avec WPML, ce qui vous permet d’utiliser ce plugin dans plusieurs langues.
Comment créer une caisse WooCommerce à page unique
Prêt à améliorer votre expérience avec WooCommerce ? Créons une page de paiement aussi courte que possible.
Une page de paiement unique permet aux clients d’effectuer le paiement sur une seule page en utilisant le moins d’informations possible.
C’est quelque chose que SureCart fait par défaut.
Si vous souhaitez réaliser quelque chose de similaire dans WooCommerce, vous aurez besoin d’une extension premium appelée WooCommerce One Page Checkout Extension.
Une fois installée, vous devrez activer cette fonctionnalité pour le produit avec lequel vous souhaitez l’utiliser.
La page du produit affichera la commande sur la même page afin que le client puisse effectuer l’achat directement à partir de cette page.
Exemple de paiement en une page pour WooCommerce
Si vous souhaitez afficher la caisse en une page à un endroit spécifique, ou montrer plus de produits, vous devrez utiliser le shortcode suivant :
[woocommerce_one_page_checkout product_ids=“XXXX,YYYY”]
Où XXXX et YYYY sont les ID des produits que vous souhaitez afficher.
- Note : vous pouvez choisir le modèle de page de paiement de WooCommerce en ajoutant le code suivant au shortcode : template=””
Attention cependant. Si vous avez des produits avec de nombreuses variations, ils seront tous affichés avec le shortcode par défaut !
Pour éviter cela, ajoutez le shortcode suivant : template=”product-single”.
Vous pouvez également construire une caisse WooCommerce à une page avec eEementor et CartFlows.
Bonus : Quelques plugins WooCommerce recommandés pour votre site web
Voici quelques plugins WooCommerce essentiels que nous recommandons pour optimiser encore plus votre boutique WooCommerce :
WooCommerce Abandoned Cart Recovery
WooCommerce Abandoned Cart Recovery est un plugin gratuit qui vous permet d’envoyer des e-mails de récupération des paniers abandonnés et de stimuler la conversion.
Le plugin capture les emails des acheteurs et leur envoie un rappel s’ils ne terminent pas leur commande. Vous pouvez programmer automatiquement les e-mails de suivi afin de ne pas oublier d’envoyer l’e-mail.
Le plugin comprend des modèles prédéfinis qui ont été testés en termes de conversion pour vous aider à augmenter vos ventes. Vous pouvez facilement les personnaliser pour les adapter à votre marque.
Vous pouvez également créer vos propres e-mails à partir de zéro. Vous pouvez également inclure des incitations telles que des codes de réduction pour encourager les acheteurs à finaliser leur achat.
Le plugin vous permet de personnaliser les e-mails à l’aide de shortcodes. Par exemple, vous pouvez vous adresser aux acheteurs par leur nom pour augmenter le taux de clics.
Vous pouvez également envoyer à chaque acheteur un lien de paiement unique qui le ramène exactement là où il s’est arrêté.
Le plugin cesse d’envoyer des courriels si l’utilisateur termine son achat.
Voici quelques-unes de ses fonctionnalités :
- Il vous permet d’envoyer des courriels personnalisés afin d’augmenter le taux de clics.
- Il inclut un support webhook qui vous permet d’intégrer des outils d’automatisation comme Campaign Monster
- Il inclut des liens de paiement uniques pour chaque acheteur qui les emmènent exactement là où ils se sont arrêtés.
WooCommerce Menu Cart
WooCommerce Menu Cart est un plugin léger qui vous permet d’afficher un bouton de panier sur la barre de navigation.
Ce plugin a plus de 100 000 installations actives.
La version pro est proposée au prix de 29 €. Cette version inclut plus de dix icônes de panier et un flyout de détails de panier entièrement fonctionnel.
Il vous offre la possibilité d’ajouter un panier, d’ajouter un flyout pour des menus illimités et d’ajouter des classes CSS personnalisées.
Voici quelques-unes de ses fonctionnalités :
- Il vous permet d’afficher une icône de panier, ou seulement les articles/prix sans toucher à aucun morceau de code.
- Il vous permet d’afficher uniquement les articles, les prix ou les deux.
- Il vous permet d’afficher toujours, ou seulement lorsqu’il y a des articles dans le panier.
- Flotter à gauche, flotter à droite ou utiliser les paramètres par défaut de votre menu
- Il vous permet d’ajouter un style CSS personnalisé
- Il offre un support exceptionnel pour les utilisateurs premium
Conclusion
La version par défaut de WooCommerce n’offre pas la meilleure expérience de paiement possible.
En fonction du changement que vous souhaitez apporter, de votre niveau d’expérience et des produits que vous vendez, vous pouvez optimiser le flux de paiement en utilisant des plugins WooCommerce, des modèles de page ou du code personnalisé.
C’est quelque chose qui doit être fait avec beaucoup de soin, car c’est la dernière étape du processus d’achat, mais cela vaut la peine de le faire pour minimiser les paniers abandonnés et maximiser la conversion.
Avec l’optimisation de la page de paiement, vous devriez également optimiser et concevoir vos pages de produits WooCommerce pour qu’elles se distinguent de la foule.
Avez-vous des questions sur la façon dont vous pouvez améliorer votre flux de paiement ? Quelles sont les stratégies qui vous ont permis d’offrir une expérience d’achat unique à votre boutique ?
N’hésitez pas à nous faire part de vos commentaires dans la section ci-dessous !
