Resize the wishlist button

This topic has 9 replies, 2 voices, and was last updated 5 years, 4 months ago by Elise Noromit.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
May 11, 2019 at 9:07 am #123188

Rune J
Participant

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.

May 11, 2019 at 8:15 pm #123274
Elise Noromit
Member
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
May 12, 2019 at 3:39 pm #123360

Rune J
Participant

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.

May 13, 2019 at 6:58 am #123432
Elise Noromit
Member
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
May 13, 2019 at 7:42 am #123441

Rune J
Participant

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;
}

May 13, 2019 at 12:03 pm #123521
Elise Noromit
Member
Hello,

Replace this code with this one:
```
body .woodmart-hover-standard .woodmart-buttons{
     opacity:1;
    -webkit-transform: none;
    transform: none;
}
```
Best Regards
May 13, 2019 at 12:35 pm #123524

Rune J
Participant

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.

May 14, 2019 at 6:16 am #123636
Elise Noromit
Member
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
May 14, 2019 at 7:44 am #123651

Rune J
Participant

Thanks! 🙂

May 14, 2019 at 8:19 am #123659

Elise Noromit
Member

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

Best Regards
Author

Posts