15 Sep 2022
Ajouter un bouton acheter sur la liste produit Prestashop

Afficher un bouton ajouter au panier sur le listing produit de Prestashop 1.7

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.

Fiches produit de base sur le thème Classic de Prestashop 1.7
Fiches produit de base sur le thème Classic de Prestashop 1.7

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  :

<form action="{$urls.pages.cart}" method="post">
<input type="hidden" name="token" value="{$static_token}">
<input type="hidden" value="{$product.id_product}" name="id_product">
<input type="number" class="input-group form-control" name="qty" value="1">
<button data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if} class="btn btn-primary">{l s='Add to cart' d='Shop.Theme.Actions'}</button>
</form>

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/themes/nomdevotretheme/assets/css/custom.css et collez-y cela :

#products article.product-miniature div.thumbnail-container, article.product-miniature div.thumbnail-container {height: 422px;}
#products article.product-miniature div.product-description, article.product-miniature div.product-description{height: 172px;text-align: center;}
#products article.product-miniature div.product-description input.input-group.form-control, article.product-miniature div.product-description input.input-group.form-control{width: 30%;margin-left: auto;margin-right: auto;margin-bottom: 12px;margin-top: 10px;}
#products .thumbnail-container .product-thumbnail img, .featured-products .thumbnail-container .product-thumbnail img, .product-accessories .thumbnail-container .product-thumbnail img, .product-miniature .thumbnail-container .product-thumbnail img {bottom: inherit;}
#products .product-price-and-shipping, .featured-products .product-price-and-shipping, .product-accessories .product-price-and-shipping, .product-miniature .product-price-and-shipping {margin-top: 5px}

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 :

<form action="{$urls.pages.cart}" method="post">
<input type="hidden" name="token" value="{$static_token}">
<input type="hidden" value="{$product.id_product}" name="id_product">
<button data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if} class="btn btn-primary">{l s='Add to cart' d='Shop.Theme.Actions'}</button>
</form>

Par contre il va falloir aussi adapter votre code css comme ceci :

#products article.product-miniature div.product-description input.input-group.form-control, article.product-miniature div.product-description input.input-group.form-control{width: 30%;margin-left: auto;margin-right: auto;margin-bottom: 12px;margin-top: 10px;}
#products .thumbnail-container .product-thumbnail img, .featured-products .thumbnail-container .product-thumbnail img, .product-accessories .thumbnail-container .product-thumbnail img, .product-miniature .thumbnail-container .product-thumbnail img {bottom: inherit;}
#products .product-price-and-shipping, .featured-products .product-price-and-shipping, .product-accessories .product-price-and-shipping, .product-miniature .product-price-and-shipping {margin-top: 5px}

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.

Afficher le bouton ajout panier dans la liste avec un module
Aperçu du module

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

Une formation Prestashop pour créer sa boutique seul

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.