{"id":33973,"date":"2024-08-11T14:40:12","date_gmt":"2024-08-11T14:40:12","guid":{"rendered":"\/tutoriels\/?p=33973"},"modified":"2025-06-03T20:40:06","modified_gmt":"2025-06-03T20:40:06","slug":"personnaliser-la-page-de-paiement-de-woocommerce","status":"publish","type":"post","link":"\/fr\/tutoriels\/personnaliser-la-page-de-paiement-de-woocommerce\/","title":{"rendered":"Comment personnaliser la page de paiement WooCommerce : un guide \u00e9tape par \u00e9tape"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Personnaliser l&rsquo;exp&eacute;rience de paiement sur votre boutique WooCommerce peut aider &agrave; r&eacute;duire les taux d&rsquo;abandon de panier, encourager les clients &agrave; terminer leurs achats, et m&ecirc;me les inciter &agrave; d&eacute;penser plus.<\/p><p class=\"wp-block-paragraph\">Dans ce tutoriel, nous allons vous expliquer &eacute;tape par &eacute;tape comment personnaliser la page de paiement de votre boutique eCommerce, que vous soyez un utilisateur novice de WordPress ou un propri&eacute;taire chevronn&eacute; d&rsquo;une boutique WooCommerce.<\/p><h2 class=\"wp-block-heading\" id=\"h-pourquoi-vous-devriez-personnaliser-votre-page-de-paiement-woocommerce\">Pourquoi vous devriez personnaliser votre page de paiement WooCommerce<\/h2><p class=\"wp-block-paragraph\">WooCommerce est l&rsquo;un des plugins WordPress e-commerce les plus populaires du march&eacute;. Il offre de nombreuses fonctionnalit&eacute;s int&eacute;gr&eacute;es permettant la cr&eacute;ation d&rsquo;un site e-commerce sans avoir &agrave; coder.&nbsp;<\/p><p class=\"wp-block-paragraph\">Cependant, la page de paiement par d&eacute;faut peut ne pas correspondre parfaitement aux besoins uniques et &agrave; l&rsquo;identit&eacute; de marque de votre entreprise de commerce &eacute;lectronique. En personnalisant la page de paiement standard de WooCommerce, vous pouvez :<\/p><p class=\"wp-block-paragraph\"><strong>Am&eacute;liorer l&rsquo;exp&eacute;rience de l&rsquo;utilisateur<\/strong><\/p><p class=\"wp-block-paragraph\">Un parcours d&rsquo;achat long et compliqu&eacute; peut perturber les visiteurs et les d&eacute;courager d&rsquo;acheter. En supprimant les champs inutiles de WooCommerce et en fournissant des conseils clairs, les clients peuvent naviguer dans le processus de paiement plus facilement et plus rapidement.<\/p><p class=\"wp-block-paragraph\">En adaptant le processus d&rsquo;achat aux besoins et pr&eacute;f&eacute;rences sp&eacute;cifiques de votre public cible, vous pouvez le valoriser. Par exemple, laissez les acheteurs choisir leur langue, leur devise, leur plateforme de paiement et leur mode d&rsquo;exp&eacute;dition pr&eacute;f&eacute;r&eacute;s pour une exp&eacute;rience plus positive.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Augmenter les taux de conversion<\/strong><\/p><p class=\"wp-block-paragraph\">Selon des statistiques r&eacute;centes sur l&rsquo;e-commerce, pr&egrave;s de 70 % des acheteurs abandonnent leur panier avant d&rsquo;avoir termin&eacute; le processus de paiement. Parmi les raisons de cet abandon, citons la complexit&eacute; du processus de paiement, des frais d&rsquo;exp&eacute;dition &eacute;lev&eacute;s et inattendus, la cr&eacute;ation obligatoire d&rsquo;un compte, les performances m&eacute;diocres du site web et l&rsquo;absence de passerelles de paiement diversifi&eacute;es.<\/p><p class=\"wp-block-paragraph\">En r&eacute;glant les probl&egrave;mes que les utilisateurs rencontrent avec votre page de paiement gr&acirc;ce &agrave; la personnalisation, vous serez en mesure d&rsquo;am&eacute;liorer vos taux de conversion.<\/p><p class=\"wp-block-paragraph\"><strong>Augmenter la valeur moyenne des commandes (AOV)<\/strong><\/p><p class=\"wp-block-paragraph\">La personnalisation de la page de paiement vous permet de mettre en &oelig;uvre des strat&eacute;gies de vente crois&eacute;e et de vente incitative.&nbsp;<\/p><p class=\"wp-block-paragraph\">Des recommandations de produits personnalis&eacute;es, des offres sp&eacute;ciales et des offres group&eacute;es pr&eacute;sent&eacute;es au moment du paiement peuvent inciter les clients &agrave; ajouter plus d&rsquo;articles &agrave; leur panier et augmenter la valeur moyenne de la commande.<\/p><h2 class=\"wp-block-heading\" id=\"h-comment-personnaliser-la-page-de-paiement-woocommerce-a-l-aide-de-plugins\">Comment personnaliser la page de paiement WooCommerce &agrave; l&rsquo;aide de plugins<\/h2><p class=\"wp-block-paragraph\">Avant de personnaliser la page de paiement, pensez d&rsquo;abord &agrave; <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wordpress-staging\/\">cr&eacute;er un site de staging<\/a>. Vous pourrez ainsi tester les modifications dans un environnement s&ucirc;r sans affecter votre site r&eacute;el.<\/p><p class=\"wp-block-paragraph\">Heureusement, l&rsquo;<a href=\"\/fr\/hebergement-woocommerce\">h&eacute;bergement WooCommerce d&rsquo;Hostinger<\/a> est livr&eacute; avec un outil de mise en sc&egrave;ne WordPress int&eacute;gr&eacute; que vous pouvez configurer via hPanel :<\/p><ol class=\"wp-block-list\">\n<li>Allez sur <strong>Sites web <\/strong>dans la barre lat&eacute;rale et s&eacute;lectionnez <strong>Tableau de bord <\/strong>&agrave; c&ocirc;t&eacute; de votre nom de domaine.<\/li>\n\n\n\n<li>Dans le menu de gauche, naviguez vers <strong>WordPress<\/strong> &rarr; <strong>Staging<\/strong>.<\/li>\n\n\n\n<li>Cliquez sur <strong>Cr&eacute;er staging<\/strong> pour configurer votre site de test.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f38230\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f38230\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"549\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/Staging-Hostinger-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"L'outil WordPress Staging dans hPanel\" class=\"wp-image-34120\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/Staging-Hostinger-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/Staging-Hostinger-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/Staging-Hostinger-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/Staging-Hostinger-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Si vous &ecirc;tes novice en mati&egrave;re de WooCommerce ou de WordPress en g&eacute;n&eacute;ral, l&rsquo;utilisation d&rsquo;un plugin facilite grandement le processus de personnalisation de la page de paiement.<\/p><p class=\"wp-block-paragraph\">Voici plusieurs plugins de funnels de vente et de construction de pages de paiement compatibles avec WooCommerce :<\/p><ul class=\"wp-block-list\">\n<li><strong><strong>FunnelKit Builder<\/strong><\/strong>. Obtenez des mod&egrave;les de caisse et des formulaires pr&ecirc;ts &agrave; l&rsquo;emploi que vous pouvez modifier &agrave; l&rsquo;aide de l&rsquo;&eacute;diteur de blocs Gutenberg ou de constructeurs de pages tiers. Vous pouvez ajouter des blocs, des images, des textes et des champs personnalis&eacute;s sp&eacute;cifiques &agrave; vos besoins.<\/li>\n<\/ul><ul class=\"wp-block-list\">\n<li><strong>CartFlows<\/strong>. L&rsquo;un des <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/plugin-woocommerce\/\">meilleurs plugins WooCommerce<\/a> pour optimiser le flux de paiement, CartFlows simplifie le processus d&rsquo;ajout d&rsquo;offres de vente incitative et de personnalisation de la page de <strong>Remerciement <\/strong>de WooCommerce.<\/li>\n<\/ul><ul class=\"wp-block-list\">\n<li><strong>Flexible Checkout Fields for WooCommerce<\/strong>. Son interface conviviale vous permet d&rsquo;&eacute;diter facilement les champs de caisse de WooCommerce. La version pro offre &eacute;galement des fonctionnalit&eacute;s suppl&eacute;mentaires telles que des cases &agrave; cocher, des boutons radio et des t&eacute;l&eacute;chargements de fichiers.<\/li>\n<\/ul><ul class=\"wp-block-list\">\n<li><strong>Checkout Field Editor for WooCommerce<\/strong>. Cr&eacute;ez facilement un champ personnalis&eacute; pour collecter les adresses de livraison et de facturation des clients et toute autre information dont vous pourriez avoir besoin.&nbsp;&nbsp;<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-creer-une-page-de-paiement-personnalisee-avec-funnelkit-builder\">Cr&eacute;er une page de paiement personnalis&eacute;e avec FunnelKit Builder<\/h3><p class=\"wp-block-paragraph\">Dans ce tutoriel, nous allons vous montrer comment personnaliser les pages de paiement en utilisant FunnelKit Builder. Suivez les &eacute;tapes suivantes pour configurer le plugin :<\/p><ol class=\"wp-block-list\">\n<li>Ouvrez votre tableau de bord WordPress, allez dans <strong>Extensions<\/strong> &rarr; <strong>Ajouter<\/strong>, et recherchez <strong>FunnelKit Builder<\/strong>.<\/li>\n<\/ol><ol start=\"2\" class=\"wp-block-list\">\n<li>Une fois que vous avez install&eacute; et activ&eacute; le plugin, rendez-vous sur le tableau de bord de <strong>FunnelKit <\/strong>sur la barre lat&eacute;rale gauche.<\/li>\n<\/ol><ol start=\"3\" class=\"wp-block-list\">\n<li>Allez dans la section <strong>To do list <\/strong>et choisissez <strong>Create Store Checkout<\/strong>.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">FunnelKit Builder vous permet de cr&eacute;er un funnel de vente &agrave; partir de z&eacute;ro ou d&rsquo;utiliser un mod&egrave;le de page de paiement WooCommerce pr&eacute;d&eacute;fini. Si vous pr&eacute;f&eacute;rez la seconde option, cliquez sur <strong>Create Store Checkout <\/strong>et choisissez parmi une large gamme de templates de funnels.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f3b225\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f3b225\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"471\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Funnel-Templates-offered-by-FunnelKit-Builder.png\/public\" alt=\"Les mod&egrave;les de Funnels propos&eacute;s par FunnelKit Builder \" class=\"wp-image-34121\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Funnel-Templates-offered-by-FunnelKit-Builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Funnel-Templates-offered-by-FunnelKit-Builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Funnel-Templates-offered-by-FunnelKit-Builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Funnel-Templates-offered-by-FunnelKit-Builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Pour une recherche plus cibl&eacute;e, modifiez les filtres en fonction des types de pages de paiement et de la compatibilit&eacute; avec les constructeurs de pages &ndash; Elementor, Divi, Block Editor, Oxygen, ou Autre.&nbsp;<\/p><p class=\"wp-block-paragraph\">Notez que la version gratuite ne permet qu&rsquo;un processus de paiement en une page. Pour cr&eacute;er une page de paiement en plusieurs &eacute;tapes, vous devez vous enregistrer en tant qu&rsquo;utilisateur pro.<\/p><p class=\"wp-block-paragraph\">Passez la souris sur chaque mod&egrave;le et cliquez sur le bouton <strong>Preview <\/strong>pour regarder de plus pr&egrave;s votre mod&egrave;le pr&eacute;f&eacute;r&eacute;. Vous pourrez ainsi voir &agrave; quoi ressemblera votre page de paiement sur les ordinateurs de bureau, les smartphones et les tablettes.<\/p><p class=\"wp-block-paragraph\">Apr&egrave;s avoir trouv&eacute; le bon template, s&eacute;lectionnez <strong>Import this funnel <\/strong>en haut &agrave; droite de votre &eacute;cran. Saisissez le nom de votre funnel et cliquez sur <strong>Done<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f4bef9\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f4bef9\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"741\" height=\"424\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Create-Funnel-pop-up-in-the-FunnelKit-Builder-dashboard.png\/public\" alt=\"Le pop-up Cr&eacute;er un funnel dans le tableau de bord de FunnelKit Builder \" class=\"wp-image-34122\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Create-Funnel-pop-up-in-the-FunnelKit-Builder-dashboard.png\/w=741,fit=scale-down 741w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Create-Funnel-pop-up-in-the-FunnelKit-Builder-dashboard.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Create-Funnel-pop-up-in-the-FunnelKit-Builder-dashboard.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 741px) 100vw, 741px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Pour ajuster la pr&eacute;sentation et le contenu de votre page de paiement, cliquez sur le bouton <strong>Preview <\/strong>dans la bo&icirc;te de <strong>Checkout<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f4edd4\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f4edd4\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"355\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Steps-section-in-the-FunnelKit-Builder-dashboard-with-the-Preview-button-highlighted-in-red.png\/public\" alt=\"La section Steps dans le tableau de bord de FunnelKit Builder, avec le bouton Preview surlign&eacute; en rouge \" class=\"wp-image-34123\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Steps-section-in-the-FunnelKit-Builder-dashboard-with-the-Preview-button-highlighted-in-red.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Steps-section-in-the-FunnelKit-Builder-dashboard-with-the-Preview-button-highlighted-in-red.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Steps-section-in-the-FunnelKit-Builder-dashboard-with-the-Preview-button-highlighted-in-red.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Steps-section-in-the-FunnelKit-Builder-dashboard-with-the-Preview-button-highlighted-in-red.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">De l&agrave;, s&eacute;lectionnez <strong>Edit Checkout <\/strong>dans la barre de menu sup&eacute;rieure, et l&rsquo;interface Gutenberg s&rsquo;ouvrira.<\/p><p class=\"wp-block-paragraph\">Effectuez des modifications comme vous le feriez sur n&rsquo;importe quelle page WordPress. Il suffit de s&eacute;lectionner un &eacute;l&eacute;ment comme un texte, une ic&ocirc;ne, un bouton de commande ou un bloc pour en personnaliser le contenu, la typographie, la couleur, l&rsquo;espacement et la taille.<\/p><p class=\"wp-block-paragraph\">Par exemple, vous pouvez t&eacute;l&eacute;charger votre propre logo de boutique WooCommerce en cliquant sur le logo par d&eacute;faut et en s&eacute;lectionnant <strong>Remplacer<\/strong>. Choisissez ensuite une image dans la m&eacute;diath&egrave;que de WordPress ou t&eacute;l&eacute;chargez-en une nouvelle depuis votre ordinateur.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f51cd4\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f51cd4\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"296\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Gutenberg-editor-interface-showing-one-of-the-templates-offered-by-FunnelKit-Builder.png\/public\" alt=\"L'interface de l'&eacute;diteur Gutenberg montrant l'un des mod&egrave;les propos&eacute;s par FunnelKit Builder \" class=\"wp-image-34124\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Gutenberg-editor-interface-showing-one-of-the-templates-offered-by-FunnelKit-Builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Gutenberg-editor-interface-showing-one-of-the-templates-offered-by-FunnelKit-Builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Gutenberg-editor-interface-showing-one-of-the-templates-offered-by-FunnelKit-Builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Gutenberg-editor-interface-showing-one-of-the-templates-offered-by-FunnelKit-Builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Arrangez davantage votre logo via l&rsquo;onglet <strong>Bloc <\/strong>dans la barre de menu de droite. D&eacute;finissez votre logo comme &eacute;tant <strong>Par d&eacute;faut <\/strong>ou <strong>Arrondi<\/strong>, saisissez un texte alt d&rsquo;image appropri&eacute;, s&eacute;lectionnez une proportion de taille et ajustez sa largeur et sa hauteur.<\/p><p class=\"wp-block-paragraph\">Pour personnaliser le design de votre page, s&eacute;lectionnez le conteneur <strong>Checkout Form <\/strong>et allez dans <strong>Style <\/strong>dans le menu de droite. Ici, vous pouvez jouer avec diff&eacute;rentes options d&rsquo;&eacute;dition :<\/p><ul class=\"wp-block-list\">\n<li><strong>Famille de polices<\/strong>. Choisissez une police qui repr&eacute;sente le mieux l&rsquo;identit&eacute; de votre marque, qu&rsquo;elle soit professionnelle ou d&eacute;contract&eacute;e.<\/li>\n\n\n\n<li><strong>Taille de la police<\/strong>. R&eacute;glez la taille du texte et l&rsquo;&eacute;paisseur des caract&egrave;res. L&rsquo;augmentation de la taille de la police am&eacute;liore la lisibilit&eacute;, tandis que le r&eacute;glage de l&rsquo;&eacute;paisseur permet de mettre en valeur certains &eacute;l&eacute;ments du texte.<\/li>\n\n\n\n<li><strong>Alignement<\/strong>. D&eacute;placez la position de votre contenu dans le conteneur ou la page vers la gauche, le centre ou la droite.<\/li>\n\n\n\n<li><strong>Couleur<\/strong>. Modifiez les couleurs de l&rsquo;arri&egrave;re-plan, du texte et des liens pour les adapter &agrave; l&rsquo;identit&eacute; visuelle de votre marque ou pour mettre en &eacute;vidence des informations importantes sur la page de paiement.<\/li>\n\n\n\n<li><strong>Style de la bordure<\/strong>. Modifiez le style, la couleur, la largeur et le rayon de la bordure pour am&eacute;liorer l&rsquo;aspect visuel du formulaire.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Une fois que tout est en ordre, n&rsquo;oubliez pas de cliquer sur <strong>Publier <\/strong>ou <strong>Mettre &agrave; jour <\/strong>pour enregistrer vos modifications.<\/p><h3 class=\"wp-block-heading\" id=\"h-personnalisation-du-formulaire-d-expedition-sur-la-page-de-paiement\">Personnalisation du formulaire d&rsquo;exp&eacute;dition sur la page de paiement<\/h3><p class=\"wp-block-paragraph\">Vous pouvez &eacute;galement personnaliser la pr&eacute;sentation du formulaire d&rsquo;exp&eacute;dition en s&eacute;lectionnant le bloc <strong>Checkout Form <\/strong>et en acc&eacute;dant &agrave; <strong>General<\/strong> &rarr; <strong>Shipping Information <\/strong>dans la barre lat&eacute;rale droite.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f627f6\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f627f6\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"424\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Gutenberg-editor-interface-with-the-Checkout-Form-container-selected.png\/public\" alt=\"L'interface de l'&eacute;diteur Gutenberg avec le conteneur Checkout Form s&eacute;lectionn&eacute; \" class=\"wp-image-34125\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Gutenberg-editor-interface-with-the-Checkout-Form-container-selected.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Gutenberg-editor-interface-with-the-Checkout-Form-container-selected.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Gutenberg-editor-interface-with-the-Checkout-Form-container-selected.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Gutenberg-editor-interface-with-the-Checkout-Form-container-selected.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">&Agrave; partir de l&agrave;, r&eacute;glez la taille de chaque champ contenant les informations personnelles du client, l&rsquo;adresse de livraison et l&rsquo;adresse de facturation. Vous pouvez choisir quatre options dans le menu d&eacute;roulant :<\/p><ul class=\"wp-block-list\">\n<li><strong>Full<\/strong>. La bo&icirc;te s&rsquo;&eacute;tend sur toute la largeur de son conteneur parent. Comme vous pouvez le voir dans la capture d&rsquo;&eacute;cran ci-dessus, les champs <strong>Email <\/strong>et <strong>Adresse <\/strong>par d&eacute;faut sont des exemples d&rsquo;une colonne Full.&nbsp;<\/li>\n\n\n\n<li><strong>One Half<\/strong>. Cette option permet de diviser le contenu en deux colonnes &eacute;gales, de la m&ecirc;me mani&egrave;re que les champs <strong>Pr&eacute;nom <\/strong>et <strong>Nom <\/strong>sont positionn&eacute;s.&nbsp;<\/li>\n\n\n\n<li><strong>One Third<\/strong>. Cette fonction est utile pour diviser le contenu en trois parties &eacute;gales. Notez que les champs <strong>Appartements<\/strong>, <strong>Ville <\/strong>et <strong>Code postal <\/strong>tiennent sur une seule ligne.<\/li>\n\n\n\n<li><strong>Two Thirds<\/strong>. S&eacute;lectionnez cette mise en page si vous souhaitez qu&rsquo;une colonne soit plus large qu&rsquo;un demi-champ sans pour autant occuper toute la largeur du conteneur parent. Le champ <strong>Pays <\/strong>est un excellent exemple de colonne aux deux tiers.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Pour modifier le contenu de votre formulaire d&rsquo;exp&eacute;dition, enregistrez vos modifications et cliquez sur <strong>Back to Checkout Page<\/strong> en haut de l&rsquo;&eacute;diteur WordPress. Sous l&rsquo;onglet <strong>Design<\/strong>, personnalisez les champs de paiement pour l&rsquo;adresse de livraison, le mode de livraison et le r&eacute;sum&eacute; de la commande.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f656f7\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f656f7\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Funnel-%E2%80%B9-FunnelKit-%E2%80%94-FunnelKit-1024x274.png\" alt=\"L'onglet Design dans le tableau de bord de FunnelKit Builder\" class=\"wp-image-34126\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Pour ajouter de nouveaux champs de formulaire &agrave; la page de paiement, il suffit de les faire glisser du menu <strong>Fields <\/strong>de<strong> <\/strong>la barre lat&eacute;rale droite vers la section de votre choix.<\/p><p class=\"wp-block-paragraph\">Malheureusement, vous devez acheter le plan pro de FunnelKit Builder pour ajouter des champs premium comme <strong>Produits <\/strong>et <strong>Total de la commande<\/strong>.&nbsp;<\/p><p class=\"wp-block-paragraph\">Si vous souhaitez modifier l&rsquo;affichage des colonnes dans chaque section, cliquez sur un champ et maintenez-le enfonc&eacute;, puis d&eacute;posez-le &agrave; l&rsquo;endroit de votre choix. Vous pouvez &eacute;galement supprimer un champ en le survolant et en cliquant sur l&rsquo;ic&ocirc;ne <strong>X.<\/strong><\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f68258\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f68258\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Funnel-%E2%80%B9-FunnelKit-%E2%80%94-FunnelKit-1-1024x150.png\" alt=\"La section Informations d'exp&eacute;dition sous l'onglet Design, avec le champ Pr&eacute;nom s&eacute;lectionn&eacute;\" class=\"wp-image-34127\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Il est &eacute;galement possible de personnaliser l&rsquo;&eacute;tiquette de chaque champ afin que les clients puissent remplir le formulaire correctement et terminer leur processus de paiement sans aucune confusion.<\/p><p class=\"wp-block-paragraph\">Pour ce faire, cliquez une seule fois sur un champ et la fen&ecirc;tre contextuelle <strong>Modifier le champ <\/strong>s&rsquo;affiche. Saisissez ensuite le nom de l&rsquo;&eacute;tiquette et la valeur du Placeholder. Cliquez sur <strong>Update <\/strong>pour enregistrer les modifications.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f6acbd\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f6acbd\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"536\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Email-Field-pop-up-in-the-Design-tab-1024x536-1.png\/public\" alt=\"La fen&ecirc;tre contextuelle Field - Email dans l'onglet Design\" class=\"wp-image-34128\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Email-Field-pop-up-in-the-Design-tab-1024x536-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Email-Field-pop-up-in-the-Design-tab-1024x536-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Email-Field-pop-up-in-the-Design-tab-1024x536-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Email-Field-pop-up-in-the-Design-tab-1024x536-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Une fois que tout est configur&eacute;, n&rsquo;oubliez pas de cliquer sur <strong>Save <\/strong>pour ne pas perdre votre progression.<\/p><h3 class=\"wp-block-heading\" id=\"h-personnaliser-le-champ-coupon-de-woocommerce-lors-du-paiement\">Personnaliser le champ Coupon de WooCommerce lors du paiement<\/h3><p class=\"wp-block-paragraph\">L&rsquo;int&eacute;gration d&rsquo;un champ de coupon sur votre page de paiement permet d&rsquo;offrir des r&eacute;ductions aux clients et d&rsquo;encourager la conversion.<\/p><p class=\"wp-block-paragraph\">Pour ajouter un champ de coupon, rendez-vous dans l&rsquo;&eacute;diteur Gutenberg et s&eacute;lectionnez le conteneur <strong>Checkout Form<\/strong>. Dans la barre lat&eacute;rale droite, naviguez jusqu&rsquo;&agrave; <strong>General<\/strong> &rarr; <strong>Collapsive Order Summary<\/strong>, puis cliquez sur le bouton <strong>Enable<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f6da78\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f6da78\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"397\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-collapsible-checkout-review-feature-offered-by-FunnelKit-Builder.png\/public\" alt='La fonction de \"Collapsive Order Summary\" propos&eacute;e par FunnelKit Builder ' class=\"wp-image-34130\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-collapsible-checkout-review-feature-offered-by-FunnelKit-Builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-collapsible-checkout-review-feature-offered-by-FunnelKit-Builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-collapsible-checkout-review-feature-offered-by-FunnelKit-Builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-collapsible-checkout-review-feature-offered-by-FunnelKit-Builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Faites d&eacute;filer jusqu&rsquo;au <strong>Coupon Button Text <\/strong>et saisissez un court appel &agrave; l&rsquo;action &ndash; la valeur par d&eacute;faut est <strong>Apply<\/strong>. Assurez-vous que le bouton <strong>Enable coupon <\/strong>est activ&eacute;.<\/p><p class=\"wp-block-paragraph\">Vous pouvez &eacute;galement masquer le champ du code de coupon et ne le rendre visible que lorsque les utilisateurs cliquent dessus en activant l&rsquo;option <strong>Collapsive Coupon Field.<\/strong><\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f7b316\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f7b316\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"261\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-collapsible-coupon-field-feature-offered-by-FunnelKit-Builder.png\/public\" alt=\"La fonctionnalit&eacute; de champ de coupon r&eacute;tractable offerte par FunnelKit Builder\" class=\"wp-image-34131\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-collapsible-coupon-field-feature-offered-by-FunnelKit-Builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-collapsible-coupon-field-feature-offered-by-FunnelKit-Builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-collapsible-coupon-field-feature-offered-by-FunnelKit-Builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-collapsible-coupon-field-feature-offered-by-FunnelKit-Builder.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Conseil de pro                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Avant d'afficher les produits sur la page de paiement, assurez-vous que vous avez d&eacute;j&agrave; ajout&eacute; des produits &agrave; votre boutique WooCommerce. Vous ne savez pas comment faire ? Suivez les &eacute;tapes de notre <a href=\"\/fr\/tutoriels\/woocommerce\/\">tutoriel WooCommerce<\/a>.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-ajouter-des-produits-a-votre-page-de-paiement\">Ajouter des produits &agrave; votre page de paiement<\/h3><p class=\"wp-block-paragraph\">Cliquez sur <strong>Back to Checkout Page<\/strong>, ouvrez l&rsquo;onglet <strong>Products <\/strong>et cliquez sur <strong>Add product<\/strong>. Recherchez les produits que vous avez d&eacute;j&agrave; ajout&eacute;s et s&eacute;lectionnez <strong>Add<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f7e1f4\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f7e1f4\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"398\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Add-Product-pop-up-in-the-FunnelKit-Builder-dashboard-1024x398-1.png\/public\" alt=\"La pop-up Ajouter un produit dans le tableau de bord de FunnelKit Builder \" class=\"wp-image-34132\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Add-Product-pop-up-in-the-FunnelKit-Builder-dashboard-1024x398-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Add-Product-pop-up-in-the-FunnelKit-Builder-dashboard-1024x398-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Add-Product-pop-up-in-the-FunnelKit-Builder-dashboard-1024x398-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Add-Product-pop-up-in-the-FunnelKit-Builder-dashboard-1024x398-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Ensuite, configurez les param&egrave;tres de remise si vous en avez, et d&eacute;finissez la quantit&eacute; en stock pour chaque produit. N&rsquo;oubliez pas d&rsquo;enregistrer vos modifications une fois qu&rsquo;elles sont termin&eacute;es.<\/p><p class=\"wp-block-paragraph\">Si vous passez &agrave; la version pro, FunnelKit offre &eacute;galement la possibilit&eacute; de cr&eacute;er des offres de vente incitative en un clic pour stimuler vos ventes. Pour ce faire, cliquez sur l&rsquo;<strong>ic&ocirc;ne Retour (&larr;)<\/strong>. Sous <strong>Steps<\/strong>, s&eacute;lectionnez <strong>One Click Upsell <\/strong>et choisissez un template appropri&eacute;.<\/p><p class=\"wp-block-paragraph\">Pour am&eacute;liorer l&rsquo;exp&eacute;rience de l&rsquo;utilisateur, affichez vos produits et le formulaire de paiement sur la m&ecirc;me page &agrave; l&rsquo;aide de plugins.<\/p><h3 class=\"wp-block-heading\" id=\"h-personnalisation-des-options-de-paiement-sur-la-page-de-paiement\">Personnalisation des options de paiement sur la page de paiement<\/h3><p class=\"wp-block-paragraph\">Par d&eacute;faut, FunnelKit est compatible avec toutes les m&eacute;thodes de paiement support&eacute;es par WooCommerce, y compris le paiement &agrave; la livraison, les virements bancaires et les ch&egrave;ques.&nbsp;<\/p><p class=\"wp-block-paragraph\">Mais si vous voulez offrir plus d&rsquo;options de paiement, l&rsquo;installation de plugins comme <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce-gateway-stripe\/\" target=\"_blank\" rel=\"noopener\">WooCommerce Stripe Payment Gateway<\/a> peut faire l&rsquo;affaire. En plus des principaux fournisseurs de cartes de cr&eacute;dit et de d&eacute;bit comme Visa, MasterCard, UnionPay et American Express, ce plugin prend &eacute;galement en charge Google Pay et Apple Pay.<\/p><p class=\"wp-block-paragraph\">Malheureusement, si vous recevez principalement des paiements via PayPal, vous devez installer un plugin <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce-paypal-payments\/\" target=\"_blank\" rel=\"noopener\">WooCommerce PayPal Payments<\/a> s&eacute;par&eacute;<a href=\"https:\/\/wordpress.org\/plugins\/woocommerce-paypal-payments\/\" target=\"_blank\" rel=\"noopener\">.<\/a><\/p><p class=\"wp-block-paragraph\">Pour configurer Stripe pour WordPress, allez dans <strong>Extensions<\/strong> &rarr; <strong>Ajouter <\/strong>et entrez <strong>WooCommerce Stripe Payment Gateway <\/strong>dans le champ de recherche. Une fois trouv&eacute;, cliquez sur <strong>Installer maintenant<\/strong>, attendez quelques secondes et activez le plugin.<\/p><p class=\"wp-block-paragraph\">Ensuite, allez dans <strong>WooCommerce<\/strong> &rarr; <strong>R&eacute;glages <\/strong>dans le menu de gauche et ouvrez l&rsquo;onglet <strong>Paiements.<\/strong> De l&agrave;, activez toutes les m&eacute;thodes de paiement que vous pr&eacute;f&eacute;rez.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f819c9\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f819c9\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Reglages-WooCommerce-%E2%80%B9-hostinger-dev-19-xyz-%E2%80%94-WordPress-1-1024x369.png\" alt=\"La section M&eacute;thodes de paiement dans WooCommerce \" class=\"wp-image-34133\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-publier-votre-page-de-paiement-personnalisee-nbsp\">Publier votre page de paiement personnalis&eacute;e&nbsp;<\/h3><p class=\"wp-block-paragraph\">Pour lancer votre nouvelle page de paiement, retournez dans <strong>FunnelKit<\/strong> &rarr; <strong>Store Checkout<\/strong>, cliquez sur l&rsquo;ic&ocirc;ne &agrave; trois points &agrave; l&rsquo;int&eacute;rieur de la bo&icirc;te de paiement et s&eacute;lectionnez <strong>Publish<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a91582f84700\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a91582f84700\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"345\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Publish-button-in-FunnelKit-Builder_s-Checkout-dashboard-1024x345-1.png\/public\" alt=\"Le bouton Publier dans le tableau de bord Checkout de FunnelKit Builder \" class=\"wp-image-34134\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Publish-button-in-FunnelKit-Builder_s-Checkout-dashboard-1024x345-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Publish-button-in-FunnelKit-Builder_s-Checkout-dashboard-1024x345-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Publish-button-in-FunnelKit-Builder_s-Checkout-dashboard-1024x345-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-Publish-button-in-FunnelKit-Builder_s-Checkout-dashboard-1024x345-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Vous avez cr&eacute;&eacute; et publi&eacute; avec succ&egrave;s une page de paiement personnalis&eacute;e. Elle devrait s&rsquo;afficher automatiquement lorsque les utilisateurs cliquent sur leur panier.<\/p><p class=\"wp-block-paragraph\">Pour v&eacute;rifier, ouvrez votre navigateur et visitez votre site WordPress pour voir si la page de paiement personnalis&eacute;e de WooCommerce s&rsquo;affiche correctement.<\/p><p class=\"wp-block-paragraph\">Si votre site e-commerce affiche toujours le design par d&eacute;faut de WooCommerce, suivez les &eacute;tapes suivantes :<\/p><ol class=\"wp-block-list\">\n<li>Ouvrez votre tableau de bord WordPress et allez dans <strong>WooCommerce<\/strong> &rarr; <strong>R&eacute;glages<\/strong>.<\/li>\n\n\n\n<li>Choisissez l&rsquo;onglet <strong>Avanc&eacute; <\/strong>et descendez jusqu&rsquo;&agrave; <strong>Page de validation de commande<\/strong>.<\/li>\n\n\n\n<li>Ouvrez le menu d&eacute;roulant, saisissez l&rsquo;URL de votre page de paiement personnalis&eacute;e et attribuez la bonne page.<\/li>\n\n\n\n<li>Cliquez sur <strong>Enregistrer les modifications<\/strong>.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-personnalisation-de-la-page-de-paiement-de-woocommerce-pour-les-utilisateurs-avances-nbsp\">Personnalisation de la page de paiement de WooCommerce pour les utilisateurs avanc&eacute;s&nbsp;<\/h2><p class=\"wp-block-paragraph\">L&rsquo;utilisation d&rsquo;un code personnalis&eacute; vous permet de personnaliser davantage la page de paiement de WooCommerce. Cela dit, nous ne recommandons pas cette m&eacute;thode &agrave; ceux qui ne sont pas familiers avec l&rsquo;&eacute;dition de code, car les plus petites erreurs peuvent entra&icirc;ner des erreurs sur le site Web.<\/p><h3 class=\"wp-block-heading\" id=\"h-personnalisation-d-une-page-de-paiement-a-l-aide-d-un-code-personnalise\">Personnalisation d&rsquo;une page de paiement &agrave; l&rsquo;aide d&rsquo;un code personnalis&eacute;<\/h3><p class=\"wp-block-paragraph\">Vous pouvez ajouter des champs personnalis&eacute;s &agrave; votre page de paiement WooCommerce personnalis&eacute;e en modifiant le fichier <strong>functions.php <\/strong>de votre th&egrave;me.&nbsp;<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Vous n&#039;avez pas encore choisi de th&egrave;me WordPress ?                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Am&eacute;liorez l'aspect et la convivialit&eacute; de votre site e-commerce gr&acirc;ce &agrave; ces superbes <a href=\"\/fr\/tutoriels\/theme-woocommerce\/\">th&egrave;mes WooCommerce<\/a>.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Mais d&rsquo;abord, assurez-vous de <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/theme-enfant-wordpress\/\">cr&eacute;er un th&egrave;me enfant WordPress<\/a> afin que votre th&egrave;me parent ne soit pas affect&eacute; en cas d&rsquo;erreur.<\/p><p class=\"wp-block-paragraph\">Acc&eacute;dez aux fichiers de votre site WordPress. Vous pouvez utiliser un client FTP comme <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/utiliser-filezilla\/\">FileZilla<\/a> ou le <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/gestionnaire-fichiers-hostinger\/\">gestionnaire de fichiers<\/a> de votre compte d&rsquo;h&eacute;bergement. Si vous &ecirc;tes un utilisateur Hostinger, suivez simplement ces &eacute;tapes :<\/p><ol class=\"wp-block-list\">\n<li>Connectez-vous &agrave; votre compte hPanel, allez sur <strong>Sites Web <\/strong>et cliquez sur <strong>Tableau de bord <\/strong>&agrave; c&ocirc;t&eacute; de votre nom de domaine.<\/li>\n\n\n\n<li>Dans le menu de gauche, descendez jusqu&rsquo;&agrave; <strong>Fichiers<\/strong> &rarr; <strong>Gestionnaire de fichiers <\/strong>et choisissez <strong>Acc&eacute;der aux fichiers de (votre domaine)<\/strong>.<\/li>\n\n\n\n<li>Ouvrez <strong>public_html<\/strong> &rarr; <strong>wp-content<\/strong> &rarr; <strong>themes<\/strong>, et trouvez le th&egrave;me que vous utilisez actuellement.<\/li>\n\n\n\n<li>Localisez le fichier <strong>functions.php <\/strong>et faites un clic droit dessus, puis s&eacute;lectionnez <strong>Edit<\/strong>.<\/li>\n\n\n\n<li>&Eacute;crivez une fonction PHP qui contient le code que vous voulez ex&eacute;cuter au bas du fichier. Utilisez <strong>add_action() <\/strong>pour attacher votre fonction personnalis&eacute;e.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Par exemple, pour ajouter un nouveau champ, utilisez :&nbsp;<\/p><pre class=\"wp-block-preformatted\">add_action('woocommerce_after_order_notes', 'votre_fonction_personnalis&eacute;e');<\/pre><p class=\"wp-block-paragraph\">Sp&eacute;cifiez ensuite le type, tel que texte, case &agrave; cocher, classe, &eacute;tiquette, espace r&eacute;serv&eacute; et statut obligatoire :<\/p><pre class=\"wp-block-preformatted\">function votre_fonction_personnalis&eacute;e($checkout) {<br>    echo '&lt;div id=\"your_custom_div\"&gt;';<br>    woocommerce_form_field('your_custom_field', array(<br>        'type'          =&gt; 'text',<br>        'class'         =&gt; array('your-custom-class form-row-wide'),<br>        'label'         =&gt; __('Your Custom Field'),<br>        'placeholder'   =&gt; __('Enter something'),<br>        'required'      =&gt; true,<br>    ), $checkout-&gt;get_value('your_custom_field'));<br>    echo '&lt;\/div&gt;';<br>}<\/pre><p class=\"wp-block-paragraph\">Pour supprimer un champ, utilisez le filtre <strong>woocommerce_checkout_fields.<\/strong> Par exemple, si vous souhaitez supprimer le champ t&eacute;l&eacute;phone de facturation, entrez cet extrait de code :<\/p><pre class=\"wp-block-preformatted\">add_filter('woocommerce_checkout_fields', 'custom_remove_fields');\nfunction custom_remove_fields($fields) {\n    unset($fields['billing']['billing_phone']);\n    return $fields;\n}<\/pre><p class=\"wp-block-paragraph\">La modification des champs existants est &eacute;galement possible avec le filtre <strong>woocommerce_checkout_fields.<\/strong> Vous pouvez modifier les propri&eacute;t&eacute;s comme l&rsquo;&eacute;tiquette, la classe ou le type des champs existants.<\/p><p class=\"wp-block-paragraph\">En voici un exemple :<\/p><pre class=\"wp-block-preformatted\">add_filter('woocommerce_checkout_fields', 'custom_modify_fields');\nfunction custom_modify_fields($fields) {\n    $fields['billing']['billing_first_name']['label'] = 'New Label';\n    $fields['billing']['billing_first_name']['required'] = false;\n    return $fields;\n}<\/pre><p class=\"wp-block-paragraph\">Pour enregistrer les donn&eacute;es de vos champs personnalis&eacute;s lorsqu&rsquo;une commande est pass&eacute;e, utilisez le crochet d&rsquo;action <strong>woocommerce_checkout_update_order_meta :<\/strong><\/p><pre class=\"wp-block-preformatted\">add_action('woocommerce_checkout_update_order_meta', 'save_custom_field_data');\nfunction save_custom_field_data($order_id) {\n    if (!empty($_POST['your_custom_field'])) {\n        update_post_meta($order_id, 'Your Custom Field', sanitize_text_field($_POST['your_custom_field']));\n    }\n}<\/pre><h3 class=\"wp-block-heading\" id=\"h-appliquer-un-style-de-page-de-paiement-personnalise-avec-css\">Appliquer un style de page de paiement personnalis&eacute; avec CSS<\/h3><p class=\"wp-block-paragraph\">Les feuilles de style en cascade (CSS) sont l&rsquo;un des langages les plus populaires pour peaufiner l&rsquo;apparence de votre site WooCommerce. Il vous permet d&rsquo;ajuster les &eacute;l&eacute;ments visuels, notamment de modifier la couleur d&rsquo;arri&egrave;re-plan des champs et d&rsquo;arrondir leurs angles.<\/p><p class=\"wp-block-paragraph\">Il suffit d&rsquo;acc&eacute;der au personnalisateur CSS de WordPress en allant dans <strong>Apparence<\/strong> &rarr; <strong>Personnaliser. <\/strong>Dans le <strong>Personnalisateur du th&egrave;me<\/strong>, trouvez la section <strong>CSS additionnel <\/strong>dans le menu de gauche. C&rsquo;est l&agrave; que vous pouvez &eacute;crire ou coller votre code CSS personnalis&eacute;.<\/p><p class=\"wp-block-paragraph\">Pour personnaliser des &eacute;l&eacute;ments sp&eacute;cifiques de la page de paiement, vous devez conna&icirc;tre leurs s&eacute;lecteurs CSS en inspectant les &eacute;l&eacute;ments de la page. Si vous utilisez Google Chrome, cliquez avec le bouton droit de la souris sur n&rsquo;importe quel &eacute;l&eacute;ment de la page de paiement et s&eacute;lectionnez <strong>Inspecter<\/strong>. Cela ouvrira les outils de d&eacute;veloppement et mettra en &eacute;vidence la structure HTML s&eacute;lectionn&eacute;e.<\/p><p class=\"wp-block-paragraph\">Survolez les diff&eacute;rentes parties du code HTML pour trouver la partie correspondante de la page de paiement. Les outils de d&eacute;veloppement vous montreront les s&eacute;lecteurs CSS pour ces &eacute;l&eacute;ments.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"191\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-WordPress-Customizer-interface-with-Chrome_s-code-inspection-tool-opened-1024x191-1.png\/public\" alt=\"L'interface du personnalisateur de WordPress avec l'outil d'inspection du code de Chrome ouvert\" class=\"wp-image-34135\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-WordPress-Customizer-interface-with-Chrome_s-code-inspection-tool-opened-1024x191-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-WordPress-Customizer-interface-with-Chrome_s-code-inspection-tool-opened-1024x191-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-WordPress-Customizer-interface-with-Chrome_s-code-inspection-tool-opened-1024x191-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/The-WordPress-Customizer-interface-with-Chrome_s-code-inspection-tool-opened-1024x191-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Dans la section <strong>CSS additionnel<\/strong>, commencez &agrave; &eacute;crire des r&egrave;gles CSS ciblant les s&eacute;lecteurs que vous avez identifi&eacute;s. Par exemple, pour modifier la couleur d&rsquo;arri&egrave;re-plan du bouton de paiement, vous pourriez &eacute;crire quelque chose comme ceci :<\/p><pre class=\"wp-block-preformatted\">.woocommerce-checkout #place_order {<br>    background-color: #000; \/* Remplacer #000 par la couleur souhait&eacute;e *\/<br>    color: #fff; \/* Modifier la couleur du texte si n&eacute;cessaire *\/<br>}<\/pre><p class=\"wp-block-paragraph\">Vous pouvez effectuer des modifications similaires pour d&rsquo;autres &eacute;l&eacute;ments tels que les champs de formulaire, les &eacute;tiquettes, les en-t&ecirc;tes, etc.<\/p><p class=\"wp-block-paragraph\">Une fois que vous &ecirc;tes satisfait des modifications, cliquez sur <strong>Publier<\/strong>. Visitez ensuite votre page de paiement pour vous assurer que les modifications apparaissent comme pr&eacute;vu.<\/p><h3 class=\"wp-block-heading\" id=\"h-utiliser-les-crochets-d-action-de-woocommerce\">Utiliser les crochets d&rsquo;action de WooCommerce<\/h3><p class=\"wp-block-paragraph\">Les crochets d&rsquo;action dans WooCommerce et WordPress sont des points o&ugrave; vous pouvez ins&eacute;rer du code PHP personnalis&eacute;. Ces crochets s&rsquo;ex&eacute;cutent &agrave; des moments pr&eacute;cis de l&rsquo;ex&eacute;cution d&rsquo;une page, ce qui vous permet de modifier ou d&rsquo;am&eacute;liorer ses fonctionnalit&eacute;s.<\/p><p class=\"wp-block-paragraph\">Par exemple, vous pouvez utiliser des crochets d&rsquo;action pour ajouter des logos de carte de cr&eacute;dit sur la page de paiement ou de panier, ce qui permet d&rsquo;am&eacute;liorer la confiance des utilisateurs et de r&eacute;duire le nombre d&rsquo;abandons de panier.<\/p><p class=\"wp-block-paragraph\">Les noms de ces crochets sont g&eacute;n&eacute;ralement explicites et indiquent o&ugrave; le crochet permet d&rsquo;ins&eacute;rer du code. Des exemples communs de crochets d&rsquo;action WooCommerce sont :&nbsp;<\/p><pre class=\"wp-block-preformatted\">woocommerce_before_cart \nwoocommerce_checkout_before_customer_details \nwoocommerce_after_main_content<\/pre><p class=\"wp-block-paragraph\">Chaque crochet correspond &agrave; une partie diff&eacute;rente des pages de WooCommerce, telles que le panier, la caisse et la page de produit unique.<\/p><p class=\"wp-block-paragraph\">Pour ajouter un &eacute;l&eacute;ment, vous pouvez utiliser la fonction <strong>add_action <\/strong>dans le fichier <strong>functions.php <\/strong>de votre th&egrave;me<strong>.<\/strong> Par exemple, pour ajouter un message avant le formulaire d&rsquo;exp&eacute;dition, ins&eacute;rez l&rsquo;extrait suivant :<\/p><pre class=\"wp-block-preformatted\">add_action( 'woocommerce_before_checkout_shipping_form', function() {\n    echo 'Your custom message or HTML here';\n});<\/pre><p class=\"wp-block-paragraph\">Ce code ins&eacute;rera le contenu que vous incluez dans l&rsquo;instruction <strong>echo <\/strong>pendant que le crochet <strong>woocommerce_before_checkout_shipping_form <\/strong>est ex&eacute;cut&eacute;<strong>.<\/strong><\/p><p class=\"wp-block-paragraph\">Bien que les crochets d&rsquo;action servent principalement &agrave; ajouter du contenu, vous pouvez les utiliser pour supprimer des &eacute;l&eacute;ments en d&eacute;crochant ou en rempla&ccedil;ant les fonctions qui ajoutent le contenu par d&eacute;faut. Par exemple, si un crochet d&rsquo;action sp&eacute;cifique appelle une fonction qui ajoute un certain champ ou une certaine section que vous souhaitez supprimer, entrez <strong>remove_action <\/strong>pour d&eacute;crocher cette fonction.<\/p><p class=\"wp-block-paragraph\">Apr&egrave;s avoir ajout&eacute; votre code personnalis&eacute;, testez votre boutique WooCommerce pour vous assurer que les modifications fonctionnent comme pr&eacute;vu. Veillez &agrave; effectuer des tests approfondis, car de petites erreurs peuvent avoir un impact significatif sur la fonctionnalit&eacute; de votre boutique.<\/p><p class=\"wp-block-paragraph\">Vous pouvez &eacute;galement installer un plugin de gestion d&rsquo;extraits de code comme Code Snippets. Cette m&eacute;thode permet de g&eacute;rer chaque extrait de code s&eacute;par&eacute;ment.<\/p><p class=\"wp-block-paragraph\">Notez que certains th&egrave;mes WooCommerce ont &eacute;galement leurs propres crochets pour une personnalisation plus pouss&eacute;e. Par exemple, le th&egrave;me Shoptimizer comprend des crochets pour modifier l&rsquo;en-t&ecirc;te, le pied de page et la barre lat&eacute;rale.<\/p><p class=\"wp-block-paragraph\">Pour en savoir plus sur le sujet, notamment sur ce qu&rsquo;est un crochet WordPress et comment il fonctionne, nous vous recommandons vivement de lire notre tutoriel sur les <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/hooks-wordpress\/\">crochets WordPress.<\/a><\/p><h2 class=\"wp-block-heading\" id=\"h-problemes-courants-lies-a-la-page-de-paiement-de-woocommerce\">Probl&egrave;mes courants li&eacute;s &agrave; la page de paiement de WooCommerce<\/h2><p class=\"wp-block-paragraph\">Pour maintenir une exp&eacute;rience client harmonieuse, il est essentiel de comprendre les erreurs courantes de la page de paiement de WooCommerce et de savoir comment les r&eacute;soudre.<\/p><p class=\"wp-block-paragraph\">Dans cette section, nous aborderons bri&egrave;vement les principales erreurs de la page de paiement qui se produisent fr&eacute;quemment :&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-les-modes-de-paiement-ne-s-affichent-pas\">Les modes de paiement ne s&rsquo;affichent pas<\/h3><p class=\"wp-block-paragraph\">Dans la plupart des cas, ce probl&egrave;me est d&ucirc; &agrave; des param&egrave;tres incorrects ou &agrave; des probl&egrave;mes de compatibilit&eacute; avec la passerelle de paiement.&nbsp;<\/p><p class=\"wp-block-paragraph\">Pour r&eacute;soudre ce probl&egrave;me, v&eacute;rifiez la configuration de votre passerelle de paiement et assurez-vous qu&rsquo;elle est correctement param&eacute;tr&eacute;e. V&eacute;rifiez &eacute;galement si votre version actuelle de WooCommerce prend en charge les processeurs de paiement pr&eacute;f&eacute;r&eacute;s.<\/p><h3 class=\"wp-block-heading\" id=\"h-problemes-de-conflits-entre-plugins-nbsp\">Probl&egrave;mes de conflits entre plugins&nbsp;<\/h3><p class=\"wp-block-paragraph\">Bien qu&rsquo;ils permettent d&rsquo;am&eacute;liorer facilement les fonctionnalit&eacute;s de votre site, les plugins ne sont pas toujours compatibles entre eux.<\/p><p class=\"wp-block-paragraph\">Les conflits entre les plugins peuvent entra&icirc;ner des erreurs dans la page de paiement et perturber l&rsquo;exp&eacute;rience de navigation de l&rsquo;utilisateur. Pour les r&eacute;soudre, d&eacute;sactivez les plugins un par un afin d&rsquo;identifier le coupable. Ensuite, mettez &agrave; jour le plugin en conflit ou cherchez une solution de remplacement si le probl&egrave;me persiste.<\/p><h3 class=\"wp-block-heading\" id=\"h-problemes-de-fonctionnalite-des-themes\">Probl&egrave;mes de fonctionnalit&eacute; des th&egrave;mes<\/h3><p class=\"wp-block-paragraph\">Il arrive que le th&egrave;me actif ne soit pas enti&egrave;rement compatible avec WooCommerce, ce qui entra&icirc;ne des probl&egrave;mes de paiement. Pour r&eacute;soudre ce probl&egrave;me, contactez le d&eacute;veloppeur du th&egrave;me pour obtenir de l&rsquo;aide. Vous pouvez &eacute;galement passer temporairement &agrave; un autre th&egrave;me pour voir si le probl&egrave;me dispara&icirc;t.<\/p><h3 class=\"wp-block-heading\" id=\"h-lenteur-du-chargement\">Lenteur du chargement<\/h3><p class=\"wp-block-paragraph\">Des pages de paiement qui ne r&eacute;pondent pas et qui se chargent lentement rendent l&rsquo;exp&eacute;rience d&rsquo;achat globale d&eacute;sagr&eacute;able pour les clients.<\/p><p class=\"wp-block-paragraph\">Pour &eacute;viter cela, assurez-vous de choisir un fournisseur d&rsquo;h&eacute;bergement WooCommerce fiable. L&rsquo;h&eacute;bergement WooCommerce d&rsquo;Hostinger utilise un serveur LiteSpeed tr&egrave;s performant et des fonctions d&rsquo;optimisation de la vitesse, notamment la mise en cache d&rsquo;objets pour WordPress. Notre outil de mise en cache d&rsquo;objets &eacute;limine les requ&ecirc;tes r&eacute;p&eacute;titives de la base de donn&eacute;es, ce qui permet &agrave; votre boutique en ligne d&rsquo;&ecirc;tre jusqu&rsquo;&agrave; trois fois plus rapide.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p class=\"wp-block-paragraph\">Les boutiques de commerce &eacute;lectronique sont de toutes formes et de toutes tailles, mais elles ont un objectif commun : vendre des produits ou des services en ligne. Avec des plugins de commerce &eacute;lectronique comme WooCommerce, vous pouvez cr&eacute;er une boutique en ligne facilement sans aucune connaissance en mati&egrave;re de codage ou de conception.<\/p><p class=\"wp-block-paragraph\">Cela dit, la page de paiement par d&eacute;faut de WooCommerce peut ne pas offrir le meilleur design et la meilleure exp&eacute;rience utilisateur. En personnalisant la page de paiement par d&eacute;faut de WooCommerce, vous pouvez cr&eacute;er une exp&eacute;rience d&rsquo;achat transparente et agr&eacute;able et augmenter votre taux de conversion.<\/p><p class=\"wp-block-paragraph\">Dans ce tutoriel, nous avons expliqu&eacute; comment cr&eacute;er une page de paiement WooCommerce personnalis&eacute;e en utilisant des plugins comme FunnelKit Builder ou en &eacute;ditant du code.<\/p><p class=\"wp-block-paragraph\">Nous esp&eacute;rons que ce tutoriel vous a fourni les informations n&eacute;cessaires pour personnaliser les pages de paiement de WooCommerce. Bonne chance avec votre commerce en ligne !<\/p><h2 class=\"wp-block-heading\" id=\"h-comment-personnaliser-la-page-de-paiement-woocommerce-faq-nbsp\">Comment personnaliser la page de paiement WooCommerce &ndash; FAQ&nbsp;<\/h2><p class=\"wp-block-paragraph\">Trouvez les r&eacute;ponses aux questions les plus fr&eacute;quemment pos&eacute;es sur la personnalisation de la page de paiement de WooCommerce.<\/p><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1723057376394\"><h3 class=\"schema-faq-question\">Comment personnaliser la page de paiement dans WooCommerce sans plugin ?<\/h3> <p class=\"schema-faq-answer\">Pour personnaliser la page de paiement de WooCommerce sans plugin, vous devez modifier les fichiers du mod&egrave;le de paiement.&nbsp;Il s&rsquo;agit d&rsquo;acc&eacute;der &agrave; votre th&egrave;me WordPress, de copier le fichier mod&egrave;le de WooCommerce (<strong>checkout\/form-checkout.php<\/strong>) dans le dossier de votre th&egrave;me et d&rsquo;y apporter des modifications. Veillez &agrave; utiliser un th&egrave;me enfant pour &eacute;viter les erreurs lors des modifications.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1723057441200\"><h3 class=\"schema-faq-question\">Comment activer les adresses de livraison dans WooCommerce ?<\/h3> <p class=\"schema-faq-answer\">Dans WooCommerce, vous pouvez activer les adresses de livraison en acc&eacute;dant &agrave; votre tableau de bord WordPress et en allant dans <strong>WooCommerce<\/strong> &rarr; <strong>R&eacute;glages<\/strong> &rarr; <strong>Exp&eacute;dition.&nbsp;<\/strong><br>Ensuite, assurez-vous que l&rsquo;option <strong>Zones d&rsquo;exp&eacute;dition <\/strong>est configur&eacute;e afin de pouvoir exp&eacute;dier dans le monde entier ou dans des r&eacute;gions sp&eacute;cifiques. Cochez ensuite la case <strong>Activer l&rsquo;exp&eacute;dition <\/strong>dans les <strong>r&eacute;galges d&rsquo;exp&eacute;dition <\/strong>pour permettre aux clients de saisir des adresses de livraison distinctes.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1723057452223\"><h3 class=\"schema-faq-question\">O&ugrave; puis-je trouver le template de page de paiement WooCommerce ?<\/h3> <p class=\"schema-faq-answer\">Le template de page de paiement WooCommerce se trouve dans le r&eacute;pertoire du plugin WooCommerce de votre installation WordPress. Pour le localiser et le modifier, acc&eacute;dez aux fichiers de votre site via un gestionnaire de fichiers ou un client FTP. Ensuite, rendez-vous sur \\wp-content\\plugins\\woocommerce\\templates\\checkout .<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Personnaliser l&rsquo;exp&eacute;rience de paiement sur votre boutique WooCommerce peut aider &agrave; r&eacute;duire les taux d&rsquo;abandon de panier, encourager les clients &agrave; terminer leurs achats, et m&ecirc;me les inciter &agrave; d&eacute;penser plus. Dans ce tutoriel, nous allons vous expliquer &eacute;tape par &eacute;tape comment personnaliser la page de paiement de votre boutique eCommerce, que vous soyez un [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/personnaliser-la-page-de-paiement-de-woocommerce\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":355,"featured_media":33983,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Comment personnaliser la page de paiement de WooCommerce","rank_math_description":"Apprenez \u00e0 personnaliser la page de paiement WooCommerce pour am\u00e9liorer l'UX, augmenter les conversions et avoir une exp\u00e9rience fluide.","rank_math_focus_keyword":"personnaliser la page de paiement woocommerce","footnotes":""},"categories":[5901,5848],"tags":[],"class_list":["post-33973","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/customize-woocommerce-checkout\/","default":1},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/personnaliser-la-page-de-paiement-de-woocommerce\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-personalizar-el-checkout-de-woocommerce\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/customize-woocommerce-checkout\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/customize-woocommerce-checkout\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/customize-woocommerce-checkout\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/customize-woocommerce-checkout\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/customize-woocommerce-checkout\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/customize-woocommerce-checkout\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/customize-woocommerce-checkout\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-personalizar-el-checkout-de-woocommerce\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-personalizar-el-checkout-de-woocommerce\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-personalizar-el-checkout-de-woocommerce\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/33973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/355"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=33973"}],"version-history":[{"count":13,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/33973\/revisions"}],"predecessor-version":[{"id":40684,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/33973\/revisions\/40684"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media\/33983"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=33973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=33973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=33973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}