Docs

[mwyanniello]

I know this might be out of the scope of your support, but any help would be great.

When a customer selects a product color variation the woocommerce main image changes to that color option. However when viewing on a mobile device they dont know because it changes but not visible on the smaller screen. Is there a custom JS you could provide me that when they select the color variation it also jumps to the top of the page?

URL: http://59e.88a.myftpupload.com/

Any help would be greatly appreciated, love your theme!

[Rupok]

Hi there,

I have checked and I can see it changes on mobile as well. I have tested this product – http://59e.88a.myftpupload.com/product/1-piece-clip-in-human-hair-extension-straight-18-inch/

However then i have tested this one (http://59e.88a.myftpupload.com/product/2-piece-clip-in-synthetic-hair-extension-volume-set-straight-8-and-12-inch/) and it doesn’t seems change on desktop either. So you might need to set the images properly for some products. What I can assure that the functionality is same on mobile for your site.

Cheers!

[mwyanniello]

Both products are set up correctly, and it does change on that second product however you need to select a length first. I think you were missing my question though so let me try again.

I know the functionality is the same for the woocommerce main image when a variation is selected for mobile and computer. But my problem and my original question is when a customer selects a color variation (on the product below) on a mobile device, is there any custom JS i can apply to it so that the screen or page scrolls to the top of the page so the customer sees the bigger version (woocommerce main image) of that variation?

http://59e.88a.myftpupload.com/product/1-piece-clip-in-human-hair-extension-straight-18-inch/

[mwyanniello]

Because the screen is smaller on a mobile device it stacks the information so when they select a color variation the product image is no longer visible so they customer doesnt know it has been changed. Which is why I’m asking is there any JS i can add to make is scroll to the top of the page to where it is visible, but only on mobile devices.

[Rad]

Hi there,

Please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function( $ ) { 

$('#pa_color-options').on('change', function(){

if ( $(window).width() <= 767  ) {
$('html, body').stop().animate( { scrollTop :0 }, 500 );
}

});

} );

Hope this helps.

[mwyanniello]

I know that was probably out side the scope of your support, but you have went above and beyond again. Thank you so much that worked perfectly!

[mwyanniello]

This reply has been marked as private.

[Rad]

Hi there,

Might be possible, and that IP originates from Brazil.

host189.89.125-52.dh-c.net.br

Yes, please don’t use common username or password.

Thanks!

[Author]

Posts