Wishlist Icon Change

ardaolgun

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ardaolgun

Sorry,

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

https://nurkaraata.com/new/

Thanks

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ardaolgun

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ardaolgun

Now it works.

Thanks a lot