Change colour of Add To Wishlist button

Hi Karen,

You can update the wishlist colors with the below CSS in your KLEO Child theme or in Theme Options > General Settings > Scroll to: Quick CSS.

.woocommerce ul.products li.product:hover .yith-wcwl-add-to-wishlist a {opacity: 1;background-color: #FFB1D2;}

If you’d like to change the color of the border too please use the below CSS instead

.woocommerce ul.products li.product:hover .yith-wcwl-add-to-wishlist a {opacity: 1;background-color: #FFB1D2;border: solid 1px #FFB1D2;}

Thanks,

Kieran.

Hi,

The below CSS should work on product pages, sorry for missing those out 🙂

Product page wishlist button

.yith-wcwl-add-button.show {
    background-color: #FFb1D2;
    border: solid 1px #fcb0d0;
}

Product page wishlist text

a.add_to_wishlist.single_add_to_wishlist.button.alt {
    color: white;
    opacity: 1;
    border: 0;
}

Thanks,

Kieran

Hi, sorry about that, please try the amended CSS below.

.single-product .yith-wcwl-add-button.show {
    background-color: #FFb1D2;
    border: solid 1px #fcb0d0;
}

.single-product a.add_to_wishlist.single_add_to_wishlist.button.alt {
    color: white;
    opacity: 1;
    border: 0;
}

Thanks,

Kieran.