X Theme: How to move product thumnails underneath product in conjunction with the hover image

[smokingjacket]

Hello,

On my X Theme Woocommerce website I would like to get the thumbnails of the product to be underneath the main product image rather than on top of it as it currently is.

The following code allows me to do that:

add_action( ‘after_setup_theme’, ‘remove_woo_features’, 999 );
function remove_woo_features(){
remove_theme_support( ‘wc-product-gallery-slider’ );
}

However this code means that when you click on one of the thumbnails it opens the photo up as a file rather than changing the ‘woocommerce-product-gallery__image flex-active-slide’ which is the ‘active’ current photograph.

Does anyone know how to do this?

Thanks very much.

[friech]

Hi Chiara,

Thank you for writing in, in that case, you need to remove that code to your child theme’s functions.php file because that removes the product-gallery-slider feature.

Try this custom CSS instead, you can add this to Theme Options > 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;
}

Cheers!

[smokingjacket]

Dear @friech,

Your solution worked perfectly, thank you so much!

[friech]

You’re more than welcome, glad we could help.

Cheers!