Move product gallery under product image and make them bigger

[philippe_bonneau]

I have the same problem of this closed topic Move product gallery under product image

I would like to have the little gallery preview image under the main image. Here is a product page https://dev.bruleriedukamouraska.com/product/costa-rica-tarrazu/

I would like to control the size of the preview image.

[jade]

Hello Philippe,

This is possible by adding some custom CSS. To help you get started, please add this code in X > Theme Options > CSS:

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

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

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[philippe_bonneau]

The thumbnails are bigger thanks.

But they still are over the main image and not under.

[jade]

Hi Philippe,

I have just check your site and it looks like you didn’t place the code correct because I can’t see this block of code added:

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

Kindly make sure you properly placed the code in the global css. It is also possible that you have some CSS errors in your codes that is why the code is not taking effect. To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

Hope this helps.

[philippe_bonneau]

Sorry. My mistake… Fixed. Thank you @jade

[jade]

You’re most welcome, Philippe.