Wishlist Icon Hover Visibility

Hi @vaibhavtimrecha,

Generally it’s possible to achieve this using custom CSS but as far as I’m aware, the Astra theme has pretty complicated design. If you enable the button appearance on a product listing page, we can try to make the CSS for you.

Regards,
Stan

I have enabled the button appearance in the product listing page with button position as ‘Above thumbnail’.

@vaibhavtimrecha

You can try to use this Custom CSS:

ul.products li .tinv-wraper {
    position: absolute;
}

.astra-shop-thumbnail-wrap:hover .tinv-wraper {
    z-index: 10;
}

ul.products li.product .tinvwl_add_to_wishlist_button {
    margin-top: 3px;
}

• This reply was modified 4 years, 6 months ago by Stan.
• This reply was modified 4 years, 6 months ago by Stan.

Wow! Worked like a charm. Thank you.
Will the same code work when i buy the premiem version?

Also is it possible to move the heart icon a little bit up in mobile view?
Its perfect in Desktop view.

Yes, it will work in a premium version also.
I’ve checked the mobile look and the position seems to be the same on my end. Nevertheless you can set the margin-top to “0” if you like and re-check how it goes.

Hello,

I am also using TI Wishlist, with button position as ‘Above thumbnail’. I am using the Flatsome theme with woocommerce. Please provide CSS code to make the wishlist texts and icon display only on hover.

I need this help in URL: https://www.hisherstyles.com/

Thanks

@maslzr, I have the same case with you. I’ m also using TI Wishlist, with button position as ‘Above thumbnail’. I am using the Flatsome theme with woocommerce.

Have you gotten CSS code to make the wishlist texts and icon display only on hover? If you had, please send me. Thanks in advance.

@miyakong, Please add the CSS code:
product .tinv-wraper {
position: absolute;
}

.product:hover .tinv-wraper {
z-index: 10;
}

Hi @maslzr,

I’ll try this css code. I am very appreciated for your reply????????????.