Hover Icons on Product Images

This topic has 28 replies, 2 voices, and was last updated 2 years, 7 months ago by Elise Noromit.

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

Author

Posts
May 29, 2022 at 2:02 pm #379625

tekeci
Participant

Hello. How can I edit quick view, compare and wishlist icons as screenshot? Is that possible? I really need that. They just need to look separate and round.

Attachments:
You must be logged in to view attached files.

May 29, 2022 at 7:59 pm #379681

Elise Noromit
Member

Hello,

Please provide the URL of the icons you want to show instead and provide the page URL where you want to replace the icons. We will provide custom CSS.

Best Regards

May 30, 2022 at 1:08 am #379730

tekeci
Participant

You are great! Here:

May 30, 2022 at 11:14 pm #380017

Elise Noromit
Member

Hello,

Please provide the image URL or link to the icon you want to add?

Best Regards

May 30, 2022 at 11:31 pm #380019

tekeci
Participant

All products in all pages. You can see on screenshot.

June 1, 2022 at 12:52 am #380306

Elise Noromit
Member

Hello,

Sorry for the delay.

I see which icons you want to replace, please upload the images which you want to show instead into the media library and provide the links so that I could provide custom CSS.

Best Regards

June 1, 2022 at 1:12 pm #380439

tekeci
Participant

Sure.

June 2, 2022 at 12:48 am #380640

Elise Noromit
Member

Hello,

I am checking the page and I see the same icons are already displayed: https://gyazo.com/8b5ef7f9e1a55513a583e3fdee3d4cd3

Your product grid does not have compare button. Please check if you have enabled the same in the Theme Settings > Shop > Compare.

Best Regards

June 2, 2022 at 2:49 am #380662

tekeci
Participant

I guess you got me wrong…. It isn’t my website. I want these icons be on my website. (Woodmart Theme)

June 3, 2022 at 4:25 am #380945
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
.wd-compare-icon > a:before {
    color:transparent;
}
.wd-compare-icon {
    background-image:url(https://moirre.com/wp-content/uploads/2022/06/compare.svg);
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 50% 50%;
}
.wd-quick-view-icon>a:before {
    color:transparent;
}
.wd-quick-view-icon{
    background-image:url(https://moirre.com/wp-content/uploads/2022/06/quickview.svg);
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 50% 50%;
}
.wd-wishlist-icon>a:before {
   color:transparent;
}
.wd-wishlist-icon {
    background-image:url(https://moirre.com/wp-content/uploads/2022/06/wishlist.svg);
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 50% 50%;
}
```
Best Regards
June 3, 2022 at 1:57 pm #381044

tekeci
Participant

Sorry but i didn’t mean that. I could do that as well. I need same as example.

* Rounded icons, and sizes.

June 4, 2022 at 4:11 am #381139
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
.product-grid-item .wd-action-btn {
margin-bottom:20px;
background-color:white;
border-radius:50%;
}
.product-grid-item .wd-buttons {
background-color:transparent;
}
```
Best Regards
June 4, 2022 at 11:12 am #381177

tekeci
Participant

Thank you so much! And How can I reduce the size of the icons to 1em? they look so big

June 4, 2022 at 11:23 pm #381230
Elise Noromit
Member
Hello,

Please find this code:
```
.wd-compare-icon > a:before {
    color:transparent;
}
```
Then replace with this one:
```
.wd-compare-icon > a:before {
    color:transparent;
    max-width:30px;
    max-height:30px;
}
```
And finally set the width and height as per your needs.

Best Regards
June 5, 2022 at 12:45 am #381238

tekeci
Participant

Nothing is changed.

June 5, 2022 at 1:54 am #381250

Elise Noromit
Member

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

June 5, 2022 at 2:23 pm #381279

tekeci
Participant

Sure:

June 7, 2022 at 2:37 pm #381667

Elise Noromit
Member

Hello,

I have corrected the code.

Please check now. You need to edit the width and height in line #116,117,128

Best Regards

June 8, 2022 at 12:56 am #381772

tekeci
Participant

Thank you but

1) icons look so far each other. Can you get them closer as example?
2) And how can I give margin-top value? Because “compare” icon looks so close to up side.
3) And I need to remove border-bottom and border-right. You must have added it because it wasn’t visible before.

June 9, 2022 at 3:20 am #382032
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
.product-grid-item .wd-buttons {
     box-shadow: none; 
}
body .product-grid-item .wd-action-btn {
    margin-bottom: 5px;
}
```
Best Regards
June 9, 2022 at 5:40 pm #382264

tekeci
Participant

Thank you so much. Best support ever!

June 10, 2022 at 2:03 am #382313

Elise Noromit
Member

We are always happy to help you, write to us when you have any difficulties or issues with our theme.

We would be grateful for your rate and feedback on http://themeforest.net/downloads in case you are satisfied with our theme and customer service

Thank you in advance!

Wish you a wonderful day!

June 21, 2022 at 8:15 pm #385137

tekeci
Participant

Hello again. I added codes what you write to me but there is little problem. When I enter the single product page. I see the icons we added behind the posts. How can I delete this icon?

Attachments:
You must be logged in to view attached files.

June 22, 2022 at 4:00 am #385182

Elise Noromit
Member

Hello,

Please provide the product page URL with the problem.

Best Regards

June 22, 2022 at 12:47 pm #385275

tekeci
Participant

You can see it on all product pages:

June 22, 2022 at 2:51 pm #385354
Elise Noromit
Member
Hello,

Please replace the code with this one:
```
.product-grid-item  .wd-compare-icon > a:before {
    color:transparent;
}
.product-grid-item .wd-compare-icon {
    background-image:url(https://moirre.com/wp-content/uploads/2022/06/compare.svg);
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 50% 50%;
}
.product-grid-item .wd-quick-view-icon>a:before {
    color:transparent;
}
.product-grid-item .wd-quick-view-icon{
    background-image:url(https://moirre.com/wp-content/uploads/2022/06/quickview.svg);
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 50% 50%;
}
.product-grid-item .wd-wishlist-icon>a:before {
   color:transparent;
}
.product-grid-item .wd-wishlist-icon {
    background-image:url(https://moirre.com/wp-content/uploads/2022/06/wishlist.svg);
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 50% 50%;
}
```
Best Regards
June 22, 2022 at 2:51 pm #385355
Elise Noromit
Member
Hello,

Please replace the code with this one:
```
.product-grid-item  .wd-compare-icon > a:before {
    color:transparent;
}
.product-grid-item .wd-compare-icon {
    background-image:url(https://moirre.com/wp-content/uploads/2022/06/compare.svg);
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 50% 50%;
}
.product-grid-item .wd-quick-view-icon>a:before {
    color:transparent;
}
.product-grid-item .wd-quick-view-icon{
    background-image:url(https://moirre.com/wp-content/uploads/2022/06/quickview.svg);
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 50% 50%;
}
.product-grid-item .wd-wishlist-icon>a:before {
   color:transparent;
}
.product-grid-item .wd-wishlist-icon {
    background-image:url(https://moirre.com/wp-content/uploads/2022/06/wishlist.svg);
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 50% 50%;
}
```
Best Regards
June 22, 2022 at 3:46 pm #385392

tekeci
Participant

Done! Thank you!

June 23, 2022 at 2:00 pm #385664

Elise Noromit
Member

You are welcome! We are here to help.

Wish you a wonderful day!
Author

Posts