Return to previous page

Scroll to image on select variation for mobile

This topic has 2 replies, 2 voices, and was last updated 2 months, 2 weeks ago ago by Luca Rossi

  • Avatar: Chirag Modi
    Chirag Modi
    Participant
    December 20, 2024 at 12:25

    hello
    When a user selects or changes a product variation on a mobile device, the image section is often located in the second fold of the page. This requires the user to manually scroll up to view the updated image.

    We’d like to implement a feature that automatically scrolls the page up to the product image section whenever a variation is selected or changed. This would provide a smoother and more intuitive user experience.

    Regards
    Chirag Modi

    #428186 Copied Theme version: 9.4.6
    1 Answer
    Avatar: Justin
    Luca Rossi
    Support staff
    December 21, 2024 at 15:36

    Hi @Chirag Modi,

    Please add the following code under functions.php file locates in your child theme:

    
add_action('wp_footer', 'n2t_wp_footer', 999);
function n2t_wp_footer(){
	?>
    <script>
        jQuery( function($){
            $(document).ready(function(){
                $( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
                    if( $(window).width() < 600 ){
                        $("html, body").animate({ scrollTop: 0 }, "slow");
                    }
                } );
            })
        });
    </script>
	<?php
}

    Hope it helps!

    #428288 Copied
  • Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Royal – WooCommerce WordPress Theme
lazy-placeholder
Designers – WordPress WooCommerce Theme
lazy-placeholder
Church – WordPress Theme
lazy-placeholder
Handtools Store – WooCommerce Theme
lazy-placeholder
Interior Store – WooCommerce Theme
lazy-placeholder
Shoes Store – WooCommerce Theme
lazy-placeholder
Ecoenergy – WordPress WooCommerce Theme
lazy-placeholder
Organic Store – WordPress WooCommerce Theme
lazy-placeholder
Jewelry Store – WordPress WooCommerce Theme
lazy-placeholder
Home Decor Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.