Changing wishlist icon to svg image

Hey everyone,

I have read through 2 other posts i found about this topic but they did not fix the issue I’m having.

I would like to change the wish list heart shape (on all the locations, like the header, but also the wish list page, etc) to an svg image i have made.

i did find a snippet of css in another post but it didn’t seem to change anything.

Thanks for any info and let me know if I need to provide additional details! 🙂

Hello,

First of all thanks for choosing our Theme, we are glad to be you in the WoodMart WordPress family :).

You can change the wishlist icon in the header by editing the header.

Screenshot for Clarification: https://prnt.sc/xrbggq

And for the wishlist page please provide the URL of the website along with the SVG icon URL to check it myself and help you out accordingly.

Regards.
Xtemos Studios.

Oh! I just thought I could change it to a gear icon… but no, this makes way more sense. 😛

Thanks, I’ll try it in a bit, and report back. 🙂

Hello,

Ok We will wait for your next reply.

Best Regards.

Alright, as promised I will report my findings now:

Thanks for pointing me in the right direction, i now have a changed image. 🙂
I would like to ask however, how i can change its size to be consistent with the cart icon?
Check the attachement to see how it looks now.
I would like to also manipulate its color to be white by default and yellow when i hover over it with the cursor. The cart icon already does this so I’m wondering if its possible with svg image as well, since I’m using an svg as the wishlist icon now. Any ideas?

Thanks again!

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

For the size of the SVG icon you need to open your SVG icons file with some editor like Sublime Text or default system text editor and add width=”25″ height=”25″ attributes to your

Then you will need to re-upload your icons in WordPress Dashboard.

The color of the SVG icon is defined in the icon’s SVG file and there is no option in Theme Settings available to change the color as you mentioned.

Please provide the URL of the website to check whether it is possible with Custom CSS or not.

Best Regards.

Yes, changing the svg size worked perfectly. I did not think of this since i thought svg’s are resizable to any size, but thanks!

The website is currently being worked on, and is not live. I have put the url in the private part. I thought i read somewhere that manipulating svg’s via css was possible, if its not i don’t know if we can even make it different colors for normal, and hover…
Thanks for the help btw 🙂

Hello,

You are Most Welcome.

Sorry, but it is not possible to change the color of the SVG icon in the header using Custom CSS. You need to use a colored SVG icon according to your needs.

Best Regards.

Can i use a different svg for normal state and hovered state?
as in load yellow svg when mouse over, load white svg when not mouse over?

Hello,

Sorry but there is no such option in Theme Settings that you can use two different icons on hover and normal state.

And you need to use colorful svg icons according to your needs.

Best Regards.

So you’re saying I can make 1 svg that is white but also becomes yellow on mouse over? and I can make set the svg to do that instead of css?
I know you can make svg’s colorful, but I did not know this. I will take a look at it and report back

Hello,

The color of the SVG icon is added inside the SVG file that’s why I replied. And the SVG in the header is added using the tag by default and it is not possible to change the color of the SVG with CSS.

Ok, we will wait for your next reply.

Best Regards.

Thanks again for all the help. For now we’ll have to find another way to achieve this goal, but this topic can be closed.

I wish you the best

Hello,

We are thrilled that you loved your experience with XTEMOS, We put customer experience and satisfaction as our priority,
and your words reaffirms the hard work we put in every day. So thanks for your kind words and we look forward to seeing you again.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts