Close

Disable Hover Effect on Product Item Box Image?

shabbyllity
9 years ago
#9118 Quote
Avatar
  • 3
Referring to the circle that pops up over the image when hovering over a product box.
How can this be disabled?
I couldn't find it in the Theme Settings nor in one of the plugins...

Thanks for your help!
Stefan
9 years ago
#9128 Quote
Avatar
  • 157
Hi shabbyllity,

Unfortunately there is no such setting but you can hide the circle that is shown upon hover very easily. Just add the following code to your admin -> plugins -> nop artfactory theme -> settings -> custom head styles textbox

@media (min-width: 1001px){
  .product-grid .item-box:hover .description-wrapper {
    opacity: 0;
  }
}

You just need to have in mind that you will hide also the quick view button that show a popup with information about the product.

If you want to preserve the quick view button and just hide the circle with the short description, please let us know and we can think of a way to have the quick view button present.

Hope that helps!
Best Regards,

Stefan Hristov
Nop-Templates.com
shabbyllity
9 years ago
#9131 Quote
Avatar
  • 3
Wow thank you for your fast reply!
The solution is almost perfect... Unfortunately I can no more click on the image to open the products page. Well, in the corners the image is clickable, also in the middle where the discription is, but not around the middle, there where the red circle was.
Is there a possiblity to completely remove these circles?
That would be brilliant!

(that the zoom button is also gone is no problem, I've disabled it anyway... ;) )

Thanks in advance!
Stefan
9 years ago
#9132 Quote
Avatar
  • 157
shabbyllity wrote:
Wow thank you for your fast reply!
The solution is almost perfect... Unfortunately I can no more click on the image to open the products page. Well, in the corners the image is clickable, also in the middle where the discription is, but not around the middle, there where the red circle was.
Is there a possiblity to completely remove these circles?
That would be brilliant!

(that the zoom button is also gone is no problem, I've disabled it anyway... ;) )

Thanks in advance!


Hi again,

Sorry for the late reply!

Having in mind that you will disable the quick view button, you can just change the code that I wrote in my previous post to this one:

@media (min-width: 1001px){
  .product-grid .item-box:hover .description-wrapper {
   display:none;
  }
}

So this will hide the description with the circle and the whole product picture will be clickable.

Hope that helps!
Best Regards,

Stefan Hristov
Nop-Templates.com
shabbyllity
9 years ago
#9134 Quote
Avatar
  • 3
Awesome! This completely solved my problem!
I really appreciate your support!