Add to Wishlist Icon Behavior Customization

[Feras]

Hello,

I need your help regarding the “Add to Wishlist” icon. I would like to implement the following changes. How can I do that?

1- When the icon is clicked and the product is added to the wishlist, the icon changes to a checkmark. I want it to remain as a filled heart with this color #f59a57.

2- When clicking on the “Add to Wishlist” icon for a product that is already in the wishlist, it redirects me to the wishlist page. Instead, I want the icon click to remove the product from the wishlist without redirecting to the wishlist page. How can I achieve this?

• This topic was modified 10 months, 2 weeks ago by Feras.

Hello,

01. Please add this code to the Theme Settings > Custom CSS > Global:

body .wd-action-btn>a.added:before {
    content: "\f106";
	  color:red;
}

02. Sorry to say but right now there is no option in Theme Settings available for that. It requires Customization and this is beyond our limitations and support policy scope.

Best Regards.

Hi Aizaz,

Thank you for your response. The code you gave me works indeed. But I just want the heart icon to be filled, not empty. The content: “\f106”you provided is for an empty heart icon. Can you give me thecontent` for a filled heart icon?

Hello,

Please try to upload the image to the Media Library and copy the image URL and use this URL In the Custom CSS and add this code to the Theme Settings > Custom CSS > Global:

.wd-action-btn>a.added:before {
    color:transparent;
}
body .wd-action-btn>a.added {
    color:transparent;
    background-image:url("https://example.com/wp-content/uploads/2024/07/heart.png");
	width:25px;
	height:25px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	margin-left:10px;
}

Best Regards.

[Author]

Posts