Resize the wishlist button

Hi,

I have managed to get a wish list as a round button (see bottom of picture. Hope I have done it correctly). I want 3 things:

– The round button (but I think it’s correct).
– Make the wish list button smaller. It is quite large in relation to the design.
– Maybe show it constantly instead of coming in from the right side when hoover is active.

Thanks again 🙂

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .woodmart-buttons > div a.add_to_wishlist {
	width:30px;
	height:30px;
}

Change the size as per your needs

Here is the code to show always on the grid:

body .woodmart-hover-standard .woodmart-buttons{
opacity:1;
}

Best Regards

Thank you, but unfortunately it does not work very well.

1 – The heart is too big and also checkmark. How can we change this size?
2 – If you add a product and checkmark comes on, does the circle resize to full size? Why?
3 – The icon is only shown halfway on the page and the drive is still worn. It is not constant.

I have updated it on the website so you can see it.

Thanks in advance.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .woodmart-buttons .yith-wcwl-add-to-wishlist a:before {
    font-size: 10px;
}
body  .woodmart-hover-standard .woodmart-buttons{
	right:30px;
}
body .woodmart-buttons > div a.woodmart-tltp {
	width:30px;
	height:30px;
}

Best Regards

Hmm… still problems… When hoover, the button stil swipe in from the right site? You can try online now. The checkmark is still in normal size too.

My complete code is:

body .product-grid-item .woodmart-buttons {
background-color: #f6f3f1;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1);
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
border-radius: 50%;
}

body .woodmart-buttons > div a.add_to_wishlist {
width:20px;
height:20px;
}

body .woodmart-hover-standard .woodmart-buttons{
opacity:1;
}

body .woodmart-buttons .yith-wcwl-add-to-wishlist a:before {
font-size: 10px;
}
body .woodmart-hover-standard .woodmart-buttons{
right:30px;
}
body .woodmart-buttons > div a.woodmart-tltp {
width:30px;
height:30px;
}

Hello,

Replace this code with this one:

body .woodmart-hover-standard .woodmart-buttons{
     opacity:1;
    -webkit-transform: none;
    transform: none;
}

Best Regards

Thanks! It works! but the checkmark is stille big. How can I change this?

Se picture.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .woodmart-buttons .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a:before {
    font-size: 10px;
}

Best Regards

Thanks! 🙂

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts