Wishlist Heart Icon

[bestfitbybrazil]

if you look at my site in shop page,  then hover any product you can see the white heart icon in top left corner.  The issue is that it is not visible before hover and it is not visible on white backgrounds because its white by default.  the other place the icon appears is in the single product detail page.   So if you click on any product and view the details page you will see a different heart icon.  Its black on white background and if you hover over it, it turns pink.  But its always visible on this page.  I need something like this for products.  The customer cannot see heart on most products even when hovering.  How can we change icon color or background of its color.  On this link https://www.carbon38.com/shop-all-activewear you can see how one company does it, which works well.  I would like something like that, if possible.  It even turns pink on hover. Please help me create this thanks.

 

[Harry]

Hi,

You can add custom css

.product-image .yith-wcwl-add-button a {
opacity: 1;
visibility: visible;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

ok this makes the heart show all the time, but it needs background.  because on white background images you cannot see the heart.  this is how its set now. notice image on right you can not see heart because its on white background.

now notice the heart here the heart has background so you can see it on any image background.  this is what i’m trying to create.

 

[Harry]

Hi,

Please change prev code to

.product-image .yith-wcwl-add-button a {
opacity: 1;
visibility: visible;
background: #ddd;
padding: 5px 5px 3px;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

nothing changed after using this code.  looks the same ?  https://sexyleggingsusa.com/shopallproducts/

[bestfitbybrazil]

sorry need to clear cache.  but the heart is a little uneven on right side it cuts-off sooner then on left, and it doesnt show this way on mobile device.

[bestfitbybrazil]

resolved.  made some adjustments on padding px.  thx.

[bestfitbybrazil]

After everything we’ve been doing, I just noticed my wishlist heart on products disappeared. ??  also if you click the product, in the details there is a read button saying “I love it”.  where is this coming from?  I already have the wishlist heart in the product details next to “add to cart” button

[Harry]

Hi,

I checked your site and still see the wishlist heart icon there, please try clear cache and check again.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

i cleared cache and cookies and don’t see hearts unless i open product details.  then its on on the page not product.

[Harry]

I still see it there http://take.ms/yOuxN

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

I don’t see it still. are you using bestfitbybrazil.com?  its not there at all.

[Harry]

Could you try deactivate plugin one by one.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

ok deactivated 1 plugin at a time, still not hearts for wish list.

[Harry]

Hi,

I fixed this issue. it because new version of plugin YITH Wishlist have some updates.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

I just saw this great.  Its a little quirky on smaller screens and mobile devices showing double badges and white space top portion of images.  ?

 

[Harry]

Could you clear cache and check it again. I check your site it now work well.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

THAT WORKED!! just need to go to settings, then Safari, then Clear website link.  Who knew?? This is crazy.  i never knew cache had to be manually cleaned this way.  Once you turn mobile off or download upgrade you would think it clears, but it doesn’t. Had to do the same thing to ipad!  But now works good.

ONE THING you have not answered yet.  Can you tell me where this “Love it” pink button is coming from?  I thought it was YITH wish list but it was not.  i need to turn it off because it doesn’t seem to be doing anything.  The little heart next to “Add to Cart” button works and does what the other one probably should.

[Harry]

Hi,

The “Love It” button is add to favorite. Which plugin you using for this feature?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

That’s what I was asking you. I turned plug-ins off one at a time and button remains so thought it was the theme feature

[Harry]

Hi,

It not our theme’s feature. Could you check some where? Did you add any javascript code to your site?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts