Change colour of Add To Wishlist button

[Conscious Crafties]

Hello,

Is it possible to deepen the colour of the Add To Wishlist button so it’s the same colour as my other buttons?

#FFB1D2

See screenshot for how it appears too pale on the product page and gallery pages.

Many thanks,

Karen

[Kieran_SQ]

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 there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Conscious Crafties]

Thanks ever so much Kieran – that’s perfect on our gallery pages 🙂

How do I change the colour of the wishlist button on our Product Pages too?

Many thanks,

Karen

[Kieran_SQ]

Hi,

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

Product page wishlist button

COPY CODE

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

Product page wishlist text

COPY CODE

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

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Conscious Crafties]

Aww for some reason this changed the display of the wishlist button on the gallery pages too.

Instead of not being visible until the user hovers over the Gallery page image, it appears as a solid pink block constantly without hovering over it (no writing) – see screenshot attached.

Many thanks for your help,

Karen

[Kieran_SQ]

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

COPY CODE

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

COPY CODE

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

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Conscious Crafties]

PERFECT!!! Thanks for all your help 🙂

[Author]

Posts