Wishlist Icon Change

ardaolgun · December 2022

Hi,

I want to change svg icon of wishlist. I changed on header area but I should change on single product page. It is a heart-icon as default. I want to use star icon on all of the site.

How can I change it? Is there any icon select area? If not can you send me code part please?

Thanks

Phil · December 2022

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

ardaolgun · December 2022

Sorry,

I forget to add site link. You can find here.

https://nurkaraata.com/new/

Thanks

Phil · December 2022

Please, try the following CSS code:

.products .mfn-wish-button svg{
   display: none;
}
.products .mfn-wish-button:after{
   content: '\e928';
   font-family: 'mfn-icons';
   font-size: 20px;
}
.products .mfn-wish-button.loved:after{
   content: '\e927';
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Thanks

ardaolgun · December 2022

Thanks a lot. Now it is ok on product list page. But it seems as a heart icon on single product page. Can you add some code for that?

https://nurkaraata.com/new/urun/cecilia-black-shine-2/

Phil · December 2022

Please, replace the previous CSS code with the following one:

.mfn-wish-button svg {
display: none;
}
.woocommerce div.product div.images .mfn-wish-button.tooltip:after{
font-size: 20px;
display: block !important;
opacity: 1; 
position: static;
transform: unset;
width: unset;
background-color: transparent;
color: #000;
content: '\e928';
font-family: 'mfn-icons';
height: unset;
margin: 0;
}
.woocommerce div.product div.images .mfn-wish-button.tooltip.loved:after {
   content: '\e927';
}
.mfn-wish-button:after{
content: '\e928';
font-family: 'mfn-icons';
}
.mfn-wish-button.loved:after{
content: '\e927';
}

Best regards

ardaolgun · December 2022

Now it works.

Thanks a lot

Wishlist Icon Change

Comments