WooCommerce Thumbnails Display Issue

Support
#1

I actually thought this was a WooCommerce layout issue but they’ve explained that this is not their layout and it’s Pro doing this …

For some reason, WooCommerce products have the image thumbnails on top of the main image. Proper UX/UI is to have them below the image so a user can clearly identify that there are extra images. When the main image is dark and the thumbs are as well, you get the attached disaster. Could you guys look into moving thumbs on the single page layout to below the main image? Thanks.

#2

Hello @co50,

Thanks for writing in!

The thumbnails is from the WooCommerce product slider feature. If you disable the support for the Woocommerce Slider the images will look different and you’ll need to modify the sizes. If you remove theme support for the gallery slider, your single product page would then look like this:

And because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
function remove_woo_three_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-slider' );
}
// =============================================================================

We would loved to know if this has work for you. Thank you.

#3

Using your function does work in that it moves the thumbnails to the bottom but also disables all of the WooCommerce image viewer functionality. Is it possible to have both the thumbnails at the bottom but WooCommerce image viewing still works, like in the 2018 theme and most other custom themes?

#4

Hi There @co50

It’s Woocommerce standard, the image handling is different from the latest version of WooCommerce.

Could you please provide us with an example product URL to see the layout issue?

Thanks!

#5

This is the default look with Pro Theme:

Thumbnails are not placed on the image in the top right corner on any other theme that I tested with. I’ve confirmed with WooCommerce that they place them under the image and this modification is a Pro theme mod.

#6

Hi there,

Thanks for clarifying.

That is correct, it is a theme specific placement. However, you can override the CSS code that is placing the image on the top right part of the preview images. Please add this code in the Global CSS:


.single-product .flex-control-nav {
    position: relative;
}

.single-product .flex-control-nav.flex-control-thumbs img {
    height: auto;
}

.single-product .flex-control-nav.flex-control-thumbs {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

Here are some related links for further reading:

Hope this helps.

#7

Bingo. You nailed it Jade. A+

I hope you guys consider making this CSS config the default. It’s really odd to have the thumbnails on top of the image due to the issues that can occur as described in my original post.

#8

Hi @co50,

I will forward this to our web development team for review.

Have a nice day!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.