Change add to cart icon on Prestashop 1.6

[and78]

Hi all!! 

 

I need to change the add_to_cart icon; I follow the instructions from Milosz

 

http://mypresta.eu/en/art/developer/how-to-change-add-to-cart-button-size-on-product-page.html

 

and I have now a backgroung image, but it didnt replace the original cart icon, and the cart icon its in front on my new icon

 

How can I remove the original icon or send it backwards from my new image??

 

Thanks in advance!!!  

[vekia]

this guide was released for old prestashop 1.6 version

please revert changes.

 

and what theme you use? i will create new guide,

[and78]

Hi vekia, thanks for your response, Im using the included default-bootstrap theme

[vekia]

so, this template to generate add to cart button on product page use two things:

- css styles

- font awesome icon

 

button contains 2 things:

 

<button> code

<span> code

 

::before is an icon of cart: product.css 434

.box-info-product .exclusive:before {
font-family: "FontAwesome";
position: absolute;
top: 0;
left: 0;
bottom: 0;
color: white;
font-size: 25px;
line-height: 47px;
text-shadow: 0 1px #015883;
content: "\f07a";
z-index: 2;
width: 51px;
text-align: center;
border: 1px solid #06b2e6;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-ms-border-radius: 5px 0 0 5px;
-o-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

<span> add to cart </span>

.box-info-product .exclusive span {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
font-weight: 700;
font-size: 20px;
line-height: 22px;
border-top: 1px solid #06b2e6;
border-right: 1px solid #06b2e6;
border-left: 1px solid #06b2e6;
border-bottom: 1px solid #06b2e6;
text-shadow: 0 1px #015883;
padding: 12px 36px 14px 60px;
color: white;
display: block !important;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

product.css 477

[and78]

Hi, you also need to change in 

 

modules/themeconfigurator/css/theme6.css

 

linea 188

content: "\f07a"; }

 

The font is Awesome

 

You can select other icon as you require, you must use the unicode (cart its f07a)

 

http://fortawesome.github.io/Font-Awesome/

[ahlawat]

hi - I am using prestashopo 1.6 version. can i also use the above code to change my add to cart button style? The default one I have doesn't have a cart icon. url - www.bbazinga.com

[vekia]

hello

your theme uses exactly the same add to cart button as other default templates

[ahlawat]

Please see the home page, products under "Popular" tab have a different add to cart icon which does not have cart image. How can I change this? thanks

[BriceVanZeg]

Hello, i would like to change the button add to cart, on 1.6.1.1  And with your code, i can't change it.!
Somebody can explain how to do ?

Thanks in advance.

 

Brice

[[email protected]]

Hello, as you can see the "add to cart" button in Vekkia response is not aligned well. My question is how to align vertical this  button in center of this block. I use padding but it makes problems in mobile view. Could someone help me pliiizzz....

[Alexandra-Ionela]

Hi!

Does anyone knows wich is the path to the source code of the "Cart icon" in the desktop version of the website, so I can change the cart icon (font awesome) with this icon (Google material icon):  <i class="material-icons">shopping_basket</i> ?

I've put the "Google material icons" source code in my theme "header", I've managed to change the "User" and "Cart icon" in the mobile version of my website butI don't know how wich is the path to the file that contains the source code of te "Cart icon" from desktop version of the theme. I am using PrestaShop 1.6.1.23 + arehouse theme.

Thank you in advance!

 

[Alexandra-Ionela]

19 hours ago, mdekker said:

/themes/warehouse/modules/blockcart/blockcart.tpl

Hi! I've changed all the <i class="icon..............."></i> elements from the "blockart.tpl" file with this code <i class="material-icons">shopping_basket</i> and I haven't seen any change :(((( Am I missing something? Thank you!

Edited November 13, 2018 by Alexandra-Ionela
Wrong translate (see edit history)