Scroll to top after product variation selection

Hi,

Thank you for reaching out to us.

Yes, you may add this code to the JS file in your theme or in custom script:

jQuery(document).ready(function ($) {
    jQuery('.single-product form.variations_form.vi_wpvs_variation_form').on('show_variation', function (event, v) {
        if (jQuery(window).width() <= 600 && v && v.hasOwnProperty('image_id') && jQuery(this).attr('current-image') != v.image_id) {
            window.scrollTo({top: parseInt(jQuery('.woocommerce-product-gallery').offset().top), behavior: 'smooth'});
        }

    });
});

Best regards.

@angelagrey Code not working! this is my website url can you check?

https://www.edcbrass.com/product/retro-brass-incense-burner-twelve-zodiac-signs-incense-holder-sandalwood-cense-censer-holder-zodiac-stuff-buddhism-ornament-miniature-vintage-antique-craft-edc-collectible/

• This reply was modified 1 year, 8 months ago by Sapthaka Ranga.

Please try again with this code

jQuery(document).ready(function ($) {
    jQuery('.single-product form.variations_form.vi_wpvs_variation_form').on('show_variation', function (event, v) {
        if (jQuery(window).width() <= 600 ) {
            window.scrollTo({top: parseInt(jQuery('.woocommerce-product-gallery').offset().top), behavior: 'smooth'});
        }

    });
});

@angelagrey Unfortunately not working.

We’ve tested, the code runs on your site. But the issue is because it was added before WooCommerce code, so it runs before WooCommerce JS can run. Please add the code again but this time after WooCommerce code. I recommend adding this code to your theme JS file.

@angelagrey both code working correctly. which one is the best?

@angelagrey how can i edit this for tablet display?

Please use the latest code. For tablet screen, you may adjust this value: https://prnt.sc/iXZWaEkZ-2SV

It’s the screen size, unit: pixel. You may adjust it to the tablet screen size, like 700…

@angelagrey Thank you so much for your great help ?