Change the wishlist icon

[coveti]

We cannot change the wishlist icon after the last update, we used to use the following style code but it doesn’t work anymore:

.wd-wishlist-icon > a::before {
content: url(https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-before.png);
}

We have attached to icons one for normal wishlist icon and the other is for hover wishlist icon.
Please watch the following video: https://www.loom.com/share/3e0b29e6a2394490939b6975ef5bd88d
Please help….

• This topic was modified 2 years, 4 months ago by coveti.

Attachments:

You must be logged in to view attached files.

Hello,

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

body .wd-action-btn.wd-style-icon>a:before {
    display:none;
}
body .wd-action-btn.wd-style-icon>a {
    background: (https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-before.png)!important;
	background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}

Check the image URL.

Best Regards

[coveti]

Thanksd alot for your help…
1- The code is working on desktop only but it doesn’t change the icon on hover as we requested.
Regular icon: https://coveti.com/wp-content/uploads/2022/09/Wishlist_icon-2.svg
Hover wishlist icon: https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-1.svg
2- The Wishlist icon, doesn’t show up on mobile at all.

• This reply was modified 2 years, 4 months ago by coveti.

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the code with this:

.wd-wishlist-btn.wd-action-btn.wd-style-icon > a:before {
	background-image: url("https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-before.png");
	width: 20px;
  height: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain ;
	color: transparent;
}
.wd-wishlist-btn.wd-action-btn.wd-style-icon > a:hover:before,
.wd-wishlist-btn.wd-action-btn.wd-style-icon > a.added:before{
	background-image: url("https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-1.svg");
}

Please check and provide pages URL where this code is not applied.

Best Regards

The icon is showing on the desktop as expected.
However, it is still not showing on mobile.
Also we want to change the icon on mobile and on single product page for the add to wishlist button beside the add to cart button.

Hello,

Please provide the previous code that was added: https://prnt.sc/hb9iU65Sb34D

Let us know if the icon still does not appear.

Best Regards

[coveti]

It, is now working as expected, thanks alot.
We need to change the wishlist and the cart icon on the header as well
We used:
.wd-header-wishlist .wd-tools-icon:before {
content: url(“https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-1.svg”);
}
.wd-header-wishlist .wd-tools-icon:a:hover:before {
content: url(“https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-1.svg”);
}

But it didn’t work

—————–
We also tried to change the cart icon but it didn’t work

.wd-header-cart .wd-tools-icon.wd-icon-alt:before {
content: url(“https://coveti.com/wp-content/uploads/2022/09/Cart_icon-2.svg”);
}
.wd-header-cart .wd-tools-icon.wd-icon-alt:a:hover:before {
content: url(“https://coveti.com/wp-content/uploads/2022/09/Cart_hover_icon-1.svg”);
}

——————-
Also the add to cart button on the single product page still has the old icon

• This reply was modified 2 years, 3 months ago by coveti.

Hello,

Please add this code:

.wd-header-wishlist .wd-tools-icon:before {
	background-image: url("https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-before.png");
	width: 20px;
  height: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain ;
	color: transparent;
}
.wd-header-wishlist:hover .wd-tools-icon:before{
	background-image: url("https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-1.svg");
}

Best Regards

Thank you very much, your code is working as expected
—————-
What about the icon on “add to cart button” that is on the Single Product page.

We did use the below code:

.wd-action-btn>a:before {
background-image: url(“https://coveti.com/wp-content/uploads/2022/09/Wishlist_icon-2.svg”);
width: 21px;
height: 21px;
background-position: center;
background-repeat: no-repeat;
background-size: contain ;
color: transparent;
}
.wd-action-btn>a:hover .wd-tools-icon:before{
background-image: url(“https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-1.svg”);
}

The code didn’t work properly

Hello,

Please check the image URL, do you want to add a heart icon to the Add to cart icon?

The icon itself is not valid.

Best Regards

We need to change the icon for the the add to wishlist button tht is next to the “add to cart button” on the single product page.
We did use the below css code:

.wd-action-btn>a:before {
background-image: url(“https://coveti.com/wp-content/uploads/2022/09/Wishlist_icon-2.svg”);
width: 21px;
height: 21px;
background-position: center;
background-repeat: no-repeat;
background-size: contain ;
color: transparent;
}
.wd-action-btn>a:hover .wd-tools-icon:before{
background-image: url(“https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-1.svg”);
}

The code didn’t work properly

Hello,

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

.wd-header-wishlist .wd-tools-icon:before {
	background-image: url("https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-before.png");
	width: 20px;
  height: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain ;
	color: transparent;
}
body .wd-wishlist-btn > a:before{
	background-image: url("https://coveti.com/wp-content/uploads/2022/09/Wishlist_hover_icon-1.svg");
}

Best Regards

[Author]

Posts