Vous souhaitez créer une page de paiement personnalisée pour votre boutique WooCommerce ?
Imaginez que vous perdiez 7 ventes potentielles sur 10 parce que les clients sont bloqués à la caisse. C'est ce qui arrive à de nombreuses boutiques en ligne, et c'est souvent parce que leurs pages de paiement sont confuses ou difficiles à utiliser.
Mais ne vous inquiétez pas, il existe une solution simple. En améliorant votre page de paiement WooCommerce, vous pouvez transformer plus de ces presque-ventes en argent réel dans votre poche. C'est comme si vous aplanissiez les difficultés de la route pour que plus de clients puissent facilement franchir la ligne d'arrivée.
Dans ce guide, je vous montrerai exactement comment améliorer votre page de paiement, étape par étape. Et le meilleur ? Vous n'avez pas besoin de connaître un code informatique compliqué pour le faire. Je vais vous faciliter la tâche pour créer une page de paiement qui aide vos clients, et non qui les gêne.
Comment personnaliser la page de paiement de WooCommerce :
- 1. Installer et activer SeedProd
- 2. Créer une nouvelle page d'atterrissage
- 3. Ajouter le bloc de paiement à votre page
- 4. Personnalisez la conception de votre page de paiement
- 5. Configurer les paramètres de la page de paiement
- 6. Publier votre page de paiement personnalisée
- 7. Attribuer votre page de paiement dans WooCommerce
Pourquoi vous devriez personnaliser la page de paiement de WooCommerce
La page de paiement est la dernière chose que les clients voient avant de terminer leur achat. Elle peut faire la différence entre la conversion et l'abandon total de votre boutique.
C'est pourquoi il est essentiel de s'assurer que votre page de paiement WooCommerce est bien conçue et fonctionne de manière à encourager les conversions.
La page de paiement par défaut de WooCommerce est un excellent point de départ pour les petites boutiques. Elle contient tout ce dont vous avez besoin pour démarrer une boutique en ligne.
Mais au fur et à mesure que votre entreprise se développe, vous vous apercevrez que vous pouvez offrir une meilleure expérience en.. :
- Incluant votre marque personnalisée
- Ajouter des champs personnalisés à votre formulaire de paiement
- Modifier la conception et la mise en page
- Lien direct entre les produits et la page de paiement
- Modifier les étiquettes des champs de saisie et le texte des boutons
- Vendre d'autres produits ou services
Que vous souhaitiez redessiner l'intégralité de votre page de paiement WooCommerce ou faire quelques modifications mineures, il y a une chose à garder à l'esprit. Cela doit être facile !
Heureusement, la solution ci-dessous permet de personnaliser la page de paiement de WooCommerce sans effort.
Comment personnaliser la page de paiement de WooCommerce
Si vous n'avez pas le temps d'apprendre à coder ou le budget pour engager un développeur, la personnalisation de votre page de paiement peut sembler presque impossible.
Mais la vérité est que ce n'est pas le cas si l'on dispose des bons outils.
Dans le tutoriel ci-dessous, nous allons vous montrer comment personnaliser votre page de paiement WooCommerce avec SeedProd.
SeedProd est le meilleur constructeur de pages d'atterrissage WordPress avec une fonctionnalité de glisser-déposer. Il vous permet de construire et de personnaliser visuellement n'importe quelle page sur WordPress.
Cela signifie que vous pouvez utiliser l'éditeur de pages par glisser-déposer pour créer des pages personnalisées et voir les résultats en temps réel. Il n'est plus nécessaire de coder votre page manuellement, ce qui est une excellente nouvelle pour les personnes dont les compétences techniques et de conception sont limitées.
SeedProd est livré avec des centaines de modèles de pages d'atterrissage conçus par des professionnels pour vous permettre de démarrer rapidement. Vous pouvez ensuite personnaliser chaque modèle dans l'éditeur visuel en utilisant des blocs de page flexibles tels que :
- Formulaires d'optin et formulaires de connexion
- Images et vidéos
- Texte et rubriques
- Profil des médias sociaux et boutons de partage
- Formulaires de contact personnalisés avec des plugins tiers comme WPForms
- RafflePress cadeaux
- Témoignages et classement par étoiles
- Comptes à rebours et barres de progression
- Menus de navigation et accordéons
- Et plus encore.
SeedProd dispose également de blocs de pages d'atterrissage dédiés aux boutiques WooCommerce, y compris des boutons d'ajout au panier, de paiement, de panier d'achat et des grilles de produits flexibles. Cela signifie que vous pouvez facilement créer des pages de produits, de panier et de paiement polyvalentes pour votre boutique eCommerce sans faire appel à un développeur.
En gardant cela à l'esprit, voyons comment personnaliser la page de paiement de WooCommerce avec SeedProd.
1. Installer et activer SeedProd
La première étape est de démarrer avec SeedProd et de télécharger le plugin sur votre ordinateur. Pour accéder aux fonctionnalités d'intégration de WooCommerce de SeedProd, vous aurez besoin au minimum d'un plan SeedProd Pro.
Après avoir téléchargé SeedProd, vous devez installer et activer le plugin sur votre site WordPress. Vous pouvez suivre ces étapes pour installer un plugin WordPress si vous avez besoin d'aide.
Après avoir activé le plugin, vous verrez un écran de bienvenue.
L'écran vous demande d'entrer votre clé de licence SeedProd. Vous pouvez trouver votre clé en vous connectant à votre compte SeedProd et en cliquant sur le lien Voir la clé de licence, les détails et les téléchargements.
A partir de là, vous pouvez copier votre clé pour l'enregistrer dans votre presse-papiers. Collez ensuite la clé dans le champ de la clé de licence et cliquez sur le bouton Vérifier la clé.
Faites défiler la page un peu plus bas et cliquez sur le bouton Créer votre première page.
Ceci vous amène au tableau de bord de la page d'atterrissage de SeedProd. En haut de la page se trouvent 4 modes de page différents :
- Bientôt disponible
- Mode maintenance
- 404
- Connexion
Chaque mode de page vous permet d'activer des pages d'atterrissage spécifiques en un seul clic.
Par exemple, vous pouvez activer le mode "Coming Soon" pour ajouter une page de présentation de votre nouveau magasin. Vous pouvez également activer le mode Page 404 pour ajouter une page d'erreur 404 personnalisée à votre site.
Sous cette section, vous verrez une liste de toutes les autres pages que vous avez créées avec SeedProd. Puisque nous n'en avons pas encore créé, cliquez sur le bouton Créer une nouvelle page d'atterrissage pour commencer.
2. Créer une nouvelle page d'atterrissage
Après avoir cliqué sur le bouton pour créer une nouvelle page d'atterrissage, vous verrez la bibliothèque de modèles de pages d'atterrissage de SeedProd.
Vous pouvez filtrer les modèles par objectif ou par secteur d'activité en cliquant sur les onglets situés en haut de la page.
Chaque modèle est multifonctionnel. Vous pouvez donc utiliser n'importe quel modèle et le personnaliser à l'aide de l'éditeur par glisser-déposer pour qu'il ait l'aspect que vous souhaitez.
Pour ce guide, nous allons vous montrer comment créer et personnaliser votre page de paiement WooCommerce à partir de zéro en utilisant le modèle vierge. Cela vous donnera un excellent aperçu de la facilité d'utilisation de SeedProd.
Passez donc votre souris sur la vignette du modèle vierge et cliquez sur l'icône de la coche.
Ensuite, une fenêtre contextuelle apparaît, vous demandant de saisir un nom et une URL pour votre page. Vous pourrez modifier ce paramètre ultérieurement, alors donnez-lui le nom que vous souhaitez.
Cliquez maintenant sur le bouton Enregistrer et commencer à éditer la page pour lancer votre page.
Sur l'écran suivant, vous verrez l'éditeur de page d'atterrissage de SeedProd.
Il se présente sous la forme d'un simple panneau à deux volets :
- Panneau de gauche : Blocs de page et sections pour construire et personnaliser votre page
- Panneau de droite : Aperçu de l'aspect de votre page d'atterrissage en temps réel
Pour ajouter du contenu à votre page, il suffit de faire glisser un bloc de la gauche vers la droite. Nous vous montrerons comment procéder dans l'étape suivante.
3. Ajouter le bloc de paiement à votre page
Avant de commencer à personnaliser votre page de paiement WooCommerce, nous allons mettre en place une structure de base pour la page de paiement.
Dans le panneau de droite, choisissez une mise en page en cliquant sur l'une des options de colonne.
Comme vous pouvez le voir ci-dessous, il ajoute un cadre simple à votre page. C'est là que les éléments de la page que vous ajoutez seront placés.
Ensuite, vous devez ajouter votre caisse WooCommerce à votre page. Dans le panneau de gauche, descendez jusqu'à la section WooCommerce. Cliquez ensuite sur le bloc Checkout et faites-le glisser dans l'une des colonnes que vous avez créées précédemment.
Vous devriez maintenant voir votre formulaire de paiement WooCommerce dans le design de votre page d'atterrissage. Lorsque vous cliquez sur votre formulaire de paiement, vous verrez les paramètres de style du formulaire dans le panneau de gauche.
Dans cette zone, vous pouvez personnaliser votre formulaire de paiement WooCommerce :
- Mise en page sur 1 ou 2 colonnes
- Modifier les polices et les couleurs de l'en-tête
- Modification des polices, des couleurs, de l'espacement et des bordures des champs de caisse
- Modifier le style, la police et la couleur du bouton de caisse
- Ajouter une couleur d'alerte personnalisée
- Modifier le texte, les couleurs, les bordures et les polices du panier
- Ajout de polices et de couleurs personnalisées à la section des détails du paiement
Cliquez maintenant sur l'onglet Modèles, et vous verrez une variété de styles personnalisés pour vos champs de paiement. Cliquez sur n'importe quel style pour l'ajouter instantanément à votre formulaire de paiement.
Avant de continuer, cliquez sur le bouton vert Enregistrer dans le coin supérieur droit de votre écran pour sauvegarder votre progression.
4. Personnalisez la conception de votre page de paiement
Maintenant que votre page d'atterrissage ressemble à ce qu'elle devrait être, examinons d'autres façons de personnaliser votre page de paiement WooCommerce.
Ajouter un en-tête à votre page de paiement WooCommerce
Pour aider les clients à s'y retrouver, il est bon d'ajouter un en-tête à votre page de paiement. SeedProd offre un moyen facile de le faire avec Sections.
À côté du panneau des blocs, cliquez sur l'onglet Sections. Celui-ci présente plusieurs mises en page prédéfinies que vous pouvez ajouter à votre page d'un simple clic.
Par exemple, si vous cliquez sur la section En-têtes, vous verrez apparaître trois styles d'en-têtes différents. Choisissez un modèle qui vous plaît et cliquez sur l'icône plus pour l'importer dans votre création.
Par défaut, toute nouvelle section est ajoutée au bas de votre page. Pour la déplacer dans la zone d'en-tête, passez la souris dessus et cliquez sur l'icône de déplacement de la section. Faites ensuite glisser la section entière vers le haut de la page.
Ensuite, vous pouvez cliquer sur n'importe quel élément de votre section d'en-tête pour voir les options de personnalisation dans le panneau de gauche. Par exemple, en cliquant sur le bloc image dans la section de l'en-tête, vous pouvez télécharger une nouvelle image que vous utiliserez comme logo.
Vous pouvez même supprimer le bloc de boutons dans votre en-tête et le remplacer par les icônes de votre profil social.
Ajouter des produits suggérés à votre page de paiement WooCommerce
Avec la puissante intégration WooCommerce de SeedProd, il est facile de faire de la vente croisée et de promouvoir vos produits et services à partir de n'importe quelle page d'atterrissage. La gamme de blocs de grille de produits vous permet d'afficher :
- Produits récents
- Produits en vente
- Meilleures ventes
- Produits vedettes
- Produits les mieux notés
Il vous suffit de sélectionner le bloc Grille de produits et de le faire glisser sur votre page. Vous pouvez ensuite cliquer sur le bloc pour afficher les paramètres dans le panneau de gauche.
Dans ce panneau, vous pouvez choisir le nombre de colonnes de produits à afficher et ajouter une pagination à votre grille de produits. Vous pouvez également filtrer les produits que les visiteurs voient en choisissant un type de requête dans le menu déroulant.
Ensuite, vous pouvez définir l'ordre des produits :
- Date
- ID
- Commande de menu
- Popularité
- Au hasard
- Evaluation
- Titre
Vous pouvez également choisir de les afficher par ordre croissant ou décroissant.
Ajouter des témoignages à votre page de paiement
Les témoignages et les évaluations par étoiles sont un autre excellent moyen d'ajouter de la confiance et de la crédibilité à votre page de paiement. Si les clients potentiels voient que des personnes évaluent positivement vos produits, ils seront plus enclins à terminer le processus de paiement au lieu d'abandonner leur panier.
Pour ajouter des témoignages de clients à votre page de paiement WooCommerce, faites glisser le bloc Testimonial depuis le panneau de gauche et déposez-le sur votre page. Ensuite, vous pouvez cliquer sur le bloc pour voir les paramètres et ajouter vos témoignages de clients.
Vous pouvez inclure autant de témoignages que vous le souhaitez et même les présenter sous la forme d'un carrousel de témoignages.
Paramètres de personnalisation globale
Les paramètres de personnalisation globale de SeedProd vous permettent de modifier l'aspect général de votre page de paiement WooCommerce.
Cliquez sur l'icône en forme de roue dentée dans le coin inférieur gauche de votre écran. Un panneau de paramètres globaux s'affiche pour les polices, les couleurs, l'arrière-plan et les feuilles de style CSS personnalisées.
Polices de caractères
Le développement de la rubrique Police vous permet de modifier les polices et les graisses de l'en-tête et du corps du texte. Il vous suffit de sélectionner une police Google dans le menu déroulant.
Vous pouvez également cliquer sur le bouton Thèmes de polices pour voir des exemples de combinaisons de polices. Il ne vous reste plus qu'à les appliquer à votre page.
Couleurs
La section Couleurs est similaire. Cliquez sur n'importe quelle couleur pour afficher une pipette et sélectionner des couleurs individuelles pour les titres, le texte, les boutons, etc.
Vous pouvez également cliquer sur le bouton Palettes de couleurs pour choisir parmi plus de 20 schémas de couleurs prédéfinis.
Contexte
Dans la section Arrière-plan , vous pouvez modifier la couleur, le dégradé et l'image de votre arrière-plan. Vous pouvez même ajouter un arrière-plan vidéo ou un diaporama pleine largeur.
CSS personnalisé
Enfin, dans la section Custom CSS, vous pouvez ajouter un code personnalisé pour personnaliser encore plus la page de paiement de WooCommerce.
Lorsque vous êtes satisfait de l'aspect des choses, cliquez sur le bouton Enregistrer.
5. Configurer les paramètres de la page de paiement
Une fois vos personnalisations en place, examinons quelques autres paramètres que vous pouvez modifier sur votre page de paiement.
Connecter votre liste d'adresses électroniques
Tout d'abord, il y a les paramètres de marketing par email. SeedProd vous permet de connecter facilement votre page d'atterrissage à votre liste d'emails.
Cliquez sur Connecter en haut de l'écran, et vous verrez apparaître un large éventail de services de marketing par courriel populaires. Ainsi, si vous souhaitez demander aux utilisateurs de s'abonner à votre lettre d'information sur votre page de paiement, utilisez ce panneau pour relier votre service de marketing par courriel.
Il vous suffit de choisir votre fournisseur préféré et de suivre les étapes de notre documentation sur l'intégration de la messagerie électronique pour la mettre en place.
Sur le même écran, vous pouvez relier votre page de paiement à des milliers d'applications via Zapier, surveiller les performances de votre site avec Google Analytics et le protéger contre le spam avec Recaptcha.
Configuration des paramètres de la page
Après avoir connecté votre liste d'emails, cliquez sur l'onglet Paramètres de la page pour voir les autres paramètres que vous pouvez configurer dans SeedProd. Il y a généralement 5 sections sur la page des paramètres, mais cela dépend du type de page que vous construisez et de votre plan SeedProd.
Paramètres généraux
Les paramètres généraux vous permettent de modifier le nom et l'URL de la page de paiement de WooCommerce. Vous pouvez également basculer entre publié et brouillon.
Si vous souhaitez éviter tout conflit entre les plugins et accélérer votre page, vous pouvez activer le mode d'isolation. Ce mode empêche certains scripts d'en-tête et de pied de page de s'exécuter et d'interférer avec les performances de votre page.
Référencement et analyse
Sous l'onglet SEO, vous pouvez utiliser un plugin WordPress SEO pour configurer la balise de titre de votre page d'atterrissage, la méta description, etc. L'un des meilleurs plugins pour cela est All In One SEO.
Il en va de même pour l'onglet Analytics. Ici, vous pouvez connecter votre plugin Google Analytics préféré et surveiller les performances de votre page d'atterrissage. Pourquoi ne pas essayer MonsterInsights pour Google Analytics?
Si vous souhaitez plus de détails, vous pouvez toujours consulter notre avis sur MonsterInsights.
Scripts
Dans la zone Scripts, vous pouvez ajouter du code à l'en-tête, au corps et au pied de page de votre site. Il peut s'agir de cookies de suivi, d'un pixel de suivi Facebook ou même d'un script d'analyse.
Domaine personnalisé
Si vous êtes un utilisateur du Plan Pro de SeedProd, vous pouvez donner à n'importe quelle page d'atterrissage un domaine personnalisé qui n'est pas connecté à votre site web existant.
Par exemple, si vous souhaitez lancer un nouveau site web et que vous ne l'avez pas encore mis en place, vous pouvez créer une page "coming soon" dans SeedProd sur votre site web existant et la faire pointer vers votre nouveau site.
Grâce à cette tactique, vous pouvez ajouter de nouveaux abonnés à la liste de votre futur site web sans avoir à installer une nouvelle version de WordPress.
Après avoir configuré vos paramètres, enregistrez vos modifications et revenez à l'onglet Conception.
6. Publier votre page de paiement personnalisée
Avant de mettre en ligne votre page de paiement, il est conseillé de la tester sur des appareils mobiles. Si votre page de paiement n'est pas adaptée aux appareils mobiles, elle ne s'affichera pas et ne fonctionnera pas aussi bien sur les petits écrans tactiles tels que les tablettes et les smartphones.
Cela peut même amener les utilisateurs à abandonner leur panier par frustration.
La bonne nouvelle, c'est que SeedProd dispose d'une option intégrée de prévisualisation mobile qui vous permet de vérifier que votre page est adaptée aux mobiles. Il vous suffit de cliquer sur l'icône mobile en bas de votre écran.
Vous pouvez maintenant voir comment se présente votre page de paiement sur mobile et modifier tout ce qui ne se présente pas ou ne fonctionne pas correctement.
Lorsque tout semble parfait, il est temps de publier. Cliquez sur la flèche vers le bas à côté du bouton vert Enregistrer et cliquez sur Publier.
Vous pouvez maintenant visiter la page pour le voir en action.
Bon travail ! Vous avez maintenant une superbe page de paiement WooCommerce personnalisée !
7. Attribuer votre page de paiement dans WooCommerce
Il reste encore une étape à franchir avant que votre nouvelle page de paiement ne soit prête à recevoir des commandes. Vous devez la définir comme page de paiement par défaut dans WooCommerce.
Pour ce faire, accédez à WooCommerce " Paramètres et cliquez sur l'onglet Avancé. Ensuite, allez dans la rubrique Page de paiement , et choisissez la page que vous venez d'afficher dans le menu déroulant.
N'oubliez pas de cliquer sur le bouton Enregistrer les modifications pour enregistrer vos paramètres.
Et c'est tout !
Vous savez maintenant comment personnaliser la page de paiement de WooCommerce avec le constructeur de pages d'atterrissage de SeedProd. L'intégration de WooCommerce dans SeedProd rend le contrôle du design de votre boutique en ligne très facile.
Non seulement le plugin est rapide et sans encombrement, mais il est également si facile à utiliser que même les débutants peuvent créer une boutique personnalisée sans faire appel à un développeur.
Pourquoi ne pas l'essayer vous-même ?
Pendant que vous êtes ici, les guides suivants sur WooCommerce pourraient vous être utiles :
- Comment personnaliser l'onglet Informations complémentaires de WooCommerce
- Comment ajouter un bouton "Voir le panier" dans WooCommerce
- Comment changer le titre de la page de la boutique dans WooCommerce
- Comment créer une superbe galerie d'images de produits dans WooCommerce
- Comment ajouter un classement par étoiles aux pages produits de WooCommerce
- Comment afficher les produits apparentés dans WooCommerce
- Comment afficher les catégories et les étiquettes de produits dans WooCommerce
- Comment obtenir et afficher les descriptions de produits dans WooCommerce
- Comment afficher les produits vedettes dans WooCommerce
- Comment réparer le dysfonctionnement de l'affichage du panier dans WooCommerce ?
- Comment personnaliser le bouton "Ajouter au panier" de WooCommerce
- Comment ajouter une icône de panier d'achat WooCommerce dans les menus
- Comment personnaliser les pages de catégories de produits dans WooCommerce
- Comment ajouter une section WooCommerce pour les nouveaux produits sur WordPress
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.
Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.
