Hover Icons on Product Images

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.

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

You are great! Here:

Hello,

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

Best Regards

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

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

Sure.

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

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

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

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

* Rounded icons, and sizes.

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

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

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

Nothing is changed.

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

Sure:

Hello,

I have corrected the code.

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

Best Regards

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.

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

Thank you so much. Best support ever!

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!

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.

Hello,

Please provide the product page URL with the problem.

Best Regards

You can see it on all product pages:

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

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

Done! Thank you!

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts