Mise à jour de l’article 15/09/2022 : Ce tutoriel fonctionne avec les dernières versions en cours de Prestashop (Test effectué sur 1.7.8.7). Tutoriel en vidéo dans l’article !
Je travaillais sur une boutique d’un client, ma première intégration sur Prestashop 1.7 (Je me suis servis du thème Classic pour ma base) et je me suis rendu compte d’une chose toute bête… Sur les pages catégorie il n’y a pas de bouton ajouter au panier. J’ai donc cherché à ajouter ce bouton pour qu’il fonctionne correctement sur le listing produit avec la pop-up de confirmation d’ajout au panier ou encore la navigation à facettes !
De base sur le thème Classic, il y a seulement un lien pour se rendre sur la fiche produit. Pas de bouton ajouter au panier, parce que la simulation met en avant uniquement des produits avec des déclinaisons. L’utilisateur est obligé d’aller sur la fiche produit pour sélectionner l’attribut qu’il veut (taille ou couleur par exemple) avant d’ajouter au panier.
Il y a des modules sur Prestashop addons pour cela mais évitons de dépenser des sous.
À savoir que cela impact aussi le module produit phare sur la page d’accueil.
Bien évidemment il y a le quick view (aperçu rapide) qui permet au client d’afficher en pop-up le détail du produit avec ses déclinaisons. Mais si vous avez des produits simples, vous n’avez peut-être pas besoin de l’aperçu rapide de Prestashop.
Un tutoriel vidéo Prestashop 1.7 pour créer un bouton d’ajout panier sur la liste produit
N’hésitez pas à vous abonnez à ma chaîne Youtube ou mettre un j’aime voir un commentaire. Cela m’aide beaucoup pour créer d’autres contenu sur Prestashop 🙂
Exemple de code pour affiche le bouton ajouter au panier sur Prestashop
Rendez-vous dans le tpl du listing produit, le chemin :
/themes/nomdevotretheme/template/ catalog/_partials/miniatures/product.tpl
Ouvrez votre fichier et rendez-vous à la ligne 54 (ou 52 selon votre version) avant le bloc product_price_and_shipping.
Par exemple, sur Prestashop 1.7.8.7, c’est à la ligne 77.
Vous devez coller ce code :
Vous devez avoir :
Nous associons le bouton quantité à celui du panier pour permettre l’ajout du produit depuis le listing produit. Sans définir de quantité, vous allez ajouter un produit à 0 dans votre panier.
Cependant cela n’est pas très esthétique. Prestashop 1.7 utilise des tailles fixes, il faut donc définir des nouvelles hauteurs sur vos produits.
Appliquez du style CSS sur le bouton ajouter au panier
Nous allons donc modifier le CSS. Vous pouvez le faire directement dans theme.css du thème Classic. Attention il est peut-être préférable d’utiliser un thème enfant Prestashop. (Vous pouvez décompresser votre fichier pour y voir mieux).
Le mieux est d’utiliser un autre fichier CSS, justement il y a un fichier dédié dans Prestashop 1.7. Rendez-vous dans : basedevotresite/
Voilà le résultat :
Vous ne voyez rien ? Alors videz le cache dans les performances de votre site dans les paramètres avancés.
Ne pas afficher le champ quantité sur la liste produit Prestashop
Vous souhaitez uniquement le bouton sans le champ quantité ? Vous devez alors utiliser ce bout de code au même emplacement que ci-dessus :
Par contre il va falloir aussi adapter votre code css comme ceci :
Un module Prestashop pour un bouton acheter maintenant
L’intégration via le code est assez simple mais nécessite de devoir mettre les mains dans le code. Ceci n’est pas évident pour tout le monde.
Je peux vous préconiser un module pour intégrer cela automatiquement : Afficher le bouton Ajouter au panier avancée.
La fonctionnalité principale est l’implémentation du bouton dans les listes produits mais vous pouvez le personnaliser pour aller plus loin. Les boutons peuvent être transformés en “Acheter maintenant”, ce qui va permettre d’être redirigé automatiquement dans la page de commande sans passer par le panier. Le principe est d’aller à l’essentiel pour l’utilisateur.
Je vous donne un autre module pour faire cela : Liste produits Bouton Ajouter au panier | Aperçu panier
Cela améliore-t-il l’expérience client sur mon Prestashop ?
En e-commerce, on estime que le client doit cliquer le moins de fois possible pour convertir à l’achat. S’il doit naviguer de pages en pages pour pouvoir acheter, alors il y a plus de risque qu’il quitte le site.
Le fait d’avoir un bouton ajouté au panier sur votre produit va permettre au client qui souhaite l’acheter, de pouvoir passer au panier plus facilement.
Vous souhaitez déléguer l’ajout de ce bouton ?
– Je me connecte à votre boutique Prestashop et votre serveur
– Application dans votre thème le code du bouton et le style CSS
– Je valide cela avec vous par e-maol
…
Il suffit de commander un ticket de support Prestashop depuis mon site.