Support » Plugin: YITH WooCommerce Wishlist » Added to Wishlist (Full Black Heart) in the Category Page

  • Resolved nextgenua

    (@nextgenua)


    Hello Guys,

    I have a Problem, The heart doesn’t go black when I add it to the wish list, it stays the same.

    I have sample images in there so far for a better overview.

    the page is not finished yet is still in the construction phase, and would like to solve this problem.

    PS: When I activate the loop settings on YITH, I see another heart symbol that fulfills my wish. It turns black when I click. The only problem is that it’s not in the product image, but outside of the product image. I managed to integrate the Hearz symbol into the product image using CSS codes. However, as soon as I go to the phone view, the icons are in a different place. So I disabled the loop settings, even though I need it, the only problem is that the icons change their position for different views.

    I am grateful for any helpful answer πŸ™‚

    Greeting
    Nextgenua

    • This topic was modified 4 months, 2 weeks ago by nextgenua.
    • This topic was modified 4 months, 2 weeks ago by nextgenua.
    • This topic was modified 4 months, 2 weeks ago by nextgenua.

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

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author YITHEMES

    (@yithemes)

    Hi Nextgenua

    Unfortunately the button that you see on your products is customized by the theme, and there is no way to customize appearance when item is already in wishlist
    I suggest you to enable Loop settings back; maybe we can help to position our button in a more reliable way πŸ™‚

    Thread Starter nextgenua

    (@nextgenua)

    Hello, thank you very much, I’m going to remove the Icon with a CSS code as I don’t know where the setting to disable this Hearz symbol is.

    If I enable it, could you please help me set up the loop? As already described, I received it with a CSS code in the product image. The only problem is that the symbol does not stay in place on different views.

    I activated the loop settings and selected it in the picture above. You can see the heart is outside of the product image.

    Plugin Author YITHEMES

    (@yithemes)

    Hi there

    please, try to add the following CSS rules to Additional CSS section of theme customizer (WP Dashboard -> Appearance -> Customize)

    .products .product .yith-wcwl-add-to-wishlist {
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 1;
    }
    

    This is my final result, and it looks pretty much the same at any resolution πŸ™‚

    Thread Starter nextgenua

    (@nextgenua)

    Hello, thank you sooo much it works! ☺️

    I have a last question, is it possible to convert the counter to a full heart instead of a number?

    Plugin Author YITHEMES

    (@yithemes)

    Hi again

    I’m sorry, I’m not sure if I correctly understand your question
    Which counter do you want to change? I can see one in the header of your site, but that is definitely a theme’s customization

    Do you want to chaange the icon to become a full heart instead of the outline?
    Please, let me know

    Thread Starter nextgenua

    (@nextgenua)

    Hello, when I add a product to my wish list, I want a full heart instead of a counter.

    Have a nice day!

    Greeting
    NextGenUA

    Plugin Author YITHEMES

    (@yithemes)

    I’m sorry, still not sure if I understand your request
    Do you want this icon to become a full heart whe user has something in wishlist?

    In this case you’ll need to talk with your theme developers, since that is a theme’s customization

    Thread Starter nextgenua

    (@nextgenua)

    Hello,

    Yes, the heart should be full (black) when you add something to the wish list.

    If this should be from my theme is there a possibility of the YITH Wishlist plugin?

    Plugin Author YITHEMES

    (@yithemes)

    Hi again

    Maybe you could try with this custom CSS

    .header-wishlist-icon i[data-icon-label]:before {
        content: "\e000";
    }

    Please, let me know if it works as expected

    Thread Starter nextgenua

    (@nextgenua)

    Hello,

    Unfortunately it didn’t work, do I have to do something about the YITH Wishlist settings?

    Plugin Author YITHEMES

    (@yithemes)

    It is really strange, it seems to be working for me
    I registered a video for you, in order to show my test

    As you can see, I applied the suggested CSS rules to inspector sylesheet, and then I can see the “counter” icon changing when I add/remove something from wishlist

    Thread Starter nextgenua

    (@nextgenua)

    Hello Again,

    I just see that only works on mobile.

    but not on desktop and tablet for me.

    Greeting
    NextGenUA

    • This reply was modified 4 months, 1 week ago by nextgenua.
    Thread Starter nextgenua

    (@nextgenua)

    Hello Again,

    And if possible, you can also remove the counter without removing the counter from the cart?

    Greeting
    NextGenUA

    • This reply was modified 4 months, 1 week ago by nextgenua.
    Plugin Support Antonio La Rocca

    (@therock130)

    Hi again

    I checked your site’s source code, and I think that you can only see that rule on mobile devices because there is an issue with this rule

    It is missing a closing curly brackets for the media query; please, add it and the last rule should start working for desktop devices too

    And if possible, you can also remove the counter without removing the counter from the cart?

    Do you mean this?
    In that case I suggest you to use the following rule

    .header-wishlist-icon i[data-icon-label]:after {
        display: none;
    }
    Thread Starter nextgenua

    (@nextgenua)

    Hello,

    Thank you so much it works! You two are the best πŸ™‚

Viewing 15 replies - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.