Personnaliser le bouton Ajouter au panier dans PrestaShop

Pourquoi personnaliser le bouton « Ajouter au panier » ?

Le bouton d'ajout au panier est l'élément d'interface le plus critique d'une boutique e-commerce. Son libellé, sa couleur et son comportement influencent directement le taux de conversion. Remplacer le texte générique « Ajouter au panier » par une formulation plus engageante — « Commander maintenant », « Je le veux ! » ou « Réserver » — peut faire la différence sur certains segments de marché.

Deux approches complémentaires permettent d'y parvenir : la modification via le système de traductions (sans toucher au code) et la personnalisation directe des templates du thème.

Méthode 1 : modifier le libellé via les traductions du back-office

C'est la méthode la plus simple et la plus propre. Elle ne nécessite aucune compétence en développement et résiste aux mises à jour du thème.

Sur PrestaShop 1.6

1. Accéder à **Localisation → Traductions** dans le back-office
2. Sélectionner **Traduction du front office**
3. Choisir le thème actif (par défaut `default-bootstrap`) et la langue souhaitée
4. Cliquer sur **Modifier**
5. Rechercher le bloc **Product** dans la liste des chaînes de traduction
6. Localiser la chaîne `Add to cart` ou `Ajouter au panier`
7. Remplacer par le texte souhaité et sauvegarder

Sur PrestaShop 1.7 et 8.x

Le système de traductions a évolué. La procédure devient :

1. Accéder à **International → Traductions**
2. Dans la section **Modifier les traductions**, sélectionner :

- Type : Traductions du thème

- Thème : votre thème actif (par défaut classic)

- Langue : Français

1. Cliquer sur **Modifier**
2. Naviguer dans l'arborescence jusqu'à **ShopTheme → Catalog** ou rechercher la chaîne `Add to cart`
3. Remplacer le libellé et sauvegarder

Sur PrestaShop 8.x, vous pouvez également passer par les fichiers de traduction du thème directement :

/themes/votre-theme/translations/fr-FR/ShopTheme.fr-FR.xlf

Recherchez la balise correspondante :

<trans-unit id="some-hash" resname="Add to cart">
  <source>Add to cart</source>
  <target>Commander maintenant</target>
</trans-unit>

Bonne pratique : privilégiez toujours la modification via le back-office plutôt que l'édition directe des fichiers .xlf. Le back-office gère le cache de traduction automatiquement.

Méthode 2 : personnaliser le template du bouton

Pour aller plus loin — changer l'icône, ajouter une classe CSS, ou remplacer le bouton par un lien de type Quick View — il faut intervenir sur les fichiers de template.

Sur PrestaShop 1.6 (Smarty)

Le fichier à modifier est product-list.tpl dans votre thème :

/themes/votre-theme/product-list.tpl

Pour transformer le lien produit en déclencheur de Quick View (aperçu rapide), ajoutez la classe quick-view aux éléments souhaités :

{* Avant *}
<a class="product_img_link" href="{$product.link}" title="{$product.name}">

{* Après *}
<a class="quick-view product_img_link" href="{$product.link}" title="{$product.name}">

Cette classe quick-view est interceptée par le JavaScript natif de PrestaShop 1.6 pour afficher une modale avec les détails du produit au lieu de naviguer vers la fiche produit.

Sur PrestaShop 1.7 et 8.x (Twig)

Le template du bouton d'ajout au panier se trouve dans :

/themes/classic/templates/catalog/_partials/miniatures/product.tpl

Le bouton est rendu via un sous-template dédié :

/themes/classic/templates/catalog/_partials/product-add-to-cart.tpl

Pour personnaliser le bouton, créez un thème enfant et surchargez ce fichier :

<button
  class="btn btn-primary add-to-cart"
  data-button-action="add-to-cart"
  type="submit"
  {if !$product.add_to_cart_url}
    disabled
  {/if}
>
  <i class="material-icons shopping-cart"></i>
  {l s='Commander maintenant' d='Shop.Theme.Actions'}
</button>

Important : conservez toujours l'attribut data-button-action="add-to-cart" — c'est lui qui déclenche la logique JavaScript d'ajout au panier. Sans cet attribut, le bouton ne fonctionnera pas.

Personnaliser le style CSS du bouton

Au-delà du texte, le style visuel du bouton a un impact majeur sur la conversion. Voici un exemple de personnalisation CSS applicable à tous les thèmes :

/* Bouton Ajouter au panier personnalisé */
.btn.add-to-cart {
  background-color: #e74c3c;
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn.add-to-cart:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

Placez ce CSS dans le fichier custom.css de votre thème pour qu'il résiste aux mises à jour.

Bonnes pratiques UX pour le bouton d'achat

• **Contraste élevé :** le bouton doit se démarquer visuellement du reste de la page. Utilisez une couleur d'accent forte.
• **Libellé orienté action :** préférez « Commander » ou « Ajouter à mon panier » plutôt que des formulations passives.
• **Feedback visuel :** ajoutez une animation ou un changement de couleur au clic pour confirmer l'action à l'utilisateur.
• **Taille tactile :** sur mobile, le bouton doit mesurer au minimum 44×44 pixels (recommandation Apple/Google).
• **Cohérence :** utilisez le même style sur les listes de produits et les fiches produit pour ne pas dérouter l'utilisateur.