Wishlist Icon Change

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

Comments

  • 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

  • Sorry,

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

    Thanks

  • 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

  • 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/

  • 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

  • Now it works.


    Thanks a lot

Sign In or Register to comment.