Modifier le panier de la page d’accueil dans prestashop 1.6

Dans ce tuto nous allons modifier l’apparence du panier sur la page d’accueil pour prestashop 1.6

modification du panier prestashop 1.6

Nous allons modifier :

– la couleur

– la couleur du texte

– les polices

I Modification de la partie visible du panier dans la page d’accueil.

Modofication de la partie visible du panier

Ouvrez le fichier blockcart.css

Voici le chemin:
votre dossier prestashop > themes > le nom de la copie de votre thème (test pour nous) > css > modules > blockcart > blockcart.css

Les numéros des lignes sont données à titre indicatif et correspondent au Prestashop en cours (version 1.6.0.11) et à la mise à jour du module en cours. Elles peuvent donc varier légèrement, si vous ne les trouvez pas faites une recherche sur le sélecteur.

1 Modification de la couleur de fond et des couleurs de police

A la ligne 30

.shopping_cart > a:first-child {
 padding: 7px 10px 14px 16px;
 background: #333333;
 display: block;
 font-weight: bold;
 color: #777777;
 text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
 overflow: hidden; }

Analysons les lignes qui nous intéressent.

.shopping_cart > a:first-child {
 padding: 7px 10px 14px 16px;
 background: #333333; C'est la couleur de fond
 display: block;
 font-weight: bold; C'est l'épaisseur de la police
 color: #777777; C'est la couleur de la police 
 text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
 overflow: hidden; }

Je vais changer la couleur du fond pour mettre un orange, ainsi que la couleur de la police pour mettre un marron. Je vais rajouter une ligne pour mettre une police cursive. La couleur va être modifier pour le texte du bas du cadre, livraison et total.

.shopping_cart > a:first-child {
padding: 7px 10px 14px 16px;
background: #FF8C00; 
display: block; 
font-weight: bold; 
color: #800000; 
text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
overflow: hidden; 
font-family : cursive;
}

Je vais maintenant cibler le mot panier, vers la ligne 41.

.shopping_cart > a:first-child b {
 color: white;
 font: 600 18px/22px "Open Sans", sans-serif;
 padding-right: 5px; }

Je change sa couleur et sa police.

.shopping_cart > a:first-child b {
 color:#FF8C00; 
font: 600 18px/22px cursive; 
padding-right: 5px; }

panier modifiéVoila ce que vous devez obtenir :

 

2 Modification du caddie et du triangle

Je souhaite maintenant modifier la couleur de l’image du caddie et la couleur du petit triangle.

Au alentour de la ligne 46

 .shopping_cart > a:first-child:before {
 content: "f07a";
 font-family: "FontAwesome";
 display: inline-block;
 font-size: 23px;
 line-height: 23px;
 color: white;
 padding-right: 15px; }

Remplacez la ligne color: white; par la couleur de votre choix. Moi je met un orange clair.

.shopping_cart > a:first-child:before {
content: "f07a";
font-family: "FontAwesome";
display: inline-block;
font-size: 23px;
line-height: 23px;
color: #f2bba0;
padding-right: 15px; }

Puis au alentour de la ligne 8

 #header .shopping_cart > a:first-child:after {
 content: "f0d7";
 font-family: "FontAwesome";
 display: inline-block;
 float: right;
 font-size: 18px;
 color: #686666;
 padding: 6px 0 0 0; }

Remplacez la ligne color: #686666; par la couleur de votre choix. Moi je vais mettre le même orange.

#header .shopping_cart > a:first-child:after {
content: "f0d7";
font-family: "FontAwesome";
display: inline-block;
float: right;
font-size: 18px;
color: #f2bba0;
padding: 6px 0 0 0; }

Voila ce que vous devez obtenir : Modification couleur panier

 

II Modification le la partie « déployable » du panier.

1 Couleur de fond

Rendez vous à la ligne 165

 #header .cart_block {
 position: absolute;
 top: 95px;
 right: 0;
 z-index: 100;
 display: none;
 height: auto;
 background: #484848;
 color: white;
 width: 270px; }

Remplacez la ligne background: #484848; par la couleur de votre choix. C’est la couleur de fond, moi je vais mettre le même orange clair que tout à l’heure. Remplacez la ligne color: white; par la couleur de votre choix. C’est la couleur de la police, moi je vais mettre le même marron que tout à l’heure.

 #header .cart_block {
position: absolute;
top: 95px;
right: 0;
z-index: 100;
display: none;
height: auto;
background: #f2bba0;
color: #800000;
width: 270px; }

2 Couleur du texte

Nous allons travailler zone par zone.Zone du panier à modifier

La quantité, vers la ligne 102

 .cart_block .cart-info .quantity-formated {
 display: inline-block;
 color: #9c9b9b;
 text-transform: uppercase;
 font-size: 10px;
 padding-right: 5px; }

La croix, vers la ligne 184

 #header .cart_block .cart_block_list .remove_link a,
 #header .cart_block .cart_block_list .ajax_cart_block_remove_link {
 color: white;
 outline: none;
 text-decoration: none; }

La croix, au passage de la souris vers la ligne 189

 #header .cart_block .cart_block_list .remove_link a:hover,
 #header .cart_block .cart_block_list .ajax_cart_block_remove_link:hover {
 color: #9c9b9b; }

Le nom de l’article au passage de la souris, vers la ligne 180

#header .cart_block a {
 color: white; }

Le nom de l’article, vers la ligne 182

#header .cart_block a:hover {
 color: #9c9b9b; }

La déclinaison, vers la ligne 201

 #header .cart_block .product-atributes a {
 color: #9c9b9b; }

La déclinaison au passage de la souris, vers la ligne 203

 #header .cart_block .product-atributes a:hover {
 color: white; }

Le prix, vers la ligne 192

 #header .cart_block .price {
 color: white; }

A chaque fois modifier la ligne color en mettant la couleur de votre choix, moi je vais tout mettre en marron : color : #800000;

Je vais aussi changer la police des texte, donc sur chaque paragraphe qui cible du  texte (pas la croix et pas les passages de souris) la ligne font-family : cursive; pour mettre une police cursive.

Voici ce que vous devriez obtenir.

Modification des couleurs du texte du panier

 

III Modification de la partie basse, livraison, total et commander

1 Modification de la couleur de fond

Pour la zone sous livraison et total, vers la ligne 203
#header .cart_block .cart-prices {
 border: none;
 background: url(../../../img/cart-shadow.png) repeat-x #3d3d3d; }

Remplacson le gris par un marron clair,  dans la ligne background: url(../../../img/cart-shadow.png) repeat-x #3d3d3d; } je remplace #3d3d3d par #A0522D
Pour la zone sous commander, vers la ligne 205
 #header .cart_block .cart-buttons {
 background: url(../../../img/cart-shadow.png) repeat-x #333333; }
Remplacson le gris par un marron foncé,  dans la ligne background: url(../../../img/cart-shadow.png) repeat-x #333333; } je remplace #333333 par #800000

2 Modification du trait se séparation

Pour modifier la trait de séparation entre livraison et total, vers la ligne 130
.cart_block .cart-prices .cart-prices-line {
 overflow: hidden;
 border-bottom: 1px solid #515151;
 padding: 7px 0; }
la ligne border-bottom: 1px solid #515151; correspond à un trait de sépartion, 1px c’est la taille, solid c’est ke type et #515151 la couleur. Moi je vais mettre des pointillés en orange.
.cart_block .cart-prices .cart-prices-line {
overflow: hidden;
border-bottom: 2px dashed #ff8c00;
padding: 7px 0; }

3 Modification des polices et couleurs de texte

 

Pour le texte de la livraison et le prix total, vers la ligne 191

#header .cart_block .price {
 color: white; }

Mettez la couleur de votre choix, en modifiant color: white;  moi je met en orange  #ff8c00.

4 Modification du bouton commander

Pour la couleur de fond et la bordure du bouton commander, vers la ligne 150

.cart_block .cart-buttons a#button_order_cart span {
 padding: 7px 0;
 font-size: 1.1em;
 border: solid 1px #63c473; couleur et forme de la bordure
 background: #43b155; couleur du fond }

Nous allons mettre une bordure orange avec un fond marron clair

.cart_block .cart-buttons a#button_order_cart span {
 padding: 7px 0;
 font-size: 1.1em;
 border: solid 1px #FF8C00;
 background: #f2bba0;  }

Pour la couleur de fond et la bordure du bouton commander au passage de la souris, vers la ligne 155

.cart_block .cart-buttons a#button_order_cart:hover span {
 border: solid 1px #358c43; couleur et forme de la bordure
 background: #2e7a3a; couleur du fond
 color: white;

Nous allons mettre une bordure marron clair avec un fond orange au passage de la souris

.cart_block .cart-buttons a#button_order_cart:hover span {
 border: solid 1px #f2bba0;
 background: #FF8C00;
 color: white;

Pour la couleur de la police et le type de police, vers la ligne 179

#header .cart_block a {
 color: white; }

Nous pouvons changer la couleur et rajouter une ligne pour la police. Je met une couleur marron et une police cursive.

#header .cart_block a {
 color: #800000;
font-family :cursive;
 }

Pour le texte au passage de la souris, vers la ligne 181

  #header .cart_block a:hover {
 color: #9c9b9b; }

Je remplace la couleur par marron #80000

Voila ce que vous devez obtenir.

Modification bas du panier

N'hésitez pas à laisser un commentaire

Vous pouvez vous abonner à notre newsletter mensuelle pour être informé de nos nouveaux tutoriels.

Vous pouvez aussi aimer notre page facebook.

22 thoughts on “Modifier le panier de la page d’accueil dans prestashop 1.6

  1. Bonjour

    Tout d’abord toutes mes félicitation pour vos tutoriaux utiles et clair. C’est une mine inépuisable de conseils pour la modifications des thèmes.

    J’ai vu dans ce tutorial le changement de couleur du petit triangle à côté du panier, je pensais trouver une piste pour changer la couleur du petit triangle à côté du choix des langue dans le header mais je tourne en rond…vous n’auriez pas une idée ?

    Ce devrait être dans le module blocklanguages normalement non ?

  2. Bonjour,
    merci pour ces tutos très clair! ont comprent très bien vos explications!

    Comment mettre une bordure autour du panier déroulant?
    Car je souhaite mettre le panier en blanc, et sans contour, cela fait étrange.

    Est il possible de mettre un séparateur entre les produits dans le panier? Et le total?

    merci pour vos informations

    1. Bonjour,

      Dans le fichier blochcard.css, faite une recherche du selecteur :
      #header .block_content vers la ligne 200
      et rajoutez : border : 1px solid lacouleur que vous voulez.
      Un ombre serai certainement plus joli qu’un bordure.

      Bonne journée

      1. Merci pour ces explications super utiles quand on est débutant !

        Dans le panier, le nom des articles est visible qu’en partie, est-ce qu’il est possible de pouvoir voir le nom de l’article en entier svp ?

        Merci !

        1. Bonjour,

          Pour que le nom du produit apparaissent en entier dans le panier.
          Dans le fichier blockcard.tpl du module, vous avez vers la ligne 65 :
          {$product.cart_quantity} x getProductLink($product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}">{$product.name|truncate:13:'...'|escape:'html':'UTF-8'}
          Modifier truncate:13 en ce que vous voulez ou supprimer complètement truncate:13:’…’ pour avoir le nom en entier.

          Bonne journée

  3. Re,
    lorsque je choisis la police French Script MT, c’est difficilement lisible. Est il possible d’augmenter la taille de police sans jouer sur la taille du cadre ?
    Bonne journée et merci encore

  4. Bonjour, super tuto qui ma bien aider!
    je rencontre un souci de couleur avec le nome de l’article et la couleur de la police du bouton commander. j’ai besoin de 2 couleur différentes.
    ces 2 attribut ont la même ligne de code.
    comment faire pour ne pas mettre les mêmes couleur?
    merci

    1. Bonjour,

      Je ne comprend pas trop ce que vous voulez dire. Les deux éléments ne sont pas sur la même ligne sur le thème de base. Si il sont sur la même ligne sur votre thème, il vous suffit de séparer les deux sélecteurs.

      Bonne journée

  5. Merci pour ces tutos qui m’ont bien aider pour modifier les couleurs panier, et autres tutos.
    Je voudrais modifier ajouter une icone à la place de mon panier, et ajouter le prix total en dessous, avez vous un tuto?
    Bonne journée

    1. Bonjour, Non désolée, je n’i pas de tuto, pour le panier c’est simple, recherchez .shopping_cart > a:first-child:before dans le fichier blockcart.css et changez la couleur pour afficher le prix c’est un peu plus compliqué, cela va se passer dans le ichier .tpl et il faut un petit peu coder.

      Bonne journée

  6. Bonjour et un grand merci pour votre aide et votre boulot…
    Quand à mon problème, je ne trouve pas de solution et je me retourne vers vous.
    Je n’ai malheureusement plus le rectangle noir de mon panier avec l’icone panier le texte et la flêche par contre le contenu est bien là, version prestashop 1.6.1.10
    Avez-vous déjà eu ce problème ?
    Merci d’avance pour vos solutions et meilleures salutations.

Répondre à Benj Annuler la réponse.

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