Personnaliser le message de confirmation de commande PrestaShop

Pourquoi personnaliser la page de confirmation de commande

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 :

• Remercier le client avec un message personnalisé
• Communiquer des informations sur les délais de livraison
• Proposer une inscription à la newsletter ou un code promo pour un prochain achat
• Afficher des consignes spécifiques selon le mode de paiement choisi

Pourtant, beaucoup de marchands laissent cette page dans son état par défaut. Voyons comment la personnaliser proprement, en respectant les bonnes pratiques PrestaShop.

Méthode 1 : utiliser le système de traduction natif (recommandé)

PrestaShop intègre un système de traduction basé sur la fonction Smarty {l}. 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.

Fonctionnement du tag `{l}`

Dans les fichiers .tpl des modules de paiement, les messages sont déclarés ainsi :

{l s='Your order is confirmed' mod='ps_wirepayment'}

Le paramètre s contient la chaîne source, et mod identifie le module auquel appartient cette traduction.

Modifier la traduction dans le back-office

Sur PrestaShop 8.x :

1. Rendez-vous dans **International > Traductions**
2. Sélectionnez **Modifier les traductions**
3. Choisissez le type **Traductions des modules installés**
4. Sélectionnez le module de paiement concerné (ex : `ps_wirepayment`)
5. Recherchez la chaîne à modifier et remplacez-la par votre message personnalisé
6. Enregistrez

Sur PrestaShop 1.6 :

Le chemin était Localisation > Traductions, puis sélectionner le module dans le menu déroulant.

Cette approche est la plus propre car elle est réversible, compatible avec le multilingue, et ne nécessite aucune modification de fichier.

Méthode 2 : modifier le template du module de paiement

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.

Localiser le bon fichier template

Pour identifier le fichier à modifier, utilisez l'inspecteur de votre navigateur :

1. Ouvrez votre page de confirmation de commande
2. Faites un clic droit sur la zone à modifier
3. Sélectionnez **Inspecter** (Chrome/Edge) ou **Examiner l'élément** (Firefox)
4. Identifiez les classes CSS et la structure HTML pour retrouver le fichier `.tpl` correspondant

Emplacements typiques :

• **PrestaShop 8.x / 1.7 :** `themes/votre-theme/modules/ps_wirepayment/views/templates/hook/payment_return.tpl`
• **PrestaShop 1.6 :** `modules/le_module/views/templates/hook/payment_return.tpl`

Ajouter un message avec traduction intégrée

Dans le fichier template, ajoutez votre message en utilisant systématiquement le tag de traduction :

<div class="order-confirmation-message">
  <p>{l s='Merci pour votre commande ! Notre équipe la prépare avec soin.' mod='ps_wirepayment'}</p>
  <p>{l s='Vous recevrez un email de suivi dès l\'expédition.' mod='ps_wirepayment'}</p>
</div>

Bonne pratique PrestaShop 8.x : Ne modifiez jamais les fichiers du module directement. Utilisez le système de surcharge de thème en copiant le template dans themes/votre-theme/modules/nom_module/.

Méthode 3 : styliser le message en CSS (la bonne façon)

Une fois votre message en place, le stylage doit se faire exclusivement en CSS externe. Évitez le CSS inline qui rend la maintenance difficile.

La mauvaise pratique (CSS inline)

{* ❌ À éviter : CSS inline difficile à maintenir *}
<p style="font-size: 18px; font-style: italic; color: #333;">
  {l s='Votre message' mod='ps_wirepayment'}
</p>

La bonne pratique (classe CSS dédiée)

Dans votre template :

{* ✅ Recommandé : classe CSS séparée *}
<div class="order-confirmation-custom">
  <p class="confirmation-thanks">
    {l s='Merci pour votre confiance !' mod='ps_wirepayment'}
  </p>
  <p class="confirmation-details">
    {l s='Votre commande sera expédiée sous 48h.' mod='ps_wirepayment'}
  </p>
</div>

Dans votre fichier CSS (généralement themes/votre-theme/assets/css/custom.css) :

.order-confirmation-custom {
  background-color: #f8f9fa;
  border-left: 4px solid #28a745;
  padding: 20px;
  margin: 20px 0;
  border-radius: 4px;
}

.confirmation-thanks {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 8px;
}

.confirmation-details {
  font-style: italic;
  color: #636e72;
  font-size: 0.95rem;
}

Pourquoi éviter les balises HTML de mise en forme

Les balises comme , , sont dépréciées ou sémantiquement incorrectes pour du stylage visuel. Préférez toujours le CSS :

Balise HTML (à éviter)Propriété CSS (à utiliser) ```font-style: italic;` ```font-weight: bold;` ```font-size: 18px;` ```color: #333;`

Méthode avancée : hook personnalisé (PrestaShop 8.x)

Pour une solution plus robuste qui survit aux mises à jour du thème, vous pouvez utiliser un hook personnalisé dans un module :

// Dans votre module personnalisé
public function hookDisplayOrderConfirmation($params)
{
    $order = $params['order'];
    
    $this->context->smarty->assign([
        'order_reference' => $order->reference,
        'payment_method' => $order->payment,
        'custom_message' => $this->getCustomMessage($order->payment),
    ]);
    
    return $this->display(__FILE__, 'views/templates/hook/order_confirmation_message.tpl');
}

private function getCustomMessage(string $paymentMethod): string
{
    $messages = [
        'Virement bancaire' => $this->l('Votre commande sera validée dès réception du virement.'),
        'PayPal' => $this->l('Votre paiement PayPal a été confirmé.'),
    ];
    
    return $messages[$paymentMethod] ?? $this->l('Merci pour votre commande !');
}

Cette approche permet d'afficher un message différent selon le mode de paiement, tout en restant découplé du thème.

Bonnes pratiques à retenir

1. **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.
1. **Séparer contenu et présentation :** Le HTML dans les templates, le CSS dans les feuilles de style. Jamais de `style="..."` en attribut.
1. **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.
1. **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.
1. **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/cache/`.