OpenCart Community

Posted: **Wed Oct 21, 2015 4:36 pm**

Good day,

What I would like to know is whether someone knows how the cart icon of the "ADD TO CART" button could be replaced by an other icon. I use an extension called: Add to Cart Button Switcher but it is only changing the text field.

In other words:
The owner of a baseball Page would like to have a baseball icon instead of a shopping cart icon on Add to cart button:)

Your idea's are highly appreciated,

Thanks & BR
Pat

Posted: **Wed Oct 21, 2015 4:52 pm**

I've replaced mine in default template but it's in many files if you want to change all instances, some of them even in javascript files.

Posted: **Wed Oct 21, 2015 5:05 pm**

VictorDrummond wrote:I've replaced mine in default template but it's in many files if you want to change all instances, some of them even in javascript files.

Thanks for reply. That sounds like a lot of complicated work. Did it take much time to do this? I will try to do this anyway. Maybe someone knows something easier to do. ? Any tipp's aprreciated

Posted: **Wed Oct 21, 2015 5:48 pm**

It took me hours to find all and there was a fair bit digging...

One lot of 4 or maybe even 6 instances is in catalog/view/javascript/common.js

Tip is with this file in particular is, (assuming you're going in through cpanel/filemanager) is when you open each file use the binoculars at the top, to search for "fa-shopping-cart" and in the "replace" field, add in whatever fa-iwantthisone you wish to change to.

Then more around catalog/view/theme/*/...

And if my memory serves me correct, a couple even in language files..

See the result here

Posted: **Wed Oct 21, 2015 6:30 pm**

A much easier and simplier way should be adding a few lines to the stylesheet, like that:

Code: Select all

.fa-shopping-cart:before {
  content: "\f016" !important;
}

Replace f016 above either with an existing fontawesome icon or yours.

Posted: **Wed Oct 21, 2015 7:03 pm**

OSWorX wrote:A much easier and simplier way should be adding a few lines to the stylesheet, like that:
Code: Select all
.fa-shopping-cart:before {
  content: "\f016" !important;
}
Replace f016 above either with an existing fontawesome icon or yours.

At the beginning thanks for your ideas.
I must admit I am not familiar with programming, changing scrypts etc. I dont know whether I undestand this one good. What I tried to do yesterday was searching the directories of my website for a image file including the cart icon. I just replaced this image by a different image and hoped it will work, but didn't. Comming back to your suggestion, Should I try to paste te lines you wrote above to my stylesheet ?

Posted: **Wed Oct 21, 2015 7:13 pm**

123polizei wrote:Should I try to paste te lines you wrote above to my stylesheet ?

Why not?
Nothing bad happens if done, and if made correct you should see the result.
The code I posted is just to give you an idea how it could be made.

Posted: **Wed Oct 21, 2015 9:42 pm**

123polizei wrote:
OSWorX wrote:A much easier and simplier way should be adding a few lines to the stylesheet, like that:
Code: Select all
.fa-shopping-cart:before {
  content: "\f016" !important;
}
Replace f016 above either with an existing fontawesome icon or yours.
At the beginning thanks for your ideas.
I must admit I am not familiar with programming, changing scrypts etc. I dont know whether I undestand this one good. What I tried to do yesterday was searching the directories of my website for a image file including the cart icon. I just replaced this image by a different image and hoped it will work, but didn't. Comming back to your suggestion, Should I try to paste te lines you wrote above to my stylesheet ?

You can paste OSWorX's code in my free extension Custom CSS

Posted: **Thu Oct 22, 2015 5:30 am**

OSWorX wrote:
123polizei wrote:Should I try to paste te lines you wrote above to my stylesheet ?
Why not?
Nothing bad happens if done, and if made correct you should see the result.
The code I posted is just to give you an idea how it could be made.

Might be right, but I have totally no Idea what this font awesome content is. Like your example" \f016" and I have no idea where to put my content in (my choosen icon) Can u try to explain this in Idiot Version

? Thanks

.fa-shopping-cart:before {
content: "\f016" !important;
}

Posted: **Thu Oct 22, 2015 5:52 am**

First of all, using your preferred searchengine - I guess starts with G.. - and using something like 'replace font awesome icon' you will get nearly 17 mill. results.

Your last question was 'where to put that content' ..
Before you have asked:

Should I try to paste te lines you wrote above to my stylesheet

So, I assume you know what you talking about ..
How should I know what you mean with 'your' stylesheet??

Basically we are talking here about the common stylesheet.css inside the folder

Code: Select all

../catalog/view/theme/YOUR_TEMPLATE_NAME/stylesheet/stylesheet.css

Clear until now?
There you paste the code I have given you.

Or use something like that:

Code: Select all

.fa-shopping-cart:before {
  content: url(\http://your-website/link-to-image.png) !important;
}

where http://your-website/link-to-image.png is the absolute path (you can also use a relative) to your desired icon.

Clear?
If not use viethemes suggestion and use his module.

Still not clear?
Then call a developer for help.

Posted: **Thu Oct 22, 2015 6:27 am**

OSWorX wrote:First of all, using your preferred searchengine - I guess starts with G.. - and using something like 'replace font awesome icon' you will get nearly 17 mill. results.

Your last question was 'where to put that content' ..
Before you have asked:
Should I try to paste te lines you wrote above to my stylesheet
So, I assume you know what you talking about ..
How should I know what you mean with 'your' stylesheet??

Basically we are talking here about the common stylesheet.css inside the folder
Code: Select all
../catalog/view/theme/YOUR_TEMPLATE_NAME/stylesheet/stylesheet.css
Clear until now?
There you paste the code I have given you.

Or use something like that:
Code: Select all
.fa-shopping-cart:before {
  content: url(\http://your-website/link-to-image.png) !important;
}
where http://your-website/link-to-image.png is the absolute path (you can also use a relative) to your desired icon.

Clear?
If not use viethemes suggestion and use his module.

Still not clear?
Then call a developer for help.

Dear OsWorx,

I did this befor and still have had the same problem...Until I deleted the browser Cache etc. and the changes finnaly appeared.

So Tip to all. ! Delete your browser history before trying. Your solution is working perfectly.

Thanks a lot,

Posted: **Thu Oct 22, 2015 6:42 am**

123polizei wrote:Dear OsWorx,

I did this befor and still have had the same problem...Until I deleted the browser Cache etc. and the changes finnaly appeared. So Tip to all. ! Delete your browser history before trying. Your solution is working perfectly.

Thanks a lot,

And you think we all here know what you are dong or have done before - before you are asking question after question?
I have not stolen my time!
If someone is asking questions like you, I assume he knows what he is doing.
And deleting a cache (browser and file) should always be the first task after such a operation (if the cache is enabled which should be always DISabled when working on files like you!).

But you are right, assuming is always the wrong approach.

Posted: **Thu Apr 27, 2023 4:16 pm**

Hello.
I'm also trying to replace the cart icon by a home made icon, but sometimes it's in white inside buttons, and in colour without button.
And the css code seems the same for both.
I have also 2 versions of my personal icon, but how can we manage this ?

Posted: **Sat Jul 15, 2023 2:08 am**

Django29 wrote: ↑
Thu Apr 27, 2023 4:16 pm
Hello.
I'm also trying to replace the cart icon by a home made icon, but sometimes it's in white inside buttons, and in colour without button.
And the css code seems the same for both.
I have also 2 versions of my personal icon, but how can we manage this ?

While this post seem to be a little old, and that you're using a custom theme, I would suggest to contact the extension theme developer for more information on this.

OpenCart Community

Is it possible to replace the cart icon ?

Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?

Re: Is it possible to replace the cart icon ?