Support » Plugin: YITH WooCommerce Wishlist » Heart icon not showing correctly

  • Hi;

    I use free version of YITH WOOCOMMERCE WISHLIST. I made all the settings but when you go to [ redundant link removed ] this page all the heart icons appear two and bad. How could I solve this issue?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • lpestudio


    hello, something similar happens to me I broke the design of the buttons and the icon does not appear, try to do with the settings but it was impossible, with the previous version everything was better.

    try removing the heart of the settings

    Plugin Author YITHEMES


    @makroliva It seems like you currently have “Add to Wishlist” button enabled on shop page, but at the same time the theme adds it again on product image

    This leads to the double Add to wishlist problem you’re experiencing

    My suggestion here is to disable “Show “Add to wishlist” in loop” option in WP Dashboard -> YITH -> Wishlist -> Add to Wishlist Options -> Loop settings
    This way you should just see the button that is added by your theme

    Then there is a problem with the appearance of the remaining button
    In order to solve this, I suggest you to apply the following rules to Additional CSS section of your theme customizer:

    ul.products li.product .mkdf-pl-inner .yith-wcwl-add-button i {
        display: none;
    ul.products>.product .mkdf-pl-inner .mkdf-pl-text-inner .yith-wcwl-add-to-wishlist {
        position: relative;
        top: 0;
        left: 0;

    This is the final result you should get on your theme

    @lpestudio Problem on your site seems related to Porto theme; please, check the topic that I pointed out in the answer to your support thread



    @yithemes thank you for your help. I did your suggestion. It solve the main page of “ÜRÜNLER” but when I go inside of a good page the heart icon is not shows good. If you visit the;
    I want to delete below icon and want to add icon on product’s top of pictures’ left corner. Could I do it? And how?

    Best Regards;


    Plugin Author YITHEMES


    Please, try with the following CSS rules

    .mkdf-woo-single-page .mkdf-single-product-content .images figure .yith-wcwl-add-to-wishlist{
        position: absolute;
        left: 30px;
        top: 30px;
        width: 30px;
        height: 30px;
    .mkdf-woo-single-page .mkdf-single-product-content .images figure .yith-wcwl-add-to-wishlist a {
        padding: 5px 2px 4px 5px;
        border: none;
    .mkdf-woo-single-page .mkdf-single-product-content .images figure .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a{
        padding: 3px 0
    .mkdf-woo-single-page .mkdf-single-product-content .images figure .yith-wcwl-add-to-wishlist a i{
        display: none;

    This is the final result that I got: screen

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Heart icon not showing correctly’ is closed to new replies.