Product Images on Mobile

Hi,

Showing huge thumbnails on mobile (under the main product image) takes too much space, and hides some very import information (like product price, “Add to Cart” button etc.). showing price & “Add to Cart” below the fold is not a good practice.

How can I switch the huge thumbnails with owl-nav (small dots)? This is a common practice, and when combined with the main image arrows, users will know that there are more images they can scroll through.

Thank you

Hello,

Please, provide us a screenshot of this problem for better understanding. You can change the view for product thumbnails in Theme Settings -> Product page -> Images.

Kind Regards

Hi,

Please see attached 3 screenshots.

When I enable the thumbnails it just takes too much space. When I disable the thumbnails, users don’t know there are additional images (the “OWL Dots” are missing).

To fix this issue, I just need to know how to show the “OWL Dots” when I disable thumbnails. Just like the related products shows the “OWL Dots”. I would like it to show on desktop & mobile. This way users will know that there are additional images to scroll through.

Thank you

Attachments:

You must be logged in to view attached files.

There is no such option in our theme settings. You can do this manually customizing the file wp-content/themes/woodmart/js/functions.js and then disable JS combine and minify options in Theme Settings -> Performance.
Change the line

dots: false,

to

dots: true,

as shown on the screenshot http://prntscr.com/ptba3g

And put the following code to the custom CSS section too

.woocommerce-product-gallery__wrapper .owl-dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}

Hi Artem,

Thank you for your help. I was able to do it, but I needed to also add the following CSS in order to hide the thumbnails:

.woocommerce-product-gallery .thumbnails {
display: none;
}

I now have two issues now:

1. How can I show the dots under the main image (like in my screenshot)? When it shows inside it covers part of the image.

2. I can’t give up on JS optimization. Why I can’t do this change to the function.min.js file, and continue to use the JS combine and minify?

Thank you

1. Try to remove the custom CSS and check.

2. You can find that part in the minified version and use this too.

[Author]

Posts