change cart icon on mobile

This topic has 10 replies, 2 voices, and was last updated 5 years, 2 months ago by Elise Noromit.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
September 10, 2019 at 1:00 pm #142962

raph7433
Participant

Hello,

Can you help me please to change the cart icon on mobiles ? I am not talking about the one in the header. This is easy to change, and i did it. I am talking about the product picture, with the quick add ton cart. I tried to find the path in css but i did not find where i should upload my own jpeg. See attached file please, it will be easier to understand 🙂

Thx a lot

Attachments:
You must be logged in to view attached files.

September 10, 2019 at 3:03 pm #142992

Elise Noromit
Member

Hello,

Please choose and provide an icon URL which you want to add and I will provide CSS.

Here is the source https://fontawesome.com/v4.7.0/icons/

Best Regards

September 10, 2019 at 3:13 pm #142996

raph7433
Participant

Thx for your quick answer 🙂

https://www.fabyoulousbeauty.com/wp-content/uploads/2019/08/pictoPANIER.png

September 10, 2019 at 7:55 pm #143029

Elise Noromit
Member

Hello,

The icon provided is black and the button is also black, the icon would not be visible, please provide a white image or take icon from here https://fontawesome.com/v4.7.0/icons/

Best Regards

September 11, 2019 at 5:50 am #143068

raph7433
Participant

Hello,

All right, here is the link : https://fabyoulousbeauty.com/wp-content/uploads/2019/09/pictoPANIER_white.png

Thx a lot !

September 11, 2019 at 8:19 am #143113
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:
```
body .woodmart-add-btn > a::before {
    background-image: url(https://fabyoulousbeauty.com/wp-content/uploads/2019/09/pictoPANIER_white.png);
    content: "" !important;
    background-repeat: no-repeat;
    background-position: center center;
}
```
Best Regards
September 11, 2019 at 8:32 am #143118

raph7433
Participant

Works fine thx a lot. I just have one last question and and i don’t bother you anymore. The picto is taking all the place, with no margin or padding. I would like to add some space, like 3px all around. I tried but i did not manage to. Can you help me on that please ? For instance, i added “margin : 3px 3px;” but it did not work, still the cart is taking all the square.

Thx again

September 11, 2019 at 8:33 am #143119

raph7433
Participant

See attached file if i am not clear 🙂

Attachments:
You must be logged in to view attached files.

September 11, 2019 at 2:43 pm #143235

Elise Noromit
Member

Hello,

Please add this line into the provided code: background-size: 90% 90% you can change these two values as per your needs.

Best Regards

September 11, 2019 at 3:47 pm #143253

raph7433
Participant

Works perfect, thx a lot !

September 11, 2019 at 8:53 pm #143284

Elise Noromit
Member

You are welcome! If you have any questions please feel free to contact us.

Best Regards
Author

Posts