Place wishlist icon in product image on product page

Hi again

I just checked one produnct on your shop, and ATW button seems to be placed on top of the image already (please, refer my screenshot)

DO you want to apply some changes to this appearance? Could you please explain me what do you want to change?

Hi,

Sorry, I didn’t explain clearly. On the product page I would like the icon to be a black outlined heart, then when added to the basket it becomes a full black heart. The css works well for the shop page, but for some reason doesn’t affect the single product pages. Could you tell me how to fix this please?

Thank you,

Kirsty

Hi Kirsty

I created some CSS that could help you get the desiderd result

.product .woocommerce-product-gallery .yith-wcwl-add-to-wishlist {
    position: absolute;
    width: auto!important;
    left: 20px;
    top: 20px;
}

.product .woocommerce-product-gallery .yith-wcwl-add-to-wishlist a.button {
    background: none;
    border: none;
    padding: 0;
    color: #555;
    margin: 0;
    line-height: 1;
    min-height: 0;
    font-size: 0;
}

.product .woocommerce-product-gallery .yith-wcwl-add-to-wishlist a.button:hover {
    box-shadow: none;
    color: #434343;
}

.product .woocommerce-product-gallery .yith-wcwl-add-to-wishlist a.button i {
    margin: 0;
    font-size: 26px;
}

.product .woocommerce-product-gallery .yith-wcwl-add-to-wishlist a.button span,
.product .woocommerce-product-gallery .yith-wcwl-add-to-wishlist .separator,
.product .woocommerce-product-gallery .yith-wcwl-add-to-wishlist .view-wishlist {
    display: none;
}

Please, try to add it at the end of Additional CSS section of your theme customizer (WP Dashboard -> Appearance -> Customize)

Here you can see my results: Add To Wishist – Remove From Wishlist

That worked perfectly, thank you!!

You’re welcome!

We are doing our best to improve our plugins. Our target is to develop and release the best free plugins for WooCommerce, but to achieve this we need your help. Please leave a good review to support us and help our growth

Hi there, i have been trying to have the same result using the css but not working for me. please help. my site thruvibes.com

Thank you

Hi, i have same problem. But css doesnt work for me. My site https://www.flyingrugs.fi

Thank you

• This reply was modified 3 years, 7 months ago by hamzukhan.

Hi there,

your css doesn’t work for my site. Please advise: https://heyvino.de

I think I have some issues with the heart turning grey after I add a product into the wishlist on the shop gallery (the heart that is on the photo). After I add a product to the wishlist, the heart it stays the same… with the outline heart.

For sure there is some css from the theme or other plugins. is there a way to overwrite the css for that specific action (if I have a product in the wishlist the heart to be full grey)?

in the shop gallery (not single product)
Thx