Mais gr\u00e2ce \u00e0 ce nouveau widget de paiement dans Elementor Pro<\/a>, vous pouvez d\u00e9sormais personnaliser int\u00e9gralement votre page de paiement en utilisant l’interface visuelle d’Elementor et ses options sans code. Ce widget fonctionne en synergie avec les widgets Elementor Panier<\/a> et Mon Compte<\/a> pour vous aider \u00e0 concevoir toutes les pages cl\u00e9s de votre boutique.<\/p>\n\n Dans ce tutoriel, vous apprendrez comment utiliser le widget de paiement d’Elementor<\/a> Pro pour personnaliser et optimiser la page de paiement de votre boutique sans avoir \u00e0 quitter Elementor.<\/p>\n\n Ensuite, nous partagerons \u00e9galement des conseils suppl\u00e9mentaires sur l’utilisation des crochets d’action WooCommerce pour personnaliser davantage la page de paiement. <\/p>\n\n Bien que vous n’ayez pas besoin d’utiliser de code si vous utilisez le widget de paiement d’Elementor Pro, ces crochets d’action peuvent \u00eatre utiles si vous souhaitez ajouter du contenu personnalis\u00e9 \u00e0 votre page de paiement, comme un ensemble de badges de confiance apparaissant sous les champs de carte de cr\u00e9dit.<\/p>\n\n Si vous pr\u00e9f\u00e9rez regarder un tutoriel vid\u00e9o, vous pouvez visionner la vid\u00e9o ci-dessus sur l’utilisation du widget de paiement Elementor. <\/p>\n\n Sinon, continuez la lecture pour le tutoriel complet bas\u00e9 sur le texte qui correspond \u00e0 la vid\u00e9o, ainsi que quelques conseils suppl\u00e9mentaires sur l’utilisation des crochets d’action WooCommerce que nous n’avons pas abord\u00e9s dans la vid\u00e9o.<\/p>\n\n La page de paiement WooCommerce est la page o\u00f9 les acheteurs finalisent leurs commandes en saisissant leurs adresses, coordonn\u00e9es, informations de facturation, et ainsi de suite.<\/p>\n\n C’est une page essentielle pour toute boutique, il est donc important de l’optimiser pour les conversions et de la rendre aussi conviviale que possible.<\/p>\n\n Avec le widget de paiement Elementor, vous pouvez personnaliser int\u00e9gralement la page de paiement de votre boutique directement depuis Elementor. Cela vous aide \u00e0 cr\u00e9er un design coh\u00e9rent avec le reste de votre boutique et \u00e0 optimiser les d\u00e9tails cl\u00e9s de votre page.<\/p>\n\n Vous pourrez modifier les couleurs et la typographie<\/a>, ajuster l’espacement, modifier le texte des sections et des formulaires, et plus encore. Vous pouvez apporter des modifications \u00e0 l’ensemble du processus de paiement ou activer des options granulaires pour appliquer diff\u00e9rents styles \u00e0 des parties sp\u00e9cifiques de votre paiement.<\/p>\n\n Par exemple, si vous souhaitez attirer l’attention sur le champ de coupon, vous pouvez ajouter des couleurs sp\u00e9ciales, une bordure, et ainsi de suite \u2014 le tout sans n\u00e9cessiter de code.<\/p>\n\n Maintenant, passons \u00e0 un guide d\u00e9taill\u00e9 sur la fa\u00e7on dont vous pouvez utiliser le widget de paiement dans Elementor Pro<\/a> pour personnaliser la page de paiement de votre boutique.<\/p>\n\n De nouveau, si vous pr\u00e9f\u00e9rez visualiser ce tutoriel en format vid\u00e9o, vous pouvez le regarder ci-dessus. Les deux tutoriels contiennent les m\u00eames informations.<\/p>\n\n Lorsque vous cr\u00e9ez une boutique WooCommerce<\/a>, WooCommerce cr\u00e9e automatiquement une page de paiement pour votre boutique qui utilise le shortcode de paiement WooCommerce<\/a>.<\/p>\n\n Dans ce tutoriel, vous pouvez utiliser cette m\u00eame page par souci de simplicit\u00e9. Cependant, au lieu de vous fier au shortcode WooCommerce, vous modifierez la page dans Elementor et ajouterez le widget de paiement.<\/p>\n\n Pour commencer, acc\u00e9dez \u00e0 la liste des Pages<\/strong> dans votre tableau de bord WordPress et localisez la page de paiement. WooCommerce la marquera automatiquement avec un identifiant indiquant \u00ab\u00a0Page de paiement\u00a0\u00bb.<\/p>\n\n Une fois que vous avez trouv\u00e9 la page correcte, cliquez sur le bouton Modifier<\/strong> pour ouvrir l’\u00e9diteur WordPress. <\/p>\n\n Une fois dans l’\u00e9diteur, cliquez sur le bouton Modifier avec Elementor<\/strong> pour activer Elementor pour cette page et lancer l’\u00e9diteur d’Elementor.<\/p>\n\n Lorsque vous ouvrez la page de panier par d\u00e9faut dans Elementor, vous devriez voir une conception tr\u00e8s simple. Les seuls \u00e9l\u00e9ments sur la page seront le shortcode [woocommerce_checkout] \u00e0 l’int\u00e9rieur d’un widget \u00c9diteur de texte Elementor.<\/p>\n\n Pour utiliser Elementor pour contr\u00f4ler votre paiement, vous devrez d’abord supprimer le widget\/shortcode existant :<\/p>\n\n Ensuite, ajoutez le widget de paiement Elementor \u00e0 sa place. Une fois que vous ajoutez le widget de paiement, vous verrez un aper\u00e7u en direct de la page de paiement directement dans l’\u00e9diteur.<\/p>\n\n Note<\/strong> – \u00e9tant donn\u00e9 que l’\u00e9diteur Elementor vous donne un aper\u00e7u visuel qui correspond parfaitement \u00e0 ce que les visiteurs de votre site web verront, vous voudrez ajouter quelques articles \u00e0 votre panier d’achat afin de voir \u00e0 quoi ressemble le processus de paiement r\u00e9el. Voici tout ce que vous devez faire :<\/p>\n\n Une fois que vous avez recharg\u00e9 Elementor, ces articles devraient appara\u00eetre dans le r\u00e9sum\u00e9 du paiement pendant que vous travaillez sur votre conception.<\/p>\n\n Maintenant, il est temps de commencer \u00e0 personnaliser.<\/p>\n\n Pour commencer, ouvrez les param\u00e8tres du widget de paiement dans la barre lat\u00e9rale d’Elementor.<\/p>\n\n Commen\u00e7ons par passer en revue tous les param\u00e8tres de l’onglet Contenu du widget.<\/p>\n\n Tout d’abord, vous pouvez utiliser la zone de param\u00e8tres G\u00e9n\u00e9ral<\/strong> pour choisir entre une disposition \u00e0 une colonne ou deux colonnes pour votre page de paiement.<\/p>\n\n Si vous choisissez une disposition \u00e0 deux colonnes, vous pouvez \u00e9galement rendre la colonne de droite fixe. Si vous activez la colonne de droite fixe, vous obtenez une option suppl\u00e9mentaire pour ajouter un d\u00e9calage, ce qui vous aide \u00e0 \u00e9viter que votre en-t\u00eate ne chevauche la colonne.<\/p>\n\n La section D\u00e9tails de facturation et d’exp\u00e9dition<\/strong> vous permet de personnaliser les d\u00e9tails du formulaire de facturation et d’exp\u00e9dition.<\/p>\n\n Vous verrez ces champs ensemble si vous avez d\u00e9fini les d\u00e9tails de facturation et d’exp\u00e9dition comme \u00e9tant les m\u00eames dans les param\u00e8tres de WooCommerce. Vous pouvez activer cela en allant dans WooCommerce \u2192 Param\u00e8tres \u2192 Exp\u00e9dition<\/strong> et en s\u00e9lectionnant Forcer l’exp\u00e9dition \u00e0 l’adresse de facturation du client<\/strong>. Sinon, vous les verrez s\u00e9par\u00e9ment.<\/p>\n\n Tout d’abord, vous pouvez d\u00e9finir le titre de la section et l’alignement pour cette section.<\/p>\n\n Ensuite, vous pouvez ouvrir les param\u00e8tres de chaque champ individuel pour personnaliser les \u00e9tiquettes et les placeholders.<\/p>\n\n La section Informations suppl\u00e9mentaires<\/strong> vous permet de personnaliser cette zone de la page de paiement. Par d\u00e9faut, c’est ici que les acheteurs peuvent laisser des notes de commande sp\u00e9ciales, bien que vous puissiez voir des d\u00e9tails suppl\u00e9mentaires en fonction de la configuration de votre boutique.<\/p>\n\n Comme pour les autres sections de votre page de paiement, vous pouvez personnaliser l’alignement et les \u00e9tiquettes de cette section.<\/p>\n\n Ou, vous avez \u00e9galement la possibilit\u00e9 de masquer cette section de la page de paiement, ce qui peut \u00eatre utile si les acheteurs n’ont pas besoin de laisser des notes personnalis\u00e9es.<\/p>\n\n Les param\u00e8tres Votre commande<\/strong> vous permettent de personnaliser la partie r\u00e9capitulative de la commande du paiement. Si vous utilisez une disposition \u00e0 deux colonnes, cette section appara\u00eetra en haut de la colonne de droite. Dans une disposition \u00e0 une colonne, elle appara\u00eetra en dessous des d\u00e9tails de facturation et d’exp\u00e9dition.<\/p>\n\n Les param\u00e8tres de Coupon <\/strong>vous permettent \u00e9galement de personnaliser le titre et l’alignement de la section des coupons. Cependant, vous disposez \u00e9galement d’une option pour personnaliser le texte du lien permettant d’appliquer le code de coupon. Cela peut vous aider \u00e0 cr\u00e9er une exp\u00e9rience plus optimis\u00e9e et conviviale pour les acheteurs qui appliquent des coupons.<\/p>\n\n Les param\u00e8tres de Paiement<\/strong> vous permettent de modifier l’alignement du bouton d’achat et de personnaliser le message des conditions g\u00e9n\u00e9rales ainsi que le texte du lien.<\/p>\n\n Afin de voir le message des conditions g\u00e9n\u00e9rales, vous devrez avoir d\u00e9fini la page des conditions g\u00e9n\u00e9rales dans vos param\u00e8tres WooCommerce. Pour simplifier les choses, vous pouvez s\u00e9lectionner cette page sans quitter Elementor :<\/p>\n\n Si vous autorisez le paiement en tant qu’invit\u00e9 dans les param\u00e8tres de WooCommerce, vous obtiendrez \u00e9galement une zone de param\u00e8tres suppl\u00e9mentaire appel\u00e9e Client existant<\/strong> qui vous permet de personnaliser le message invitant les clients existants \u00e0 se connecter \u00e0 leurs comptes.<\/p>\n\n Ensuite, vous pouvez passer \u00e0 l’onglet Style<\/strong> des param\u00e8tres du widget de paiement pour personnaliser davantage le style et la conception de la page de paiement, en vous assurant qu’elle correspond au reste du design de votre boutique.<\/p>\n\n Voici les options de conception g\u00e9n\u00e9rales que vous pouvez configurer dans les diff\u00e9rentes zones de param\u00e8tres…<\/p>\n\n Dans les param\u00e8tres Sections<\/strong>, vous pouvez contr\u00f4ler le style g\u00e9n\u00e9ral de toutes les diff\u00e9rentes parties du paiement. <\/p>\n\n Par exemple, si vous modifiez la couleur d’arri\u00e8re-plan, cela affectera l’arri\u00e8re-plan de toutes les sections. Vous pouvez \u00e9galement ajuster la bordure et l’espacement selon vos besoins.<\/p>\n\n Dans les param\u00e8tres Typographie<\/strong>, vous pouvez personnaliser les couleurs et la typographie de la plupart des textes de votre page de paiement, y compris les titres, les titres secondaires, les descriptions, les messages, les boutons radio, les cases \u00e0 cocher, et plus encore.<\/p>\n\n Le seul \u00e9l\u00e9ment typographique que vous ne pouvez pas personnaliser ici concerne vos formulaires, ce que vous ferez dans la section suivante.<\/p>\n\n Dans les param\u00e8tres Formulaires<\/strong>, vous pouvez contr\u00f4ler tous les aspects des formulaires et des champs de formulaire de votre page de paiement, ce qui affecte principalement les champs de facturation\/exp\u00e9dition et le formulaire de coupon.<\/p>\n\n Vous pouvez ajuster l’\u00e9cart entre les colonnes et les lignes pour les diff\u00e9rents champs de formulaire. Vous pouvez \u00e9galement personnaliser la typographie des \u00e9tiquettes et des champs, ainsi qu’ajuster l’espacement, les bordures et les arri\u00e8re-plans. <\/p>\n\n Au-del\u00e0 de cela, vous avez \u00e9galement la possibilit\u00e9 de styliser le bouton de coupon, comme tout autre bouton sur votre site.<\/p>\n\n Dans R\u00e9sum\u00e9 de la commande<\/strong>, vous pouvez contr\u00f4ler les lignes, ce qui affecte l’espacement dans la liste des articles du panier d’un acheteur.<\/p>\n\n Vous pouvez \u00e9galement contr\u00f4ler les couleurs et la typographie des diff\u00e9rents \u00e9l\u00e9ments du r\u00e9sum\u00e9. Par exemple, vous pourriez utiliser un param\u00e8tre typographique pour les articles et un autre pour les totaux de la commande.<\/p>\n\n Dans les param\u00e8tres Bouton d’achat<\/strong>, vous pouvez enti\u00e8rement personnaliser le bouton d’achat, y compris la typographie, les couleurs, l’espacement, les bordures, et plus encore.<\/p>\n\n Il s’agit probablement du bouton le plus important de la page de paiement, vous voudrez donc vous assurer qu’il attire l’attention et correspond au reste de votre design.<\/p>\n\n Enfin, l’\u00e9l\u00e9ment Personnaliser<\/strong> vous permet d’ajouter des contr\u00f4les de style individuels pour des parties sp\u00e9cifiques de votre page de paiement. Vous pouvez les ajouter pour les zones suivantes :<\/p>\n\n Par exemple, vous pourriez vouloir faire ressortir le r\u00e9sum\u00e9 de la commande du reste de la page de paiement en ajoutant une bordure personnalis\u00e9e. <\/p>\n\n Vous pourriez le faire en activant les param\u00e8tres de personnalisation pour la zone de r\u00e9sum\u00e9 de la commande et en les configurant selon vos pr\u00e9f\u00e9rences. <\/p>\n\n Maintenant que vous avez termin\u00e9 de personnaliser la page de paiement pour les utilisateurs de bureau, vous voudrez passer au mode responsive<\/a>, pour voir si vous devez apporter des ajustements pour les visiteurs sur mobile ou tablette<\/p>\n\n Comme pour toutes les conceptions que vous cr\u00e9ez avec Elementor, votre design de page de paiement est responsive par d\u00e9faut. <\/p>\n\n N\u00e9anmoins, vous pouvez \u00e9galement utiliser les contr\u00f4les mobiles d’Elementor pour ajuster la conception si n\u00e9cessaire. Il vous suffit de rechercher l’ic\u00f4ne de l’appareil \u00e0 c\u00f4t\u00e9 des param\u00e8tres qui peuvent \u00eatre modifi\u00e9s pour diff\u00e9rents dispositifs.<\/p>\n\n Par exemple, vous pourriez souhaiter ajuster l\u00e9g\u00e8rement l’espacement des diff\u00e9rents \u00e9l\u00e9ments pour votre conception mobile.<\/p>\n\n Cette derni\u00e8re \u00e9tape est totalement facultative, mais il convient de noter que vous pouvez \u00e9galement contr\u00f4ler les attributions de pages cl\u00e9s de WooCommerce \u00e0 partir de la zone des param\u00e8tres du site Elementor<\/a>.<\/p>\n\n Cela pourrait s’av\u00e9rer utile si vous avez cr\u00e9\u00e9 une nouvelle page pour votre page de paiement plut\u00f4t que d’utiliser la page par d\u00e9faut cr\u00e9\u00e9e par WooCommerce.<\/p>\n\n Vous pouvez acc\u00e9der \u00e0 ces options \u00e0 partir de l’onglet WooCommerce<\/strong> de la zone r\u00e9guli\u00e8re des param\u00e8tres du site. Vous trouverez l’option WooCommerce sous la section Param\u00e8tres<\/strong>.<\/p>\n\n Pour des personnalisations suppl\u00e9mentaires de la page de paiement WooCommerce, vous pouvez utiliser du code et exploiter les nombreux points d’accroche d’action de paiement de WooCommerce. <\/p>\n\n Cela peut \u00eatre particuli\u00e8rement pratique si vous souhaitez ajouter du nouveau contenu \u00e0 la page de paiement, comme ins\u00e9rer des badges de confiance sous le bouton de paiement.<\/p>\n\n L’avantage de cette approche est qu’elle fonctionnera toujours avec le widget de paiement Elementor, ce qui en fait un excellent compl\u00e9ment \u00e0 Elementor pour des modifications suppl\u00e9mentaires.<\/p>\n\n Les points d’accroche d’action WordPress vous permettent essentiellement d’utiliser PHP pour injecter du contenu \u00e0 diff\u00e9rents endroits de la page de paiement. Par exemple, vous pourriez ajouter un nouveau message texte, inclure une image (peut-\u00eatre un badge de confiance), et ainsi de suite.<\/p>\n\n Au total, WooCommerce offre 16 points d’accroche d’action diff\u00e9rents pour la page de paiement.<\/p>\n\n Les neuf premiers points d’accroche sont toujours disponibles :<\/p>\n\n Les sept derniers points d’accroche peuvent \u00eatre disponibles ou non selon vos param\u00e8tres WooCommerce. Par exemple, si vous n’avez pas activ\u00e9 l’inscription sur la page de paiement, vous ne pourrez pas utiliser le point d’accroche d’action li\u00e9 au formulaire d’inscription :<\/p>\n\n Pour comprendre o\u00f9 ces points d’accroche ajouteront du contenu \u00e0 la page de paiement, Business Bloomer maintient un excellent guide visuel pour chaque emplacement<\/a> :<\/p>\n\n Pour injecter du contenu avec un point d’accroche d’action, vous devrez ajouter un extrait de code au fichier functions.php<\/strong> de votre th\u00e8me enfant<\/a> ou via un plugin comme Code Snippets<\/a>. <\/p>\n\n \u00c9tant donn\u00e9 que vous ajouterez du code \u00e0 votre site, nous vous recommandons vivement de faire une sauvegarde<\/a> avant de proc\u00e9der et\/ou de tester les modifications sur un site de staging<\/a> d’abord.<\/p>\n\n Tout d’abord, choisissez l’emplacement du point d’accroche o\u00f9 vous souhaitez ajouter du contenu. <\/p>\n\n Par exemple, disons que vous voulez ajouter un ensemble de badges de confiance sous le bouton \u00ab\u00a0Passer la commande\u00a0\u00bb. Pour cela, vous utiliseriez le point d’accroche woocommerce_review_order_after_submit<\/strong>.<\/p>\n\n Ensuite, vous ajouteriez un extrait de code comme celui-ci :<\/p>\n\n add_action( ‘action_name’, ‘your_function_name’ );<\/p>\n\n function your_function_name() {<\/p>\n\n \/\/ Votre code<\/p>\n\n }<\/p>\n\n Par exemple, pour ajouter une image de badge de confiance, le code pourrait ressembler \u00e0 ceci :<\/p>\n\n add_action( ‘woocommerce_review_order_after_submit’, ‘display_trust_badges’ );<\/p>\n\n function display_trust_badges() {<\/p>\n\n echo ‘ ;}<\/p>\n\n Ci-dessous, vous pouvez voir que les badges de confiance apparaissent sous le bouton de passation de commande, m\u00eame en travaillant avec le widget de paiement dans l’interface Elementor :<\/p>\n\n Avant de mettre en ligne les modifications de votre page de paiement, nous vous recommandons vivement de tout tester pour vous assurer qu’il n’y a aucun probl\u00e8me. Apr\u00e8s tout, tout ce qui interf\u00e8re avec la page de paiement de votre boutique aura un effet n\u00e9gatif direct sur vos r\u00e9sultats.<\/p>\n\n De nombreuses m\u00e9thodes de paiement WooCommerce incluent des modes de test que vous pouvez utiliser pour soumettre des commandes. Cela est vrai aussi bien pour le plugin officiel de passerelle Stripe<\/a> que pour le plugin officiel de passerelle PayPal<\/a>, ainsi que pour WooCommerce Payments<\/a>. Tous les liens dans la phrase pr\u00e9c\u00e9dente vous conduiront \u00e0 la page de documentation appropri\u00e9e pour la fonctionnalit\u00e9 de test de cette passerelle.<\/p>\n\n Ou bien, vous pouvez \u00e9galement utiliser le plugin gratuit WC Order Test<\/a>, qui ajoute une nouvelle passerelle de paiement \u00ab\u00a0Order Test\u00a0\u00bb. Vous pouvez configurer cette passerelle en allant dans WooCommerce \u2192 Param\u00e8tres \u2192 Paiements<\/strong>.<\/p>\n\n Une fois que vous avez activ\u00e9 une passerelle de paiement de test, vous pouvez soumettre quelques commandes de test pour vous assurer que tous les champs de paiement fonctionnent et qu’aucune de vos modifications de contenu ou de design n’interf\u00e8re avec le processus de paiement.<\/p>\n\n Nous recommandons de tester \u00e0 la fois sur les appareils de bureau et mobiles.<\/p>\n\n Avec le widget Checkout dans Elementor Pro, vous pouvez d\u00e9sormais personnaliser enti\u00e8rement la page de paiement WooCommerce en utilisant la conception visuelle par glisser-d\u00e9poser d’Elementor.<\/p>\n\n Pour la plupart des utilisateurs, Elementor sera suffisant, car il vous permet de personnaliser les couleurs, la typographie, le texte, l’espacement, les bordures, et plus encore.<\/p>\n\n Si vous souhaitez aller encore plus loin et ajouter du nouveau contenu \u00e0 votre page de paiement, vous pouvez \u00e9galement utiliser les crochets d’action int\u00e9gr\u00e9s de WooCommerce, qui sont enti\u00e8rement compatibles avec le widget Checkout d’Elementor.<\/p>\n\n Le meilleur de tout, Elementor ne vous limite pas \u00e0 la personnalisation de la page de paiement uniquement.<\/p>\n\n Elementor WooCommerce Builder<\/a> peut \u00e9galement vous aider \u00e0 personnaliser d’autres parties de votre boutique en utilisant le constructeur visuel par glisser-d\u00e9poser d’Elementor. Par exemple, vous pouvez \u00e9galement personnaliser la page du panier WooCommerce, la page de produit unique WooCommerce<\/a>, la page Mon compte WooCommerce, et plus encore.<\/p>\n\n Avez-vous encore des questions concernant la personnalisation de votre page de paiement WooCommerce avec Elementor ou les crochets d’action ? Faites-le nous savoir dans les commentaires !<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" Gr\u00e2ce au nouveau widget de paiement dans Elementor Pro, vous pouvez d\u00e9sormais personnaliser int\u00e9gralement votre page de paiement en utilisant l’interface visuelle d’Elementor et ses options sans code. Ce widget fonctionne en synergie avec les widgets Panier et Mon Compte d’Elementor pour vous aider \u00e0 concevoir toutes les pages cl\u00e9s de votre boutique. Apprenez \u00e0 l’utiliser, \u00e9tape par \u00e9tape.<\/p>\n","protected":false},"author":129304,"featured_media":106738,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[230,250],"tags":[422],"marketing_persona":[47,51,50],"marketing_intent":[49],"class_list":["post-124578","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-fr","category-woocommerce-fr","tag-video"],"acf":[],"yoast_head":"\nTable des mati\u00e8res<\/h4>\n\n\n\n
Comment fonctionne le widget de paiement Elementor Pro ?<\/h2>\n\n
Comment personnaliser la page de paiement WooCommerce avec Elementor<\/h2>\n\n
1. Modifier la page de panier par d\u00e9faut de votre boutique dans Elementor<\/h3>\n\n
2. Remplacer le shortcode de paiement WooCommerce par le widget de paiement Elementor<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-1-delete-checkout-shortcode-1-1024x517.jpg\")
<\/figure>\n\n3. Personnaliser les param\u00e8tres g\u00e9n\u00e9raux de votre page de paiement<\/h3>\n\n
G\u00e9n\u00e9ral – Disposition \u00e0 une colonne ou deux colonnes<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-2-column-layout-1024x516.jpg\")
<\/figure>\n\nD\u00e9tails de facturation et d’exp\u00e9dition<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-3-billing-shipping-fields-1024x532.jpg\")
<\/figure>\n\nInformations suppl\u00e9mentaires<\/h4>\n\n
Votre commande<\/h4>\n\n
Coupon<\/h4>\n\n
Paiement<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-4-terms-and-conditions-1024x601.jpg\")
<\/figure>\n\nClient existant<\/h4>\n\n
4. Personnalisez les param\u00e8tres de style de votre page de paiement<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-5-style-settings-1024x551.jpg\")
<\/figure>\n\nSections<\/h4>\n\n
Typographie<\/h4>\n\n
Formulaires<\/h4>\n\n
R\u00e9sum\u00e9 de la commande<\/h4>\n\n
Bouton d’achat<\/h4>\n\n
Personnaliser<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-6-order-summary-1024x508.jpg\")
<\/figure>\n\n5. Ajustez votre paiement pour les acheteurs mobiles<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-7-mobile-design-1024x662.jpg\")
<\/figure>\n\n6. Ajuster les attributions de pages WooCommerce dans les param\u00e8tres du site si n\u00e9cessaire<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-8-site-settings-1024x503.jpg\")
<\/figure>\n\nComment personnaliser la page de paiement WooCommerce avec du code<\/h2>\n\n
Que sont les points d’accroche d’action de paiement WooCommerce ?<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-code-1-hook-locations-1024x998.png\")
<\/figure>\n\nComment utiliser les points d’accroche d’action de paiement WooCommerce<\/h3>\n\n
![](\"trust-badges.png\"\/)
‘<\/p>\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/trust-badge-in-checkout-widget-1024x692.jpg\"){kind=icon}
<\/figure>\n\nComment tester votre page de paiement WooCommerce<\/h2>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/woocommerce-order-test-gateway-for-checkout-page-1024x800.png\")
<\/figure>\n\nCommencez \u00e0 personnaliser vos pages WooCommerce avec Elementor<\/h2>\n\n