Edit Roll-Over Image on Hover

Hi Guys,

I’d like to change the rollover image that’s displayed when mousing over the ‘Read More’ button (when Mouse Over option is selected) for products at the category level.

Currently the roll-over image is a shopping cart icon, I’d like to change it for another icon.

Can you help?

Hello,

Could you please specify which icon do you want to set there?

Regards

Hi – thanks for getting back to me. I’d like an icon that indicates ‘Read more’, maybe an arrow, or ellipses ‘…’ etc. The customer will need to go to the product page to read more about the variable product before adding to cart. I’m worried the cart icon looks like it’ll add the product to cart straight away.

Many thank.

ps. is there a list of icons that come with the theme?

You can choose from the Font Awesome icons list https://fontawesome.com/v4.7.0/icons/

Thanks for the link to the list – that’s really helpful.

This icon looks good: fa-mouse-pointer

How would I go about replacing the shopping cart icon with it?

Try to add the following code snippet to the Custom CSS area in Theme Settings.

.woodmart-hover-button .hover-mask > a:before, 
.woodmart-hover-info-alt .product-actions > a:before, 
.woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small) .woodmart-add-btn > a:before, 
.woodmart-hover-quick .woodmart-add-btn > a:before, 
.product-list-item .woodmart-add-btn > a:before, 
.woodmart-hover-standard .btn-add > a:before {
	content: "\f245";
	font-family: fontawesome;
}

Regards

Excellent. Thank you!

You are welcome!

[Author]

Posts