Added to Wishlist (Full Black Heart) in the Category Page

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 ??

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.

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 ??

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?

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

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

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

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?

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

Hello,

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

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

Hello Again,

I just see that only works on mobile.

but not on desktop and tablet for me.

Greeting
NextGenUA

• This reply was modified 3 years, 8 months ago by 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 3 years, 8 months ago by nextgenua.

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;
}

Hello,

Thank you so much it works! You two are the best ??