Move heart icon to the right of the image

Hi there,
we hope you’re doing well!

In order to achieve what you need, add this CSS in Appearance > Customize > Additional CSS:

body.woocommerce-shop li.product .yith-wcwl-add-to-wishlist {
  left: inherit !important;
  right: 10px !important;
}

Try it out and tell us if its works well for you. If not, please, send us your website address (remember to set the wishlist for all users).

We will be attentive to your response.

Have a nice day!

Thank you for your reply! That helped me! Could you please tell me how I could increase the size of the heart on the header, as I couldn’t find anything. Thank you again.

Hello there,

Thanks for your reply, I hope you are doing well ??

If the icon you refer to is the same icon my colleague helped you with, what you can do is insert the following CSS code in the “Appearance”> “Customize”> “Additional CSS” section:

.add-to-wishlist-before_image .yith-wcwl-add-to-wishlist i {
    font-size: 2rem !important;
}

Note that the value that I put as 2rem is an example value, you feel right to modify it to your liking.

Have a nice day.

Thank you for your reply. I don’t want to change the size of the heart that’s on top of the image (add to Wishlist). I want to change the heart that is on the header and displays the number of all the products that’s on the Wishlist next to the menu and cart (see the Wishlist).

Thank you.

Hi there,

Could you send us the link of your site? It would be useful to us to identify the class that is using that icon since, by default, the plugin does not add any icon in the header, but many themes have a small integration for it.

We will be attentive to your response.

Have a nice day!

Hello again,

I can’t send you my site as it is local hosted (it’s a demo site). Also, to add to my previous question, I currently don’t have a wishlist icon on my header (my mistake I didn’t mentioned it) but I would like to add one and be able to change the size of it as well. I installed TI WooCommerce Wishlist in order to show you what I need so the picture is not with your plugin. Here it is.

Thank you.

Hello there,

Thanks for your reply, we hope you are doing well ??

In order to have the wishlist icon in your menu, what you must do is follow the following steps:

• Create a page containing the shortcode [yith_wcwl_wishlist]
• Then what you should do is go to the section “Appearance” > “Menus”.
• Create a new menu.
• Add the pages you want to view in it.

Here is a screenshot of how I have it configured on my test site.

https://we.tl/t-ZDnxSC0Vas

Have a nice day!

• This reply was modified 2 years, 10 months ago by Luciano Palmieri.

Thank you for your reply.

So I can’t create a heart icon in my header? Even if I use custom CSS?

Thank you.

Hello there,

Thanks for your reply, we hope you are doing well ??

If you want the link to redirect you to the wishlist to be a heart you could put the following as Navigation Label:

<i id="yith-wcwl-menu-icon-wishlist" class="fa fa-heart"></i>

Being configured as follows https://we.tl/t-XYe0Rrj9c1

Also, if you want it to have a special color, what you can do is insert the following CSS code in the section “Appearance” > “Customize” > “Additional CSS”:

#yith-wcwl-menu-icon-wishlist {
    color: red;
}

Keep in mind that although I used as an example red, you can choose any color and put both the established colors as red, blue, green, etc, or with hexadecimal or rgb nomenclature.

Have a nice day!

Thank you very very much! It worked!