In mobile product style show summary on hover has 3 actions

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

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

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

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,

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