[Support request] Woocommerce Product Gallery Layout

[huppap]

Hi I have gone through this link and applied this css after doing slight modifications to it and applied vertical gallery on desktop and horizontal on mobile.

https://generatepress.com/forums/topic/woo-single-product-thumbnail-gallery-with-carousel/#post-599314

it is working amazing for most part and I am glad to have come across it.

I am looking to improve this a bit further.

1. can you please help me add a border around the selected thumbnail in product gallery.
2. I see there is an issue with product image on firefox, (please select the 2nd image and it seems to be moving to right and text gets cut out). It works just fine on other browsers however.
3. Is it possible to show the scroll bar when user select any other image from the thumnails so they know they can also scroll through it?

Thank you.

/* VERSION 1 - Vertical Scrolling Thumbnails */

/* https://generatepress.com/forums/topic/woo-single-product-thumbnail-gallery-with-carousel/#post-599314 */

.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 5px 5px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .woocommerce-page div.product div.images {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-item-align: center;
        align-self: center;
    }
    .woocommerce div.product div.images .flex-control-thumbs {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 80px;
        flex: 1 0 80px;
        /* Adjust PX to suit width of thumbnails */
        max-height: 425px;
        /* Adjust Height to Image height on desktop */
        overflow: auto;
    }
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 100%;
        padding: 0 10px 10px 0;
    }
}

/* VERSION 2 - Horizontal Scrolling for mobile */

@media (max-width: 768px) {

.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 5px 5px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 25%;
    flex: 1 0 25%;
}

.woocommerce div.product div.images .flex-control-thumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
}
}

[Ying]

Hi there,

1. Try this CSS:

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
    border: 2px solid blue;
}

2. GP doesn’t have control over it, it’s using Woocommerce’s script, I would recommend reaching out to Woocommerce and reporting this issue.

3. I’m not seeing an easy way to do this unfortunately.

[Author]

Posts