[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

GeneratePress 2.1.4

GP Premium 1.7.3

[Tom]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts