put variation images below the thumbnail directly in mobile

Hi, now in mobile modes, the variation images doesn’t display below the thumbnail like in this website here https://www.dropbox.com/s/eewgofeg9msyuiz/Screenshot_20191013_184717.jpg?dl=0 . This website position the variation images below the thumbnail directly. This is vary good for the customer’s view. They can see the images changed immediately when they click on the variation images, no need to scroll up to see. This also helps new customers to get used to this type of thing quickly. Now the truth is When new customers click on the variation images, they may thought nothing happens and confused until they scroll up to see the images changed.

Now the variation images stays below product prices, product titles, etc. This separate the images in small view and it invisible until scrolling up as you can see here https://www.dropbox.com/s/1lut2bfmuorfrvb/sc11.jpg?dl=0

Is it possible to position the variation images below the thumbnails like that website. And make the thumbnail smaller in mobile view as well.

Hello,

As you want to display the variation images below the thumbnails and make the thumbnail smaller in mobile view. I got your point that the user might be confused if he did not scroll up. But this is the WooCommerce layout and our theme did not influence this.

This requires customization and this is beyond our limitations and support policy.
But you can decrease the height of product thumbnail in mobile devices so the user easily able to see the image when the image is changed after clicking the specific variation. To do this you can use the below CSS code in Theme Settings >> Custom CSS >> Custom CSS for mobile:

.single-product-page .product-images img {
    width: 100%;
    height: 100px;
}

Best Regards.

[Author]

Posts