[Resolved] WooCommerce Product Thumbnails

[Ian]

Hi
I moved from the restricting Storefront theme over to GeneratePress Premium.
On the single product page I want to move the Product thumbnails from under the product image to the left of it.
To do this I need to configure the thumbnails in a single column, move the main image to create space, display the thumbnails in a single column left of image.

I thought I had it fixed using
In functions.php (child theme)

/* Change Product Thumbnails to side columns */
add_filter ( ‘woocommerce_product_thumbnails_columns’, ‘imr_single_gallery_columns’ );

function imr_single_gallery_columns() {
return 1;
}

AND

In CSS Child theme

* Single Image Gallery Move Thumbnails */

/* Make image 75% width to make room to its right */

.single-product div.product .woocommerce-product-gallery .flex-viewport {
width: 80%;
float: right;
}

/* Make Gallery 25% width and place it beside the image */

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
width: 20%;
float: left;
}

/* Style each Thumbnail with width and margins */

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
width: 90%;
float: none;
margin: 0 0 10% 10%;
}

/* Move the zoom tool to the left side to accommodate the gallery thumbs (otherwise it covers the first thumbnail */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
right: .875em !important;
}

I had this working in Storefront before but I think it maybe something to do with the grid system that is stopping me with Generate Press.

Are you able to shed any light on the issue please.

Thanks
Ian

[Tom]

Hi there,

Any chance you can link me to an example of what it should look like?

[Ian]

Hi Tom

Sure along the lines of this:
https://businessbloomer.com/woocommerce-display-product-gallery-vertically-single-product/

Except those thumbnails are right instead of left of mail image of course and also a little larger than I want. they are all in one column though unlike mine.

His code is what I adapted but it doesn’t quite work

Thanks
Ian

[Tom]

Try adding this CSS:

.woocommerce div.product div.images .flex-control-thumbs li {
    float: none;
    width: 50px;
}

[Ian]

Hi Tom
Fantastic that worked. I used width:95% instead for a bit of mobile flexibility. Thanks so much.
Best
Ian

[Tom]

Glad I could help! 🙂

[Author]

Posts