Comment changer l’apparence de l’icône panier dans Prestashop ?

0
70

Les boutiques en lignes sont de plus en plus nombreux sur la toile, et si vous avez un projet en ligne que vous avez opté pour Prestashop comme solution open source pour l’e-commerce alors vous pourriez trouver ce tuto utile !

Changer l’icône « Caddie » en une autre forme

Vous avez peut-être le besoin de mettre un caddie plus sympa ou autre chose comme un sac qui correspond mieux à votre image de marque et votre secteur d’activité. Ce qu’il faut savoir, c’est que le dessin du panier sur Prestashop n’est pas une image, c’est une police de caractères stylisée (font-awesome) !

1 option, changer la police de caractère par une autre

Vous avez la possibilité de simplement choisir une autre forme dans la liste des font-awesome et l’affiché. Pour cela il vous faut

  • L’accès au fichier CSS de votre Prestashop
  • RDV dans le répertoire de votre thème « child_classic\child_classic\assets\css\»
  • Ouvrir le fichier  custom.css, et rajouter le code ci-dessous :
.fa-shopping-cart:before {
  content: "\f07a"; 
  }
  • Sur cet exemple de code, la valeur « \f07a » correspond au « caractère panier » !
  • Remplacer la valeur « \f07a » par une autre. Exemple : « \f291 »

Voici le lien vers la liste des caractères disponibles : https://fontawesome.com/icons?d=gallery

Voici le lien vers la liste des caractères disponibles : https://fontawesome.com/icons?d=gallery

Option 2, changer la police de caractère par une image personnalisé

Pour des raisons esthétiques vous pourriez souhaiter mettre une illustration fait par votre graphiste préféré, dans ce cas la modification s’opère dans le même fichier CSS.

  • Supprimer ou mettre en veille la ligne content: « \f07a »;
  • Ajouter une image en Background
.fa-shopping-cart:before {
  content: "\f07a"; 
  }

LEAVE A REPLY

Please enter your comment!
Please enter your name here