Le commerce électronique est désormais plus compétitif que jamais. La concurrence s'accroît car de nouveaux sites arrivent régulièrement. De nombreux entrepreneurs en commerce électronique ont des difficultés avec leurs ventes. Toi aussi?
Une étude récente indique que 60% d’abandon de panier est normal de nos jours. Ainsi, vous amenez le client potentiel sur votre site WordPress, vous le laissez choisir le produit, vous ajoutez une page de panier, puis vous obtenez le rebond.
Ne pas obtenir de ventes après que quelqu'un ait pris la décision d'ajouter des produits à son panier est vraiment décourageant. Cependant, vous pouvez résoudre ce problème si vous personnalisez la page de paiement WooCommerce.
In this step‑by‑step guide, you’ll learn how to customize or edit WooCommerce checkout page with Elementor using ShopEngine. This method lets you visually customize the checkout layout, fields, and design without writing any code. Here you are going to learn how to do WooCommerce checkout page customization with the WooCommerce checkout template.
How to Customize the WooCommerce Checkout Page
To fully redesign and personalize your checkout layout without writing custom code, you can use the Moteur de boutique plugin to build and activate a dedicated checkout page template.
✅ Step 1: Install and Set Up Your WooCommerce Builder
Ensure you have your page builder (Elementor or Gutenberg) and the ShopEngine plugin active on your WordPress site.
✅ Step 2: Create a WooCommerce Checkout Template
Aller vers ShopEngine > Modèles de générateur (or Modèles) in your dashboard and click Ajouter un nouveau. Set the template name, choose Vérifier as the template type, toggle the Active (Default) button to “Yes” to override the default WooCommerce layout, and choose a blank canvas or a pre-designed sample template.
✅ Step 3: Drag and Drop Essential Checkout Widgets
Launch the page editor (e.g., Modifier avec Elementor). Search for and place the required checkout widgets onto your page structure:
- Facturation du formulaire de paiement : Where customers enter billing info.
- Checkout Review Order: Displays an itemized receipt of their order.
- Paiement à la caisse : Displays active credit card or gateway payment methods.
- Formulaire de coupon : Allows users to input promotional discount codes.
✅ Step 4: Configure Styles and Publish
Select each widget individually to customize input fields, adjust font typography, alter form background colors, change button borders, and optimize the spacing. Click Publier/Mettre à jour to make the new checkout design live on your site.
Exemple
A digital product store can remove shipping fields and simplify the checkout process using ShopEngine, reducing friction and increasing completed purchases.
Résumé
Customizing the WooCommerce checkout page helps streamline the buying process, build trust, and reduce abandonment. With Elementor and ShopEngine, you can create a fully optimized, conversion-focused checkout experience using a visual builder instead of code.
Pourquoi personnaliser la page de paiement WooCommerce ?
La page de paiement WooCommerce fait un travail adéquat en fournissant un processus de paiement fluide aux clients. Cependant, si vous souhaitez offrir à votre utilisateur une expérience d'achat plus enrichissante et ainsi augmenter votre taux de conversion, vous devriez alors envisager de personnaliser la page de paiement de WooCommerce.
En fonction de votre type d'entreprise, vous devez modifier la page de paiement WooCommerce pour garantir une expérience d'achat fluide à vos clients. Par exemple, si vous vendez uniquement des produits numériques, il n’est pas nécessaire de collecter des adresses.
En parlant de collecte d'adresses, la page de paiement est le meilleur endroit pour collecter des données utilisateur que vous pouvez utiliser pour améliorer l'expérience de votre client et également les utiliser dans votre future stratégie marketing pour augmenter les ventes.
Outre l'ajout, la suppression ou la modification des champs du formulaire de la page de paiement, vous pouvez également ajouter une nouvelle section pour mettre en évidence votre offre spéciale ou USP (proposition de vente unique) de votre entreprise ou votre témoignage, etc. Tous ces éléments peuvent vous aider à gagner des clients. faites confiance et incitez plus de clients à terminer leurs commandes.
J'espère que vous réalisez maintenant l'importance d'une page de paiement personnalisée pour votre site Web WordPress et pourquoi vous devriez personnaliser la page de paiement WooCommerce.
Si vous vous demandez comment personnaliser la page de paiement WooCommerce, passez à la section suivante pour obtenir des réponses.
How to Customize or Edit WooCommerce Checkout Page in Elementor
Lorsque toutes les autres sociétés proposent le plugin/addon externe pour la page de paiement, ShopEngine is a drag-and-drop WooCommerce builder that lets you customize the checkout page. With ShopEngine, you can create your own checkout page with 3 simple steps. And you can edit your WooCommerce checkout page too.
En plus de créer et de personnaliser la page de paiement WooCommerce, vous pouvez créer et personnaliser de nombreuses autres pages WooCommerce, notamment la page de produit unique, la page de panier et la page d'archives WooCommerce.
Ne t'inquiète pas! Vous n'aurez pas à écrire de code. Ici, je vais montrer le processus de personnalisation du modèle de page de paiement WooCommerce.
Avant de commencer la conception de la page de paiement WooCommerce, il est préférable de faire un croquis de votre prochaine page de paiement. Cela vous fera gagner du temps et éliminera toute confusion lors de la conception de la page.
Installer Elementor et ShopEngine
The first step is to install Elementor and ShopEngine on your WordPress WooCommerce site. Both plugins are free and available in the WordPress directory. After installing the plugin, please finish the basic setup.
Clé d'installation : wp-admin -> Plugins -> Ajouter un nouveau -> ShopEngine/Elementor -> Installer maintenant -> Activer
Créer un modèle de page de paiement
- Cliquer sur Modèle du Moteur de boutique menu de la barre latérale.
- Cliquer sur "Ajouter un nouveau" et une pop-up s'affichera dans votre tableau de bord.
- Définissez le nom et "Vérifier" du "Taper" dérouler.
- Définissez la valeur par défaut sur "OUI» et enregistrez la page.
Clé de paramètres - Accédez à ShopEngine -> Modèles -> Ajouter un nouveau
Une nouvelle page de paiement sera ajoutée à la liste des pages. Modifiez la page avec Elementor. Consultez la documentation pour plus de détails sur la façon de créez un modèle de page de paiement avec ShopEngine.
Tu peux créer des champs personnalisés et créer une page de paiement WooCommerce standard pour votre site Web. Aucun code personnalisé ni CSS personnalisé n'est requis pour le modèle de page de paiement WooCommerce. Avec ShopEngine, vous pouvez modifier la page de paiement WooCommerce par un simple « glisser-déposer ».
Vous pouvez rechercher l'élément et le déposer sur la page pour la personnalisation de la page de paiement WooCommerce. Enregistrez-le ensuite. Vous pouvez également les parcourir manuellement. Vous pouvez choisir n'importe quelle mise en page Elementor selon votre choix, ajouter des widgets et l'enregistrer.
Éléments de paiement pour une page de paiement personnalisée
- Formulaire de coupon– C'est un formulaire pour offrir votre coupon.
- Paiement à la caisse– Le formulaire consiste à définir le mode de paiement à la caisse. Ce formulaire contient les détails de facturation pour personnaliser la page de paiement.
- Commande de révision du paiement– Avec ce formulaire, il est possible de recueillir des avis clients.
- Formulaire de paiement supplémentaire– Il (personnaliser les champs de paiement) sert à prendre des informations supplémentaires telles que différentes adresses de facturation ou des informations externes.
- Facturation du formulaire de paiement– C'est un formulaire permettant de prendre les informations de facturation du client.
- Connexion au formulaire de paiement– Le formulaire est destiné à la connexion du client pendant la commande.
- Formulaire de commande Expédition– Il s'agit d'un formulaire permettant d'obtenir l'adresse de livraison du client.
- Shipping Method– Le mode d'expédition consiste à savoir quel mode d'expédition sera appliqué.
- Formulaire supplémentaire- Ces champs personnalisés permettent de prendre des informations supplémentaires telles que différentes adresses de facturation ou des informations externes.
- Formulaire d'expédition- Le formulaire d'expédition sert à récupérer les informations d'expédition du client.
So, now you know which element is for what! And you also have the sketch of your checkout page with ShopEngine, the WooCommerce checkout page builder. So, design your custom WooCommerce checkout page with ShopEngine drag-and-drop features.
Note: Si vous ne souhaitez pas créer votre page de paiement à partir de zéro, vous pouvez utilisez les modèles de page de paiement prédéfinis de ShopEngine et modifiez différentes sections pour les personnaliser. Pour une compréhension plus claire du processus, regardez la vidéo ci-dessous :
Avec ShopEngine, vous pouvez également créer une page de paiement en plusieurs étapes dans WooCommerce.
Vérifiez tout le processus
👉👉 Comment ajouter WooCommerce en plusieurs étapes Paiement en 5 étapes
Comment personnaliser la page de paiement de WooCommerce dans Gutenberg
Le processus d'ajout et de personnalisation de la page de paiement WooCommerce est assez similaire dans Gutenberg. Tout d'abord, vous devez ajouter un modèle de page de paiement, puis le modifier en conséquence avec Gutenberg. Pour cela, accédez à ShopEngine >> Modèles de constructeur et cliquez sur "Ajouter un nouveau" bouton.
Cela ouvrira un modèle depuis le côté droit. Là, vous devez remplir le Champs Nom et Type. Aussi, activer la bascule active et sélectionner un échantillon conception. Après cela, cliquez sur « Modifier avec Gutenberg » bouton.
Vous serez maintenant redirigé vers l'éditeur Gutenberg où vous pourrez créer et personnaliser la page de paiement en exploitant les blocs de paiement de ShopEngine. Pour accéder à ces blocs, appuyez sur l'icône « + » et défiler vers le bas jusqu'à ce que vous tombiez sur les blocs de paiement.
Après avoir trouvé les blocs de paiement, ajouter les blocs requis tels que la facturation du formulaire de paiement, le formulaire de coupon, la commande de révision du paiement, le paiement du paiement, etc. en fonction de vos besoins. De plus, vous pouvez trouver l'option de personnalisation de tous ces blocs sur le côté droit après avoir sélectionné chaque bloc.
Enfin, appuyez sur « Enregistrer » bouton pour activer votre page de paiement sur votre boutique WooCommerce.
UX Best Practices for WooCommerce Checkout Page Customization
A well-designed checkout page doesn’t just look good. It helps customers complete their purchases quickly and confidently. By following a few checkout UX best practices, you can reduce friction, lower cart abandonment, and improve your store’s conversion rate.
- Keep the checkout process simple: Every extra step or unnecessary field increases the chance that shoppers will abandon their carts. Only ask for the information you truly need and keep the layout clean and distraction-free.
- Offer guest checkout: Not every customer wants to create an account before making a purchase. Enabling guest checkout allows first-time buyers to complete their orders faster, creating a smoother shopping experience while reducing checkout abandonment.
- Display a clear order summary: Customers should always be able to review their products, quantities, prices, taxes, shipping costs, and total amount before placing an order. A transparent order summary builds trust and helps prevent unexpected surprises.
- Highlight secure payment options: Reassure shoppers that their payment information is protected by displaying secure payment badges, SSL indicators, and trusted payment gateways. This can significantly increase customer confidence during checkout.
- Make the call-to-action stand out: Your Passer la commande button should be easy to find and visually prominent. Use contrasting colors, clear text, and enough spacing around the button so customers can complete their purchase without hesitation.
- Support multiple payment methods: Different customers prefer different payment options. Offering popular gateways such as credit/debit cards, PayPal, Stripe, Apple Pay, or local payment methods can reduce payment friction and improve conversion rates.
- Optimize for mobile devices: A large portion of online shoppers complete purchases on mobile devices. Use responsive layouts, larger touch-friendly buttons, readable fonts, and minimal scrolling to ensure a seamless mobile checkout experience.
- Reduce distractions: The checkout page should focus on one goal: completing the purchase. Remove unnecessary navigation menus, promotional banners, and excessive popups that may distract customers or encourage them to leave before placing an order.
- Build trust with social proof: Adding customer reviews, trust badges, money-back guarantees, or secure checkout messages near the payment section can reassure hesitant shoppers and encourage them to complete their purchase.
- Test your checkout experience regularly: After customizing your checkout page, test it from a customer’s perspective. Verify that all fields, payment gateways, coupons, shipping methods, and confirmation emails work correctly across different devices and browsers. Even small usability issues can negatively impact your sales.
Classic-coding customization vs customized checkout page by ShopEngine
| Facteurs | With ShopEngine | With Classic-coding |
|---|---|---|
| Coding required | None drag-and-drop widgets | Yes. PHP, woocommerce_checkout_fields filter, action hooks |
| Setup time | Minutes | Hours to days, depending on complexity |
| Visual live preview | Yes, real-time in builder | No. Requires save + refresh to see changes |
| Field types available | Standard set via widgets (billing, shipping, coupon, review, payment) | Fully custom. All fields need to built with code. |
| Maintenance on WooCommerce updates | Handled by plugin updates | Manual. Breaks silently if hooks change |
| Site speed impact | Minimal, optimized widgets | Depends entirely on code quality |
| Rollback/version control | Built-in template management | Requires Git/manual backup discipline |
| Idéal pour | Store owners, marketers, agencies without dev resources | Developers needing pixel-level or business-logic-specific control |
Conseils bonus pour améliorer la page de paiement WooCommerce
Il y a toujours des choses secrètes qui stimulent les ventes. Nous apportons tous les conseils secrets ici en public. L'application des conseils suivants après avoir personnalisé le modèle de page de paiement pourrait augmenter vos ventes bien plus que prévu.
Simplifiez le processus de paiement
Une étude récente montre que 28% des meilleurs sites de commerce électronique comportent 5 étapes sur la page de paiement. Vous pouvez le conserver tel quel ou effectuer moins d’étapes sur votre site de commerce électronique.
Gardez votre page de paiement simple et évidente. Ajoutez un indicateur visuel pour que vos clients puissent voir le total des étapes. Trop d’étapes peuvent nuire à votre taux de progression.
Offrez plusieurs options de paiement
Il fut un temps où un site de commerce électronique contenait un seul moyen de paiement. Cela a provoqué un taux d’abandon élevé. Surtout lorsqu'un site s'en tient à une passerelle de paiement locale.
Afin de résoudre le problème des abandons élevés, les marques proposent désormais plusieurs solutions de paiement. Les portefeuilles électroniques et les escapades de paiement électronique rendent les choses plus faciles que jamais. À cette époque, si vous ne proposez pas plusieurs options de paiement, vous perdrez beaucoup de clients.
Afficher la progression du paiement
Comme déjà mentionné, la page de paiement devrait comporter environ 5 étapes. Maintenant, il est préférable d'afficher les étapes sous forme de progression ou d'achèvement d'étape. Votre client doit savoir combien d’étapes il reste pour finaliser le paiement.
Il est préférable d'ajouter les étapes de progression avec le titre. Cela aidera les utilisateurs à comprendre les informations à venir.
Partagez le montant de l'épargne
C'est une excellente idée pour augmenter vos ventes. Montrez les économies totales à votre client. Disons qu'ils économisent x% de la commande. Qui ne veut pas économiser ? Ainsi, cela retiendra leur attention.
Vous pouvez également afficher le point de sauvegarde à venir. Par exemple, vous pouvez envoyer une requête ping ou afficher une notification indiquant « Dépensez 100 et économisez x% davantage ». Cela aidera sûrement à augmenter les ventes.
Gardez le client sur la même longueur d'onde pendant le paiement
Si vous dirigez votre client vers une autre page pour accepter le paiement, votre client quittera souvent le site. Ils ne reviendront pas pour faire des achats supplémentaires. Il sera difficile de faire des ventes ascendantes et descendantes auprès du client.
Alors, gardez votre client sur la même longueur d’onde lors de la création d’un paiement. Vous pouvez désormais intégrer une passerelle de paiement. Cela améliore l’expérience client et diminue les problèmes abandonnés.
Afficher le témoignage
L'ajout de quelques témoignages accrocheurs à la page de paiement renforce la confiance des clients. Mais assurez-vous de ne pas ajouter trop de témoignages génériques sur la page.
Mettre en œuvre des points et des récompenses
Un autre excellent moyen de réduire le problème des abandons consiste à introduire des points et des récompenses. Si vous autorisez vos clients à échanger des points contre des achats ou contre des réductions supplémentaires, cela les motivera à passer à la caisse.
Les clients ne peuvent gagner des points au moment du paiement que s'ils remplissent les conditions du total de la commande mentionné.
Essayez les ventes incitatives et croisées
Selon Amazon, les ventes croisées et les ventes incitatives ont contribué à environ 35% de leurs revenus. Les recommandations de produits sont responsables d'une moyenne de 10 à 301 TP3T de revenus des sites de commerce électronique selon l'analyste de Forrester Research.
Les ventes incitatives et croisées sur la page de paiement font partie des meilleures options pour tout site de commerce électronique. Montrez votre produit lié au client avec une remise et des points de récompense.
Utilisez une conception adaptée aux mobiles
En matière de référencement, Google et tous les autres moteurs de recherche veillent à une conception adaptée aux mobiles. Cela a un impact important sur le classement des recherches. Eh bien, si votre page de paiement est moins adaptée aux mobiles, vous risquez fort de perdre beaucoup de clients.
Concevez une page de paiement adaptée aux mobiles et réactive pour votre site de commerce électronique. Vous pouvez utiliser ShopEngine, un plugin de personnalisation de page de paiement WooCommerce pour concevoir la page de paiement adaptée aux mobiles.
Activer la sauvegarde du contenu du panier
Le site doit disposer d’options de sauvegarde du « contenu du panier » claires et simples. Il ne doit demander aucune inscription, connexion ou saisie de données future aux utilisateurs.
Qu'est-ce que ShopEngine a d'autre à offrir ?
En plus des widgets, ShopEngine fournit également de nombreux modules utiles à ajouter Pré-commander, mode vacances, vente flash, etc. Vous pouvez toujours consulter tous ces modules en détail plus tard. De plus, pour chaque module, vous obtiendrez des mises en page prêtes à l'emploi comme le modèle de page de paiement WooCommerce.
Mais le module que je souhaite mettre en lumière est celui des champs de paiement supplémentaires. À l'aide de ce module, vous pouvez facilement ajouter des champs personnalisés à n'importe lequel des formulaires de votre page de paiement WooCommerce et personnaliser la page de paiement WooCommerce en fonction de votre entreprise et de vos besoins.
En rapport: Comment ajouter un champ de paiement personnalisé avancé WooCommerce
Vous pouvez également découvrir à quel point il est facile d'ajouter un champ personnalisé dans la vidéo ci-dessous :
Blogs bonus :
✅ Comment personnaliser la page de catégorie WooCommerce sans codage
✅ Comment personnaliser la page du panier WooCommerce sans codage (gratuit)
✅ Comment personnaliser la page WooCommerce Mon compte à l'aide de ShopEngine
✅ Comment personnaliser la page de la boutique WooCommerce à l'aide de ShopEngine
✅ Comment personnaliser la page produit WooCommerce à l'aide de ShopEngine
✅ Meilleurs plugins de panier d'achat pour WordPress et WooCommerce
Dernier appel
Checkout is the final step for a potential customer to buy something. So, the checkout page is the place where you need to take extra care. And ShopEngine is the best WooCommerce checkout page customization plugin you will find to customize or modify WooCommerce checkout page and make it extra special.
De plus, vous savez maintenant comment personnaliser ou modifier gratuitement la page de paiement WooCommerce. Alors, êtes-vous prêt à personnaliser ou à modifier la page de paiement WooCommerce avec ShopEngine ?
Laisser un commentaire