Wishlist Premium version – Problem with icon appearence

Good Morning,
I update your yitheme wishlist to premium so to disable unathenticated users from creating wishlist and the appearance of the wishlist button changed.
May you help me with the icon and tooltip css?

Hello,

Try to put the following code snippet to the Custom CSS section in Theme Settings

.product-grid-item .yith-wcwl-add-to-wishlist > a {
    font-size: 0;
    display: inline-block;
    position: relative;
    width: 35px;
    height: 35px;
    line-height: 35px;
    color: rgba(0,0,0,.9);
}
.product-grid-item .yith-wcwl-add-to-wishlist > a i:before {
content: "\e08a";
    font-size: 18px;
    vertical-align: middle;
    margin-right: 2px;
    display: inline-block;
    font-family: Simple-Line-Icons;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.product-grid-item .yith-wcwl-add-to-wishlist > a .basel-tooltip-label {
    bottom: auto;
    left: auto;
    right: 135%;
    top: 50%;
    -webkit-transform: translateX(0) translateY(-50%);
    -o-transform: translateX(0) translateY(-50%);
    -ms-transform: translateX(0) translateY(-50%);
    -sand-transform: translateX(0) translateY(-50%);
    -moz-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
}
.product-grid-item .yith-wcwl-add-to-wishlist > a .basel-tooltip-label:before {
    content: "";
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 99%;
    right: auto;
    color: transparent;
    font-size: 16px;
    font-family: FontAwesome;
    line-height: 5px;
    -webkit-transform: translateX(0) translateY(-50%);
    -o-transform: translateX(0) translateY(-50%);
    -ms-transform: translateX(0) translateY(-50%);
    -sand-transform: translateX(0) translateY(-50%);
    -moz-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.product-grid-item .yith-wcwl-add-to-wishlist > a:hover .basel-tooltip-label {
background-color: #000;
    color: #fff;
    visibility: visible;
    top: 50%;
    bottom: auto;
    left: auto;
    right: 115%;
}

Regards

Thanks it works perfect!!!

I observed a problem in the final product page with hearts. Please view the attached below.

Add this also

.single-product-content .entry-summary .yith-wcwl-add-to-wishlist > a {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: #4E4E4E;
    text-decoration:none;
}
.single-product-content .entry-summary .yith-wcwl-add-to-wishlist > a:hover {
    color:#e70219;
}
.single-product-content .entry-summary .yith-wcwl-add-to-wishlist > a i {
    display:none;
}
.single-product-content .entry-summary .yith-wcwl-add-to-wishlist > a:before {
    content: "\e08a";
    font-size: 18px;
    vertical-align: middle;
    margin-right: 2px;
    display: inline-block;
    font-family: Simple-Line-Icons;
}

Regards

Thanks for your tries!!!
It didn’t work

Sorry, try this please

.basel-buttons .yith-wcwl-add-to-wishlist>div>a i,
.product-image-summary .yith-wcwl-add-to-wishlist>div>a i{
    display:none;
}

Regards

Thank you very much!!
It working perfect now.

Great, you are welcome!

[Author]

Posts