In mobile product style show summary on hover has 3 actions

Hello,

I am using the product style “Show summary on hover” in product archive and i guess this must be an issue as i have disabled / activated option “Open product on click on mobile” but still if you carefully scroll / touch the mobile screen the hover effect takes place wich is very annoying when you scroll the screen because it covers the next product.

Following this info in the settings – “If you disable this option, when user CLICK on the product on mobile devices, it will see its description text and add to cart button. The product page will be opened on second click.” I would belive that the hover effect should be disable and show up on the first click only and then on the second click redirect to single product, but now the hover effect show up on careful touch / scroll and first click do nothing and second click goes to single product.

Brgds
Rune

Hi,

Yes, mobile devices have some kind of hover event if you touch the product it will show the information. But you purposely click on it (tap) then you will be redirected to the product page. When the option is turned off, you will have to click twice. It is not possible to disable hover effect on mobile completely.

Regards

Well i did some test using custom css and was able to disable most of the hover effect in mobile but as i do not know the full css it was difficult to make it complete.

Maybe you have a css which can disable hover completely?

Brgds
Rune

Try to use the following CSS code for this

body .woodmart-hover-base.hover-ready.state-hover .content-product-imagin, 
body .woodmart-hover-base.hover-ready:hover .content-product-imagin,
body .fade-in-block,
body .woodmart-hover-base.state-hover .wrapp-swatches, 
body .woodmart-hover-base:hover .wrapp-swatches {
    display: none;
}
body .woodmart-hover-base.hover-ready.state-hover .product-wrapper, body .woodmart-hover-base.hover-ready:hover .product-wrapper {
        -webkit-transform: none;
    transform: none;
}

Thank you but the css also disable the first click effect so no content appeared. I figured out that i had to remove the css class “hover-ready” and as this class seems to be added using ajax i had to build a jquery that could handle the removal after ajax was finished.

jQuery(window).on('load', function($) {

    var mobile;

    if ( window.innerWidth !== undefined ) {
        mobile = window.innerWidth;
    } else {
        mobile = document.documentElement.clientWidth;
    }

    if ( mobile <= 1024 ) {

    jQuery(document).ajaxStop(function($){
        jQuery( '.product-grid-item' ).removeClass('hover-ready');
    });

    jQuery(".product-grid-item").live('click', function($){
    var ids = jQuery(this).attr('data-id');
    jQuery('.product-grid-item[data-id="' + ids + '"]').addClass('hover-ready');
    });

    jQuery(".load-more-loading").live('click', function($){
    count = 0;
    var timer = setInterval(function($) {
    jQuery( '.product-grid-item' ).removeClass('hover-ready');
    if ( count > 50 ) clearInterval(timer);
    count++;
    }, 100 );
    });

    }

});

This jquery did the trick and only issue is that sometimes ajax uses 1-2 sec to finish so on first visit hover function is not disabled immediately. But then on first click on a product hover is activated on that actual product immediately and also on pagination / load more products it works great as long as i am using the load more button.

You can check it with your phone in my test site and see the scrolling works a lot better without the continues hover effect hiding other products. http://arcticfritid.woo-builds.com/

Brgds
Rune

Thank you for posting your solution here.

Hello again,

Yes with a few fixes the js function now works perfect and i have had the site out with 6-7 users for testing and they like what they see BUT all of them reported the same issue wich also i have seen.

In archive pages (in mobile view) when you do the first click on a variable product and then click the add to cart icon it opens the selection on top in the same product grid. The problem all reported was that there was no add to cart button after they had selected variable. They did not understand that they had to scroll this little window. Also the color swatches was very hard to select, they had to click and click and often hit the wrong color.

Would it be possible to make this window bigger onclick, when it opens just hide the other content in produc grid and make the window higher?

Brgds
Rune

Maybe, in this case, you would better disable this function completely and use quick view or allow customers to purchase from the product page only. This window is a bit small but it covers the image area and can’t be increased.

Well, there is always a solution. I have added a little jquery that add a few css classes and opens the little window in full height of the hover box. Works very well and something like this should be added as standard.

To see how it now works on your phone just visit page 2 (load more products) of this page and test with the product “Røykeklosser fra Matrøyk” – http://arcticfritid.woo-builds.com/produktkategori/royking/roykespon/

Do you have any hook wich i can use to add a “View details” button just below the Add to cart button which appear after selection is made in the archive variable products hover base? I think that would be a great option if user there figure out to check single product and not add to cart.

Thanks

Brgds
Rune

Hello,

Could you please send us a screenshot and link where exactly do you want to add the button so we can check if there is any hook there?

Regards

Hello,

I have just found that it supports the standard woocommerce action hook so button is now in place together with the new variable product hover effect. See the attached image.

Brgds
Rune

Attachments:

You must be logged in to view attached files.

We are glad that you sorted it out.

[Author]

Posts