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
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.
Hosting for Oc 2.x: Well tested on 2.03.1 including emails work correctly, cPanel Shared or WHM VPS, managed security, fast & reliable SSD drives, Raid 10 /4 disk redundancy, server locale - Texas, contact me to discuss further.
Active Member
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 aprreciatedVictorDrummond 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.
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
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
Hosting for Oc 2.x: Well tested on 2.03.1 including emails work correctly, cPanel Shared or WHM VPS, managed security, fast & reliable SSD drives, Raid 10 /4 disk redundancy, server locale - Texas, contact me to discuss further.
Active Member
A much easier and simplier way should be adding a few lines to the stylesheet, like that:
Replace f016 above either with an existing fontawesome icon or yours.
Code: Select all
.fa-shopping-cart:before {
content: "\f016" !important;
}Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.
At the beginning thanks for your ideas.OSWorX wrote:A much easier and simplier way should be adding a few lines to the stylesheet, like that:Replace f016 above either with an existing fontawesome icon or yours.Code: Select all
.fa-shopping-cart:before { content: "\f016" !important; }
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 ?
Why not?123polizei wrote:Should I try to paste te lines you wrote above to my stylesheet ?
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.
Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.
You can paste OSWorX's code in my free extension Custom CSS123polizei wrote:At the beginning thanks for your ideas.OSWorX wrote:A much easier and simplier way should be adding a few lines to the stylesheet, like that:Replace f016 above either with an existing fontawesome icon or yours.Code: Select all
.fa-shopping-cart:before { content: "\f016" !important; }
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 ?
http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension
Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme
Extra Positions PRO, Custom JavaScript, Custom CSS and others
OSWorX wrote:Why not?123polizei wrote:Should I try to paste te lines you wrote above to my stylesheet ?
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;
}
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:
How should I know what you mean with 'your' stylesheet??
Basically we are talking here about the common stylesheet.css inside the folder
Clear until now?
There you paste the code I have given you.
Or use something like that:
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.
Your last question was 'where to put that content' ..
Before you have asked:
So, I assume you know what you talking about ..Should I try to paste te lines you wrote above to my stylesheet
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.cssThere 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;
}Clear?
If not use viethemes suggestion and use his module.
Still not clear?
Then call a developer for help.
Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.
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:So, I assume you know what you talking about ..Should I try to paste te lines you wrote above to my stylesheet
How should I know what you mean with 'your' stylesheet??
Basically we are talking here about the common stylesheet.css inside the folderClear until now?Code: Select all
../catalog/view/theme/YOUR_TEMPLATE_NAME/stylesheet/stylesheet.css
There you paste the code I have given you.
Or use something like that:where http://your-website/link-to-image.png is the absolute path (you can also use a relative) to your desired icon.Code: Select all
.fa-shopping-cart:before { content: url(\http://your-website/link-to-image.png) !important; }
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,
And you think we all here know what you are dong or have done before - before you are asking question after question?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.
Thanks a lot,
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.
Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.
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 ?
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 ?
Attachments
cart-icon.jpg (19.2 KiB) Viewed 8717 times
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.
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Who is online
Users browsing this forum: No registered users and 113 guests
