Anyway to change the size of the QuickView mouse over area and perhaps delay the popup time?

I need to change the size of the area where the quick view will popup when the mouse hovers over a product on the category/sub-category pages.  

Most customers naturally hover over the item with their mouse, but still want to view the product image but the quick view pops up to fast. It can be frustrating to customers to have to move their mouse off an object to view the picture and even more so, when the mouse hovers over the item next to it and distracts them.

And is there a settings where I could delay the mouse over action?  Say when a customer hovers over the product thumb, it would popup the quick view 2 seconds later.

Hello Thomas,

I see you are using the Nop Allure Theme,

from your post i understand that you want to delay the effect which appears when you hover the mouse over an item box, which can be achieved with a simple css code added to your theme, from the theme's plugin. But if you want to delay the quick view pop up window which appears when you click on the "Quick View" button, i'm afraid that that would not be possible.

Please write us which effect do you want to achieve, and if it's the first we will provide you with the css code needed and instructions on how to add it to your theme.

Looking forward to your replay,

Nikola Dragiev
NopTemplatesTeam

I would like to do this. Thanks!

Hi again,

You have to go to tour nopCommerce administration, then Plugins > NopAllureTheme > Settings then in Custom Head Styles paste this code:

.product-grid .item-box .hover-details{
  -webkit-transition: all 2.00s ease-in-out;
  -moz-transition: all 2.00s ease-in-out;
  transition: all 2.00s ease-in-out;
}

Please note that the 2.00s in each line is the seconds delay you want to add, by changing this in all three lines you can customize the delay to reach the desired effect.

Hope I've been useful,

Nikola Dragiev
NopTemplatesTeam

That works fairly well.

Is there anyway to have it delay showing quickview, but once the mouse is moved off the item, disappear instantly/without delay?

Hover for 2 seconds with mouse > quickview displays > mouse moves off item > quickview instantly gone (as originally coded)


Edit:  when removing the mouse from the item, the "quickview" button disappears instantly, but the "add to cart" button slowly fades away.   Can this go away as quickly as the quickview?

Hello,

If you want the Add to Cart button to disappear instantly like the quick view add this code after the first one I send you:

.product-grid .item-box .hover-details .add-info{
  display: none;
}
.product-grid .item-box .hover-details:hover .add-info{
  display: block;
}

Hope this works fine for you,

Nikola Dragiev
NopTemplatesTeam

The above works but now the Short description and opaque white hover box slowly fade out.  They need to disappear right away like the others.

I basically want the quickview to act the exact way it is now, quick on and quick off, but when you hover over an item, I want it to count to 2 seconds before it instantly pops up. Then when your mouse is off the item, it instantly goes away.  Right now it is fading in and instantly leaving. I would prefer it NOT to fade on or off, just delay the appearance. Is that possible?

Sorry for the confusion. I didn't realize I needed to specify all the individual elements.

Hello,

To achieve the effect you want please replace the css code which you added in your Custom Head Styles with this code:

.product-grid .item-box:hover .hover-details {
        -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
    }

    .product-grid .item-box.immediate .hover-details {
         -webkit-transition: all 0 0 ease-in-out !important;
        -moz-transition: all 0 0 ease-in-out !important;
        transition: all 0 0 ease-in-out !important;
    }

and after that you need to go to your nopCommerce installation => Themes => Allure => Content => scripts => Allure.js. When you open the file paste this code on the bottom:

$(document).ready(function () {

    $(".item-grid .item-box").hover(function () {

        /* Mouse enter */
        setTimeout(function () {
            $(this).addClass("immediate");
        }, 2000);

    }, function () {

        /* Mouse leave */
        $(this)
          .removeClass("immediate");

    });
});

When you save it you can see that the desired effect appears when you hover on your item-box.

Hope this works for you,

Nikola Dragiev
NopTemplatesTeam