Comment créer une page de paiement WordPress personnalisée (sans code) 

Si vous avez déjà perdu une vente parce que votre page de paiement était lente, confuse ou manquait de l'option de paiement appropriée, vous savez à quel point c'est frustrant. Une page de paiement personnalisée dans WordPress résout ce problème et offre aux acheteurs un moyen fluide et fiable de payer.

Environ 70 % des acheteurs abandonnent leur panier avant de payer, selon la moyenne mobile de l'Institut Baymard. Une caisse que vous contrôlez est la solution, que vous construisiez une nouvelle page à partir de zéro ou que vous personnalisiez la page de paiement WooCommerce que vous avez déjà.

Je vais d'abord vous montrer les paramètres gratuits de WooCommerce. Ensuite, je vous guiderai dans la création d'une page de paiement entièrement personnalisée avec SeedProd, en environ 15 minutes, sans toucher au code.

Comment personnaliser la page de paiement WooCommerce sans plugin

WooCommerce inclut une poignée de paramètres de paiement gratuits, et ils valent la peine d'être vérifiés avant d'installer quoi que ce soit.

Voici ce que vous pouvez changer sans rien installer :

• Paiement invité : permettez aux clients de payer sans créer de compte (WooCommerce » Paramètres » Comptes et confidentialité)
• Champ coupon : affichez ou masquez la boîte de code promo à la caisse (WooCommerce » Paramètres » Général)
• Page de paiement : choisissez quelle page sert de caisse (WooCommerce » Paramètres » Avancé » Configuration de la page)
• Bases des champs : certains champs d'adresse peuvent être activés ou désactivés, mais l'ajout ou la suppression de champs nécessite un plugin

Ces paramètres modifient le fonctionnement de votre caisse, pas son apparence. La mise en page, les couleurs et la marque proviennent toutes du modèle de votre thème, et WooCommerce ne vous fournit pas d'éditeur visuel pour cela.

Dans le reste de ce guide, je vous montrerai comment remplacer la caisse par défaut par une page que vous concevez vous-même.

Comment créer une page de paiement dans WordPress (sans code)

Pour ce tutoriel, nous utiliserons SeedProd pour créer une page de paiement WordPress. SeedProd est le meilleur constructeur de sites Web WordPress en glisser-déposer, utilisé par plus d'un million de sites Web.

Avec SeedProd, vous pouvez créer n'importe quelle page de destination WordPress sans écrire une seule ligne de code. Son intégration WooCommerce couvre le reste de votre boutique également, vous pouvez donc personnaliser votre page panier et votre page boutique de la même manière.

Cela signifie qu'au lieu d'utiliser le paiement en une page par défaut de WooCommerce, vous pouvez créer une page entièrement personnalisée optimisée pour les conversions. Et avant de lancer, vous pouvez créer une page "Bientôt disponible" WooCommerce pour générer des prospects.

Donc, si vous voulez créer une page de paiement dans WordPress pour débutants, voici comment le faire avec SeedProd.

Tutoriel vidéo

Étape 1 : Installer et activer SeedProd

La première étape consiste à installer et activer le plugin SeedProd.

Si vous avez besoin d'aide pour cette étape, suivez ce guide étape par étape sur l'installation d'un plugin WordPress.

Après avoir activé SeedProd, allez dans SeedProd » Paramètres et entrez votre clé de licence.

Ces informations sont faciles à trouver dans la section Téléchargements de votre compte sur le site web SeedProd.

Étape 2 : Créer une nouvelle page

Après avoir activé votre clé de licence, accédez à SeedProd » Pages depuis votre tableau de bord WordPress. Sur cette page, vous verrez un aperçu des différents modes de page de SeedProd et une zone pour ajouter de nouvelles pages de destination.

Avec les modes de page, vous pouvez instantanément :

• Créer et activer une page « bientôt disponible »
• Activer le mode maintenance
• Créer une page 404 personnalisée
• Configurer une page de connexion WordPress personnalisée
• Créer une page de destination WordPress autonome

Chaque mode ajoute des fonctionnalités pour lesquelles votre site aurait autrement besoin d'un plugin WordPress distinct.

Pour ce guide, nous voulons créer une page de paiement WordPress autonome. Pour ce faire, cliquez sur le bouton Ajouter une nouvelle page de destination.

Sur l'écran suivant, vous pouvez choisir parmi des centaines de modèles de pages de destination réactifs.

Vous pouvez filtrer les designs en cliquant sur les onglets en haut :

• Tout
• Bientôt disponible
• Mode Maintenance
• Page 404
• Ventes
• Webinaire
• Page de capture de prospects
• Connexion

La meilleure approche est de rechercher un modèle qui correspond étroitement au design que vous souhaitez. Et s'il ne correspond pas parfaitement, vous pouvez le personnaliser à l'étape suivante sans PHP, CSS ou shortcodes.

Pour ce tutoriel, nous utiliserons le modèle Vierge pour vous montrer à quel point il est facile de créer votre page de paiement WordPress sans engager de développeur.

Pour choisir le modèle, survolez la miniature avec votre souris et cliquez sur l'icône de coche orange.

Ensuite, une fenêtre contextuelle apparaît vous demandant d'entrer un nom et une URL pour votre page.

Cliquez ensuite sur le bouton Enregistrer et commencer à modifier la page.

Étape 3 : Ajouter du contenu à votre page de paiement

Après avoir importé votre modèle, il s'ouvrira dans le constructeur de page visuel de SeedProd et ressemblera à l'exemple ci-dessous.

Dans mes tests GTmetrix, une page construite avec SeedProd s'est chargée en 556 ms, contre 1 882 ms pour la même page construite avec Elementor. Une page de paiement plus rapide signifie moins d'abandons avant le paiement.

Vous verrez un aperçu en direct de votre page sur la droite. Et sur la gauche se trouve un panneau d'options où vous pouvez choisir différents blocs, sections et personnaliser votre design.

En-tête de la page de paiement

Tout d'abord, nous allons ajouter un en-tête à votre page de paiement afin que vous puissiez maintenir la cohérence de votre marque sur votre site web.

Pour ce faire, cliquez sur l'onglet Sections dans le panneau de gauche et cliquez sur la catégorie En-tête. Ensuite, survolez n'importe quelle section d'en-tête avec votre souris et cliquez sur l'icône plus pour l'ajouter à votre page.

Ensuite, cliquez sur la zone d'image de votre nouvelle section d'en-tête. Ici, vous pouvez télécharger une image depuis votre ordinateur ou votre médiathèque WordPress pour l'utiliser comme logo de votre site.

Nous vous recommandons également de supprimer le menu de navigation de votre page de paiement. Moins de voies de sortie signifient plus de paiements complétés.

Pour supprimer le menu de navigation, survolez le bloc de navigation avec votre souris et cliquez sur l'icône de la corbeille.

Personnalisons maintenant le bouton d’appel à l’action (CTA). Au lieu d’envoyer les utilisateurs hors de la page, vous pouvez utiliser ce bouton pour leur rappeler le contenu de leur panier.

Alors cliquez sur le bouton CTA pour ouvrir les paramètres à gauche et remplacer le texte par défaut. Dans notre cas, nous l'avons changé en « Voir le panier ».

Vous pouvez ensuite ajouter l’URL de votre page de panier WooCommerce dans le champ Lien. Si vous le souhaitez, vous pouvez rendre le lien nofollow ou l’ouvrir dans un nouvel onglet en sélectionnant la case à cocher.

Bloc de paiement WooCommerce

Avec votre image de marque en place, il est temps d'ajouter le formulaire de paiement lui-même. Tout d'abord, faites glisser un nouveau bloc Colonne sur votre page.

Ensuite, choisissez votre mise en page préférée.

Ensuite, faites défiler le panneau de gauche jusqu'à la section WooCommerce. De là, choisissez le bloc Paiement et faites-le glisser sur votre page.

Cliquez n'importe où sur le bloc de paiement pour ouvrir ses paramètres.

L'onglet Style vous donne un contrôle précis sur l'apparence du formulaire :

• Mise en page : un formulaire de paiement à 1 ou 2 colonnes
• En-tête : polices et couleurs pour les titres de paiement
• Champs : style de l'arrière-plan, du texte, de la bordure et de l'étiquette, plus espacement des lignes
• Bouton : style (plat, 2D, vintage, fantôme ou lien), couleur et rayon de la bordure
• Alertes : couleurs de surlignage pour les messages d'information, d'erreur et de succès
• Panier : bordures, arrière-plans, polices et style de l'en-tête
• Section de paiement : arrière-plan, couleur du texte et famille de polices

Pour un démarrage plus rapide, cliquez plutôt sur l'onglet Modèles. Il contient des styles préfabriqués pour vos champs de paiement, et un clic les applique à l'ensemble du formulaire.

N'oubliez pas de cliquer sur Enregistrer pour stocker vos modifications.

Modification des champs apparaissant à la caisse

Les paramètres du bloc de paiement contrôlent l'apparence de votre formulaire, pas les champs qu'il affiche. WooCommerce décide des champs, vous ne pouvez donc pas supprimer le nom de l'entreprise ni réorganiser le formulaire depuis le panneau de SeedProd.

Pour ajouter, supprimer ou réorganiser les champs de paiement, utilisez un plugin d'édition de champs dédié comme Checkout Field Editor for WooCommerce. La version gratuite gère les bases.

Attention : les extraits PHP qui modifient les champs de paiement ne fonctionnent que sur le paiement par shortcode classique. Le nouveau paiement par bloc de WooCommerce ignore silencieusement ces filtres, c'est pourquoi les anciens tutoriels de code cessent souvent de fonctionner.

Produits populaires WooCommerce

Si vous souhaitez augmenter vos ventes, vous pouvez ajouter des produits populaires à votre page de paiement WordPress. Cela peut encourager les clients à ajouter plus d’articles à leur panier avant de payer.

Pour ajouter des produits populaires, choisissez le bloc Produits les plus vendus dans la section WooCommerce et faites-le glisser sur votre page.

À partir de là, vous pouvez modifier le nombre de colonnes, ajouter la pagination et ajuster d’autres paramètres à partir des menus déroulants.

Ajoutez un bloc Titre au-dessus de la grille et modifiez-le pour qu'il ressemble à "Produits populaires". Ainsi, les acheteurs savent exactement ce qu'ils regardent.

Avis et témoignages

Les avis et témoignages rassurent les acheteurs sur le fait que d'autres personnes font confiance à vos produits. Cette réassurance est la plus importante au moment du paiement, juste au moment où les acheteurs ont des doutes.

Vous pouvez les ajouter avec SeedProd. Accédez aux blocs Avancé et faites glisser le bloc Témoignages sur votre page de paiement.

Dans les paramètres, vous pouvez personnaliser le bloc. Par exemple, vous pouvez ajouter une photo de témoignage ou un titre de poste et même le transformer en un carrousel déroulant avec plusieurs témoignages.

Vous pouvez également déposer un bloc d'évaluation par étoiles sous le témoignage pour une preuve sociale supplémentaire.

Badges de confiance fonctionnent de la même manière. Une icône de cadenas ou une garantie de remboursement près du bouton de paiement est un petit ajout qui peut calmer les doutes de dernière minute.

Étape 4 : Publier votre page de paiement WordPress

Une fois que vous êtes satisfait de votre page, vérifiez son apparence sur mobile. La plupart des acheteurs naviguent sur leur téléphone, donc une page de paiement qui plante sur de petits écrans vous coûte des ventes. Assurez-vous que tout est optimisé pour mobile avant de mettre en ligne.

SeedProd dispose d'un aperçu mobile intégré pour cela. Cliquez sur l'icône mobile dans la barre de navigation inférieure.

Vous verrez la page comme un acheteur mobile le ferait, et vous pourrez corriger tout ce qui semble encombré avant sa mise en ligne.

Lorsque vous êtes satisfait de l'apparence, cliquez sur la flèche déroulante à côté du bouton Enregistrer vert et cliquez sur Publier pour rendre votre page de paiement active.

Au lieu de la page de paiement par défaut de WooCommerce, vous avez maintenant une page de paiement qui vous appartient réellement.

Étape 5 : Assigner votre page de paiement à WooCommerce

La dernière étape consiste à indiquer à WooCommerce d'utiliser votre nouvelle page. C'est un paramètre dans le tableau de bord WooCommerce.

Allez dans WooCommerce » Paramètres et cliquez sur l'onglet Avancé. Ensuite, à côté de l'en-tête Page de paiement, recherchez la page que vous venez de créer.

Lorsque vous la trouvez dans la liste déroulante, cliquez dessus pour l'assigner comme page de paiement officielle. Assurez-vous de cliquer sur Enregistrer les modifications en bas de l'écran pour conserver vos paramètres.

Maintenant, lorsqu'un visiteur clique sur « Passer à la caisse », il arrivera sur la page que vous venez de construire. Cela fonctionne que votre magasin ait utilisé le bloc ou le paiement classique auparavant.

Avant de mettre en ligne, testez le paiement en utilisant le mode de test intégré de WooCommerce. Dans WooCommerce » Paramètres » Paiements, activez une passerelle de test et passez une commande test pour confirmer que tout fonctionne.

Si vos méthodes de paiement ne s'affichent pas sur la page, c'est là qu'il faut vérifier en premier. SeedProd affiche toutes les passerelles que vous avez activées, y compris Stripe, PayPal et toutes les autres que vous avez activées.

FAQ sur les pages de paiement WooCommerce

Ai-je besoin de compétences en codage pour personnaliser une page de paiement WooCommerce ?

Non. Avec le constructeur par glisser-déposer de SeedProd, vous pouvez personnaliser la page de paiement WooCommerce sans toucher au code. Modifiez la mise en page, stylisez le formulaire et ajoutez des signaux de confiance à l'aide de contrôles visuels. Pas besoin de PHP ou de CSS.

Puis-je ajouter des passerelles de paiement supplémentaires à ma page de paiement personnalisée ?

Oui. WooCommerce prend en charge plusieurs passerelles de paiement, y compris Stripe, PayPal, Apple Pay et les options de paiement échelonné. Activez-les dans WooCommerce » Paramètres » Paiements, et SeedProd les affichera automatiquement sur votre page de paiement personnalisée.

Comment faire un paiement WooCommerce en une seule page ?

Créez une page avec SeedProd qui inclut les blocs Panier et Paiement, puis attribuez-la comme page de paiement dans WooCommerce » Paramètres » Avancé. Les acheteurs voient leur panier, leurs informations de facturation et le résumé de leur commande sur une seule page sans rechargement.

Pourquoi mon code ne fonctionne-t-il pas pour personnaliser la page de paiement WooCommerce ?

Votre boutique utilise très probablement le paiement par blocs de WooCommerce, qui ignore silencieusement les filtres PHP comme woocommerce_checkout_fields. Soit revenez au paiement par shortcode classique, soit utilisez un constructeur visuel comme SeedProd qui remplace la page de paiement sans dépendre des hooks PHP.

SeedProd fonctionne-t-il avec le paiement par blocs WooCommerce ?

Oui. SeedProd crée une page de paiement personnalisée distincte, et son attribution dans les paramètres de WooCommerce remplace le type de paiement qui était actif auparavant, qu'il soit par blocs ou classique. Vous n'avez pas besoin de changer d'abord les modes de paiement de WooCommerce.

Comment puis-je améliorer les taux de conversion sur ma page de paiement ?

Gardez le formulaire simple, proposez plusieurs options de paiement et ajoutez des badges de sécurité et des témoignages clients. La suppression des menus de navigation empêche les acheteurs de quitter le site en cours de paiement. Le constructeur visuel de SeedProd permet de réaliser tous ces ajustements sans aucun code.

Comment puis-je tester mon paiement WooCommerce avant de le mettre en ligne ?

Activez une passerelle de test dans WooCommerce » Paramètres » Paiements. Stripe et PayPal proposent tous deux des modes sandbox. Passez une commande test pour confirmer que la page de paiement se charge correctement, traite les paiements et envoie les e-mails de confirmation de commande avant la mise en ligne.

Créez votre page de paiement personnalisée dans WordPress

La création d'une page de paiement personnalisée dans WordPress va au-delà du design. Elle rend le processus d'achat clair et rapide, afin que davantage d'acheteurs finalisent leurs commandes.

Avec SeedProd, vous pouvez concevoir une page de paiement qui correspond à votre marque et supprime les distractions, sans écrire de code. Et une fois en ligne, vous pouvez personnaliser votre page de remerciement WooCommerce pour proposer des ventes incitatives ou recueillir des avis après la vente.

Configurez votre page personnalisée dès aujourd'hui et transformez plus de visiteurs en clients payants.

Si vous recherchez d'autres astuces WooCommerce, consultez ces articles :

• Comment activer le mode maintenance pour les pages de boutique WooCommerce
• Comment rendre WordPress rapide
• Comment configurer le suivi des conversions WooCommerce pour votre boutique

Pendant que vous y êtes, n'oubliez pas de nous suivre sur Twitter, YouTube et Facebook pour plus de contenu utile pour développer votre entreprise.