[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fTxVIM-t8imOBdmigwI_ivVSg4RvdXGH6kE1O6cvRBj8":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":60,"megamenu":141,"$fU2fMacW1xsv3erf-NgVvy0u6AckWwjRd5MlL5FMXXkg":197,"header-db":211,"footer-db":224},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"title":23,"slug":24,"metaDescription":25,"category":26,"tags":27,"difficulty":33,"psVersions":34,"content":38,"faq":39,"tldr":55,"readingTime":56,"generatedAt":57,"publishDate":57,"relatedArticles":58,"sourceCategory":59},"Personnaliser le message de confirmation de commande PrestaShop","personnaliser-message-confirmation-commande-prestashop","Guide complet pour ajouter et styliser un message personnalisé sur la page de confirmation de commande PrestaShop 1.7 et 8.x via templates et CSS.","developpement",[28,29,30,31,32],"confirmation commande","template Smarty","personnalisation CSS","traduction PrestaShop","page order-confirmation","debutant",[35,36,37],"1.6","1.7","8.x","\u003Ch2>Pourquoi personnaliser la page de confirmation de commande\u003C\u002Fh2>\n\u003Cp>La page de confirmation de commande est le dernier point de contact avec votre client après un achat. C'est un emplacement stratégique pour :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Remercier le client avec un message personnalisé\u003C\u002Fli>\n\u003Cli>Communiquer des informations sur les délais de livraison\u003C\u002Fli>\n\u003Cli>Proposer une inscription à la newsletter ou un code promo pour un prochain achat\u003C\u002Fli>\n\u003Cli>Afficher des consignes spécifiques selon le mode de paiement choisi\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Pourtant, beaucoup de marchands laissent cette page dans son état par défaut. Voyons comment la personnaliser proprement, en respectant les bonnes pratiques PrestaShop.\u003C\u002Fp>\n\u003Ch2>Méthode 1 : utiliser le système de traduction natif (recommandé)\u003C\u002Fh2>\n\u003Cp>PrestaShop intègre un système de traduction basé sur la fonction Smarty \u003Ccode>{l}\u003C\u002Fcode>. Si le template de votre module de paiement utilise déjà cette syntaxe, vous pouvez modifier le texte directement depuis le back-office sans toucher au code.\u003C\u002Fp>\n\u003Ch3>Fonctionnement du tag `{l}`\u003C\u002Fh3>\n\u003Cp>Dans les fichiers \u003Ccode>.tpl\u003C\u002Fcode> des modules de paiement, les messages sont déclarés ainsi :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{l s='Your order is confirmed' mod='ps_wirepayment'}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le paramètre \u003Ccode>s\u003C\u002Fcode> contient la chaîne source, et \u003Ccode>mod\u003C\u002Fcode> identifie le module auquel appartient cette traduction.\u003C\u002Fp>\n\u003Ch3>Modifier la traduction dans le back-office\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Sur PrestaShop 8.x :\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Col>\n\u003Cli>Rendez-vous dans **International > Traductions**\u003C\u002Fli>\n\u003Cli>Sélectionnez **Modifier les traductions**\u003C\u002Fli>\n\u003Cli>Choisissez le type **Traductions des modules installés**\u003C\u002Fli>\n\u003Cli>Sélectionnez le module de paiement concerné (ex : `ps_wirepayment`)\u003C\u002Fli>\n\u003Cli>Recherchez la chaîne à modifier et remplacez-la par votre message personnalisé\u003C\u002Fli>\n\u003Cli>Enregistrez\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Sur PrestaShop 1.6 :\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Le chemin était \u003Cstrong>Localisation > Traductions\u003C\u002Fstrong>, puis sélectionner le module dans le menu déroulant.\u003C\u002Fp>\n\u003Cp>Cette approche est la plus propre car elle est réversible, compatible avec le multilingue, et ne nécessite aucune modification de fichier.\u003C\u002Fp>\n\u003Ch2>Méthode 2 : modifier le template du module de paiement\u003C\u002Fh2>\n\u003Cp>Si vous avez besoin d'ajouter un bloc de contenu entièrement nouveau (et pas seulement modifier un texte existant), il faut intervenir sur le template.\u003C\u002Fp>\n\u003Ch3>Localiser le bon fichier template\u003C\u002Fh3>\n\u003Cp>Pour identifier le fichier à modifier, utilisez l'inspecteur de votre navigateur :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Ouvrez votre page de confirmation de commande\u003C\u002Fli>\n\u003Cli>Faites un clic droit sur la zone à modifier\u003C\u002Fli>\n\u003Cli>Sélectionnez **Inspecter** (Chrome\u002FEdge) ou **Examiner l'élément** (Firefox)\u003C\u002Fli>\n\u003Cli>Identifiez les classes CSS et la structure HTML pour retrouver le fichier `.tpl` correspondant\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Emplacements typiques :\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**PrestaShop 8.x \u002F 1.7 :** `themes\u002Fvotre-theme\u002Fmodules\u002Fps_wirepayment\u002Fviews\u002Ftemplates\u002Fhook\u002Fpayment_return.tpl`\u003C\u002Fli>\n\u003Cli>**PrestaShop 1.6 :** `modules\u002Fle_module\u002Fviews\u002Ftemplates\u002Fhook\u002Fpayment_return.tpl`\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Ajouter un message avec traduction intégrée\u003C\u002Fh3>\n\u003Cp>Dans le fichier template, ajoutez votre message en utilisant systématiquement le tag de traduction :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n<div class=\"order-confirmation-message\">\n  <p>{l s='Merci pour votre commande ! Notre équipe la prépare avec soin.' mod='ps_wirepayment'}<\u002Fp>\n  <p>{l s='Vous recevrez un email de suivi dès l\\'expédition.' mod='ps_wirepayment'}<\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Bonne pratique PrestaShop 8.x :\u003C\u002Fstrong> Ne modifiez jamais les fichiers du module directement. Utilisez le système de surcharge de thème en copiant le template dans \u003Ccode>themes\u002Fvotre-theme\u002Fmodules\u002Fnom_module\u002F\u003C\u002Fcode>.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>Méthode 3 : styliser le message en CSS (la bonne façon)\u003C\u002Fh2>\n\u003Cp>Une fois votre message en place, le stylage doit se faire exclusivement en CSS externe. Évitez le CSS inline qui rend la maintenance difficile.\u003C\u002Fp>\n\u003Ch3>La mauvaise pratique (CSS inline)\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* ❌ À éviter : CSS inline difficile à maintenir *}\n<p style=\"font-size: 18px; font-style: italic; color: #333;\">\n  {l s='Votre message' mod='ps_wirepayment'}\n<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>La bonne pratique (classe CSS dédiée)\u003C\u002Fh3>\n\u003Cp>Dans votre template :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* ✅ Recommandé : classe CSS séparée *}\n<div class=\"order-confirmation-custom\">\n  <p class=\"confirmation-thanks\">\n    {l s='Merci pour votre confiance !' mod='ps_wirepayment'}\n  <\u002Fp>\n  <p class=\"confirmation-details\">\n    {l s='Votre commande sera expédiée sous 48h.' mod='ps_wirepayment'}\n  <\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Dans votre fichier CSS (généralement \u003Ccode>themes\u002Fvotre-theme\u002Fassets\u002Fcss\u002Fcustom.css\u003C\u002Fcode>) :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n.order-confirmation-custom {\n  background-color: #f8f9fa;\n  border-left: 4px solid #28a745;\n  padding: 20px;\n  margin: 20px 0;\n  border-radius: 4px;\n}\n\n.confirmation-thanks {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: #2d3436;\n  margin-bottom: 8px;\n}\n\n.confirmation-details {\n  font-style: italic;\n  color: #636e72;\n  font-size: 0.95rem;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Pourquoi éviter les balises HTML de mise en forme\u003C\u002Fh3>\n\u003Cp>Les balises comme \u003Ccode>\u003Ci>\u003C\u002Fcode>, \u003Ccode>\u003Cb>\u003C\u002Fcode>, \u003Ccode>\u003Cfont>\u003C\u002Fcode> sont dépréciées ou sémantiquement incorrectes pour du stylage visuel. Préférez toujours le CSS :\u003C\u002Fp>\n\u003Ctr>\u003Cth>Balise HTML (à éviter)\u003C\u002Fth>\u003Cth>Propriété CSS (à utiliser)\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`\u003Ci>`\u003C\u002Fth>\u003Cth>`font-style: italic;`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`\u003Cb>`\u003C\u002Fth>\u003Cth>`font-weight: bold;`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`\u003Cfont size=\"...\">`\u003C\u002Fth>\u003Cth>`font-size: 18px;`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`\u003Cfont color=\"...\">`\u003C\u002Fth>\u003Cth>`color: #333;`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ch2>Méthode avancée : hook personnalisé (PrestaShop 8.x)\u003C\u002Fh2>\n\u003Cp>Pour une solution plus robuste qui survit aux mises à jour du thème, vous pouvez utiliser un hook personnalisé dans un module :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F Dans votre module personnalisé\npublic function hookDisplayOrderConfirmation($params)\n{\n    $order = $params['order'];\n    \n    $this->context->smarty->assign([\n        'order_reference' => $order->reference,\n        'payment_method' => $order->payment,\n        'custom_message' => $this->getCustomMessage($order->payment),\n    ]);\n    \n    return $this->display(__FILE__, 'views\u002Ftemplates\u002Fhook\u002Forder_confirmation_message.tpl');\n}\n\nprivate function getCustomMessage(string $paymentMethod): string\n{\n    $messages = [\n        'Virement bancaire' => $this->l('Votre commande sera validée dès réception du virement.'),\n        'PayPal' => $this->l('Votre paiement PayPal a été confirmé.'),\n    ];\n    \n    return $messages[$paymentMethod] ?? $this->l('Merci pour votre commande !');\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette approche permet d'afficher un message différent selon le mode de paiement, tout en restant découplé du thème.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques à retenir\u003C\u002Fh2>\n\u003Col>\n\u003Cli>**Toujours utiliser `{l s='...' mod='...'}` :** Même pour du contenu qui semble statique, le tag de traduction permet la gestion multilingue et la modification via le back-office.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Col>\n\u003Cli>**Séparer contenu et présentation :** Le HTML dans les templates, le CSS dans les feuilles de style. Jamais de `style=\"...\"` en attribut.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Col>\n\u003Cli>**Surcharger, ne jamais modifier le core :** Copiez les templates dans votre thème, créez un module pour les hooks. Les modifications directes seront perdues à la prochaine mise à jour.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Col>\n\u003Cli>**Tester avec l'inspecteur avant de coder :** Un clic droit > Inspecter vous fait gagner du temps en identifiant précisément l'élément DOM et les classes CSS en jeu.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Col>\n\u003Cli>**Vider le cache après modification :** PrestaShop met en cache les templates Smarty. Après toute modification, videz le cache dans **Paramètres avancés > Performances** ou supprimez le contenu de `var\u002Fcache\u002F`.\u003C\u002Fli>\n\u003C\u002Ful>",[40,43,46,49,52],{"q":41,"a":42},"Comment ajouter un message personnalisé sur la page de confirmation de commande PrestaShop ?","Trois options s'offrent à vous selon votre besoin. La plus simple : utilisez le système de traduction natif (International > Traductions) pour modifier les textes existants sans toucher au code. Si vous devez ajouter un nouveau bloc, modifiez le template payment_return.tpl du module de paiement en utilisant la surcharge de thème. Pour une solution pérenne sur PrestaShop 8.x, créez un module qui se greffe sur le hook displayOrderConfirmation.",{"q":44,"a":45},"Comment styliser un message sur la page de confirmation sans utiliser de CSS inline ?","Ajoutez une classe CSS à votre élément HTML dans le template Smarty (par exemple class=\"confirmation-thanks\"), puis définissez les styles dans le fichier CSS de votre thème (custom.css ou theme.css). Cette séparation facilite la maintenance et permet de modifier l'apparence sans toucher aux templates. Utilisez les propriétés CSS comme font-style: italic, font-size ou font-weight plutôt que les anciennes balises HTML de mise en forme.",{"q":47,"a":48},"Les modifications du template de confirmation de commande sont-elles perdues après une mise à jour PrestaShop ?","Oui, si vous modifiez directement les fichiers du module. Pour éviter cela, utilisez le mécanisme de surcharge de thème : copiez le template dans themes\u002Fvotre-theme\u002Fmodules\u002Fnom_module\u002Fviews\u002Ftemplates\u002Fhook\u002F. PrestaShop chargera cette version en priorité. Mieux encore, créez un module personnalisé avec le hook displayOrderConfirmation pour une solution totalement indépendante du thème et du module de paiement.",{"q":50,"a":51},"Comment afficher un message différent selon le mode de paiement choisi ?","Créez un module personnalisé qui implémente le hook displayOrderConfirmation. Ce hook reçoit l'objet Order en paramètre, qui contient la propriété payment indiquant le mode de paiement utilisé. Vous pouvez alors conditionner le message affiché selon cette valeur, par exemple un rappel de RIB pour les virements ou une confirmation instantanée pour PayPal.",{"q":53,"a":54},"Comment trouver le fichier template responsable de la page de confirmation de commande ?","Utilisez l'inspecteur de votre navigateur (clic droit > Inspecter l'élément) pour identifier les classes CSS de la zone concernée. Sur PrestaShop 8.x et 1.7, le template principal est généralement dans themes\u002Fvotre-theme\u002Fmodules\u002Fnom_module_paiement\u002Fviews\u002Ftemplates\u002Fhook\u002Fpayment_return.tpl. Vous pouvez aussi activer le mode debug Smarty dans Paramètres avancés > Performances pour voir les chemins des templates directement dans le code source HTML.","Pour personnaliser le message de confirmation de commande PrestaShop, utilisez le système de traduction natif pour modifier les textes existants, ou surchargez le template payment_return.tpl pour ajouter du contenu. Stylisez toujours via CSS externe avec des classes dédiées, jamais en inline.",5,"2026-03-21T14:34:12.000Z",[],"PrestaShop pour les développeurs",{"columns":61},[62,78,108,129],{"title":63,"links":64},"Plateforme",[65,69,72,75],{"label":66,"href":67,"external":68},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":70,"href":71,"external":68},"Devenir Ambassadeur","\u002Fambassadeur",{"label":73,"href":74,"external":68},"Modules PrestaShop","\u002Fmodules",{"label":76,"href":77,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":79,"links":80},"Le Synedre",[81,84,87,90,93,96,99,102,105],{"label":82,"href":83,"external":68},"L'histoire","\u002Fsynedre",{"label":85,"href":86,"external":68},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":88,"href":89,"external":68},"L'équipe","\u002Fequipe",{"label":91,"href":92,"external":68},"Le réacteur en direct","\u002Freacteur",{"label":94,"href":95,"external":68},"Le Drill (entraînement)","\u002Fdrill",{"label":97,"href":98,"external":68},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":100,"href":101,"external":68},"Les agents IA","\u002Fagents-ia",{"label":103,"href":104,"external":68},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":106,"href":107,"external":68},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":109,"links":110},"Ressources",[111,114,117,120,123,126],{"label":112,"href":113,"external":68},"Blog","\u002Fblog",{"label":115,"href":116,"external":68},"Academy","\u002Facademy",{"label":118,"href":119,"external":68},"Dictionnaire","\u002Fdictionnaire",{"label":121,"href":122,"external":68},"Expertise PrestaShop","\u002Fexpertise",{"label":124,"href":125,"external":68},"Flywheel","\u002Fflywheel",{"label":127,"href":128,"external":68},"Manifeste","\u002Fmanifeste",{"title":130,"links":131},"À propos",[132,135,138],{"label":133,"href":134,"external":68},"Alexandre Carette","\u002Fa-propos",{"label":136,"href":137,"external":68},"Dossier de presse","\u002Fpresse",{"label":139,"href":140,"external":68},"Contact","\u002Fcontact",{"items":142},[143,152,158,164,172,180,185,191],{"id":144,"type":145,"label":146,"href":122,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":149,"children":150,"psChildren":151},41,"link",{"fr":147},"Expertise",null,0,[],[],{"id":153,"type":145,"label":154,"href":113,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":155,"children":156,"psChildren":157},42,{"fr":112},1,[],[],{"id":159,"type":145,"label":160,"href":74,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":161,"children":162,"psChildren":163},43,{"fr":73},2,[],[],{"id":165,"type":145,"label":166,"href":168,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":169,"children":170,"psChildren":171},44,{"fr":167},"Outils IA","\u002Foutils-ia",3,[],[],{"id":173,"type":145,"label":174,"href":67,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":176,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":177,"children":178,"psChildren":179},45,{"fr":175},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":181,"type":145,"label":182,"href":116,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":56,"children":183,"psChildren":184},46,{"fr":115},[],[],{"id":186,"type":145,"label":187,"href":134,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":188,"children":189,"psChildren":190},47,{"fr":130},6,[],[],{"id":192,"type":145,"label":193,"href":140,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":194,"children":195,"psChildren":196},48,{"fr":139},7,[],[],{"academy":198,"blog":199,"expertise":210},[],[200,204,207],{"title":201,"url":202,"score":155,"type":203},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":205,"url":206,"score":155,"type":203},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":208,"url":209,"score":155,"type":203},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"header":212},{"logo":213,"topBar":218,"contactEmail":221,"features":222,"navBar":148},{"src":214,"alt":215,"text":133,"href":216,"class":217},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":148,"showLanguages":68,"align":219,"languages":220},"left",[],"contact@alexandrecarette.fr",{"showSearch":68,"showWishlist":68,"showLogin":20,"showContact":68,"showCart":68,"stickyHeader":20,"headerLayout":223},"inline",{"footer":225},{"theme":226,"description":148,"hours":148,"logo":227,"contact":228,"social":229,"bottomBar":239},"dark",{"src":214,"href":216,"alt":133},{"email":148,"phone":148,"address":148,"cta":148},[230,233,236],{"platform":231,"href":232,"label":231},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":234,"href":235,"label":234},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":237,"href":238,"label":237},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":148}]