Logos de paiement Prestashop

Prestashop 1.7 – Intégrer les logos de paiement (ép.20)

Encore aujourd’hui, sur beaucoup de boutique en ligne, il manque l’affichage des logos de paiement, pourtant ceux-ci  sont indispensables pour rassurer les internautes qui viennent sur votre e-shop.

Episode 20

Combien de fois cela m’est déjà arrivé… vouloir acheter sur une boutique en ligne un produit, mais je ne sais pas s’ils ont la méthode PayPal par exemple… C’est très énervant, car parfois on prépare le panier on s’inscrit et au final on ne peut pas payer. Il ne faut pas frustrer ses acheteurs, c’est pourquoi il est important d’afficher les logos de paiement.

Dans la version Prestashop 1.7, le module pour les logos de paiement semble avoir disparu… on va donc ajouter le logo dans le pied de page pour qu’il soit permanent et sur la fiche produit (sur mobile & tablette). Par habitude sur la plupart des sites, les logos de paiement se trouvent dans le pied de page.

Le fait de rendre aussi son logo de paiement « multilingue » permet une approche encore plus ciblée pour les clients… c’est très pratique surtout lorsqu’il faut mettre en avant des textes du type « virement bancaire ». Si vous n’avez pas affiché les logos sur votre boutique Prestashop, pensez à rectifier le tir rapidement, car il serait dommage de perdre des clients qui ne se sentent pas en confiance sur le site (ou qui ne pensent pas trouver leur méthode de paiement).

Ressources

Pour ce tutoriel vous avez à disposition :

  • Un exemple de PSD pour afficher les logos de paiement.
  • Les fichiers TPL et CSS que j’ai utilisé durant le tutoriel.

Télécharger

Au programme

  • L’importance de visualiser rapidement les logos de paiement.
  • Contrôle de la disparition du module logos de paiement de Prestashop.
  • Choix de deux emplacements pour l’affichage du logo de paiement.
  • Création du logo de paiement avec des entités connues / rassurantes.
  • Intégration du logo de paiement multilingue dans le pied de page.
  • Intégration du logo de paiement sur la fiche produit avec optimisation pour la partie mobile / tablette.
  • Compréhension de la grille responsive « bootstrap » pour les classes CSS.
  • Des logos rassurants ? Ce n’est jamais de trop !

31 commentaires sur “Prestashop 1.7 – Intégrer les logos de paiement (ép.20)”

    1. Bonjour,

      Actuellement peut importe la version de Prestashop, je n’effectue « jamais » de mise à jour. Le système Prestashop n’est pas pensé pour être assez souple lors de mises à jour, il faut toujours tout reprendre derrière, car il y’a trop d’écrasements (contrairement à WordPress qui gère mieux cette problématique).

      Courage, tenez bon ! Merci pour votre visite !

      Répondre

    2. Bonjour Fabien,
      désolé de ce qui vous arrive.
      Je suis assidûment les tutos de webbax, je lui en suis très reconnaissant mais je me posais la question tous les jours « qu’est ce qui se passe lors des maj? », j’ai maintenant la réponse…

      La réponse de Germain me surprend à propos des maj : jamais de maj?? Lorsqu’on crée une site ecommerce de production, on ne fait jamais de maj? n’y a t-il pas des maj qu’il faudrait pourtant absolument faire pour des raisons de sécurité?

      Je me pose la question de la maj des modules du coup, jamais de maj non plus et pas de souci?

      Merci Germain pour tout le bon travail, je me régale!!

      Répondre

      1. Bonjour,

        Actuellement sur Prestashop il y’a eu une seule faille grave (et la faille n’a pas été vraiment exploitée…) le nombre de sites hackés par le code reste très rare, bien souvent la faille ne vient pas de là (hébergeur / accès inchangés depuis des années etc…). Cela n’est pas comparable à un CMS comme WordPress par exemple qui nécessite une mise à jour régulière.

        Vous avez plus de risques de faire « planter » la boutique Prestashop en faisant des mises à jour, que de subir une attaque de hacking lié à une ancienne version de Prestashop. Les mises à jour sont actuellement très intrusives et provoquent beaucoup de perturbations, ce qui implique ensuite une révision complète du site. Bien sûr cela est possible, mais cela est bien trop coûteux pour le client.

        Du coup dans mon cas, on vise plutôt une refonte après X années et durant ce temps, plutôt que d’investir dans des mises à jour, on procède plutôt à l’optimisation du site pour qu’il soit plus ergonomique, optimisé SEO, rapide et surtout rentable.

        A bientôt !

        Répondre

  2. Salut Germain,

    j’essaie de faire les changements pour ajouter les logos de paiement sur mon prestashop 1.7.2.2, mais rien ne s’affiche.
    Pourtant je suis le tuto pas à pas…

    Je sais bien que l’on ne travaille pas sur la même version, mais pourtant je valide les blocks et ca devrait fonctionner.

    Est-ce que quelque chose a été bloqué par Prestashop sur la dernière version?

    Merci,

    Répondre

    2. Bonjour,

      A vérifier… désactiver tous les caches de Prestashop et forcer la re-compilation Smarty et dans le navigateur faire un F5 ou CTRL pour forcer le rechargement de la page.

      A bientôt !

      Répondre

  3. Bonjour
    Merci pour ce tuto.
    Si le produit est en rupture le logo de paiement se met avant la phrase « prévenez moi ….. » j’aimerais le mettre en dessous, mais je ne trouve pas où c’est. Une idée ? Merci.

    Répondre

    1. Bonjour,

      Difficile de répondre précisément à cette question, le principe c’est d’aller dans le fichier : « themes\classic\templates\catalog\product.tpl » et de modifier la position de certaines portions de codes (mettre un bout de code plus haut ou plus bas) pour ensuite que ça change leur position à l’écran.

      A bientôt !

      Répondre

  4. bonjour et merci pour le tuto. j’aimerais réaliser la même opération en passant cette fois-ci par le thème enfant . malheureusement je n’ai pas réussi. peut être que quelqu’un a la réponse . merci d’avance

    Répondre

  6. bonjour, je viens vers vous car j’ai un problème d’affichage seulement en version mobile (l’image et trop grosse) , pour info je suis bien sur prestashop 1.7.3 et mon theme et prestige_fashion , j’ai pourtant suivi le tuto … mais la je suis bloqué .
    Sur googleChrome c’est ok juste les versions mobiles

    Pouvez vous m’aider svp merci d’avance

    Répondre

    1. Bonjour,

      Désolé, mais ce tutoriel est effectué avec le thème par défaut, avec un thème différent les règles CSS peuvent changer. Obligé pour cela d’observer le comportement des règles CSS via la console Chrome et ensuite d’apporter un ajustement sur mesure.

      A bientôt !

      Répondre

  9. Bonjour Webbax,

    j’ai suivi le tuto mais rien ne marche, et lorsque je fait n’importe quelle modif sur le ps_contactinfo.tpl, rien ne se passe, le site ne bouge pas. J’en déduis que je dois modifier un autre fichier?

    Une idée peut-être?

    Je suis sur prestashop 1.7.4.2

    Par avance, merci.

    Bruno

    Répondre

  10. Merci pour cette rapide réponse, j’ai déjà essayé de vider le cache, mais cela n’a rien changé. Enfin je ne sais pas si j’ai tout bien fait, mais j’ai vidé le cache internet dans l’historique Firefox, puis j’ai tapé F5 pour relancé la page).

    Alors bizarrement, lorsque je vais dans le back office activer ou désactiver le mode catalogue, ça prend en compte mes modifs!

    Je ne comprend pas pourquoi, mais disons que je peux avancer c’est l’essentiel!

    Merci beaucoup.
    A bientôt!

    Répondre

  11. ok, oui en fait il faut que je vide le cache sur prestashop à chaque manip et ça marche. Merci pour ces tutos très clairs, et très formateurs!

    Répondre

    1. Bonjour,

      Oui, dans la gestion des cache de Prestashop il y a une option « Forcer la recompilation » en cas de modification… il est important d’activer cette option.

      A bientôt !

      Répondre

  12. bonjour
    très très bon bon tutos merci
    je cherche à mettre un champ pour afficher des zones à sélectionner dans l’onglet adresse de livraison comment faire

    Répondre

  13. Bonjour,
    Et merci pour cet excellent tuto.
    Juste un petit pb : je ne trouve pas où traduire « Nos moyens de paiement », dans les différents outils de traduction prévus par Prestashop (traductions du Back office, du thème, des modules, etc.).
    Merci de votre aide et cordialement,
    Jean François DAVID

    Répondre

  14. Bonjour le texte s’affiche sans problème mais pas l’image, je ne trouve pas de solution ou dois je positionner le lien de l’image sachant que je suis en locale
    Merci
    Vos tutos sont très sympa

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *