Change position of Wishlist icon on shop loop

Same quistion from my side, it would be great is this is possible with the plugin.

Hi, I could make it with CSS. To work on every device responsive.

Hi @shenalorlof,

Thanks for the suggestion. This is as far as I was able to get:

.tinv-wishlist.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button::before {    font-size: 1.5em;
	  width: 60%;
	border-radius: 50px;
	background: #c9caba
}

Are you able to share your CSS code? I am not really capable of creating my own CSS codes and I also would like to move the icon to the right top of the product-picture.

Thanks in advance.

Apply this to each media query and change the values as you need.

ul.wpbf-grid li.wpbf-post .tinv-wraper{
    position: relative;
    top: -265px;
    left: -98px;
    z-index: 11;
    margin-bottom: -40px;
}
ul.wpbf-grid li.wpbf-post a.tinvwl_add_to_wishlist_button{
    font-size: 16px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    padding: 0px 0px 0px 4px;
}
ul.wpbf-grid li.wpbf-post a.tinvwl_add_to_wishlist_button:hover{
    background: #D2B150;
    color:#000 !important;
}

Regards

Thanks a lot @shenalorlof

I have added the code to my Astra theme customizer, but I was unable to see changes. So I guess I’ll have to keep my current CSS.

Maybe the plugin developpers are able to make a setting for our request, so more people can enjoy it in the future.

Hello @victor307,

This is the result i have got https://ibb.co/hMmmtCr, u can share ur site url so i can check how i can help if you want. You can use this https://www.temporary-url.com/ to make temp URLS

Thank you and Best Regards

Hello @shenalorlof,

Thanks a lot, I appreciate your help.

This would be the url: https://www.temporary-url.com/C70C
That is a great way to temporary share an URL by the way.

So if possible, I would like to be able to change the position from the left-top corner to the right-top corner or for example the right-below corner.

Best regards, victor307

Hi, change this class of u the below. it will take ur wishlist icon to right top

.tinv-wraper.tinv-wishlist.tinvwl-above_thumb-add-to-cart {
position: absolute;
z-index: 10;
margin: 0;
top: 10px;
left: 80%; // this is what u have to replace
}
Best Regards

• This reply was modified 3 years ago by shenalorlof.

That is working! Great! Thanks @shenalorlof

Would it be possible to keep my old CSS code as well?

That will give me the possibility to keep a circle around the heart-icon and change it’s color.

Best Regards

oh you replace the code? all u had is just to replace the code in this class
.tinv-wraper.tinv-wishlist.tinvwl-above_thumb-add-to-cart {
}

if u have no idea send me your all of the css code using for this purpose. ill change and send you

• This reply was modified 3 years ago by shenalorlof.

@shenalorlof

At the moment I have my CSS code:

.tinv-wishlist.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button::before {    font-size: 1.5em;
	  width: 60%;
	border-radius: 50px;
	background: #c9caba
}

And I have added your CSS code as well:

.tinv-wraper.tinv-wishlist.tinvwl-above_thumb-add-to-cart {
position: absolute;
z-index: 10;
margin: 0;
top: 10px;
left: 80%;
}

But on smaller screens (https://ibb.co/zZYpjmw) the button does not always stay at the right place. Thanks again

1. And I have added your CSS code as well:
Add both of the codes
2.But on smaller screens (https://ibb.co/zZYpjmw) the button does not always stay at the right place.
That’s why you have to add on separate media queries. for mobile, tablet and Desktop

For the moment I will keep the icon on the left of the thumbnail, but I will learn how to add separate media queries and how to read and write CSS. Thanks for all your great help I very much appreciate it.

Hi everybody,
i need help customizing the popup when users adds it to their wishlist I started a thread but had no answer for two days. I figured out my post is not published yet. So in my site loneto.org when user clicks on the shop icon a beatiful popup comes up. I customized it with css but i had tha image and the title and the rest of data there i only added Css. So how can i show the added-to-wishlist image, Title, and product attribute called author there? I really need all the help you can give me after all this is what forums are for.

Thanks in advance

• This reply was modified 3 years ago by nitof.

Hello everybody

I have the same problem, but in may theme >(WOOSTIFY), the icon apperars on top rigth.

I want to change to bottom rigth, because on mobile device the icon covers part of the picture and looks bad.

@shenalorlof I don’t undestand anything of CCS code.

May you help me please. I see that you are very good ??

My site isn′t finished, and is on maintenance by now. If you want, I may put it visible to you see.

I posted this issue to the support, but no one answer me.

Thank you very much my friend.