[Resolved] Woo Single Product Thumbnail Gallery with carousel

[Jose]

Hi David, as suggested here’s a new ticket following our conversation (June 12, 2018 at 2:22 pm #598575 from the old thread started on April 14, 2017 at 3:54 am #305812).

Firstly, just a big thank you for the prompt response, followed by my request:

Having the ability to change the thumbnail gallery on Single Product Page Layout via CSS, I wonder if the thumbnails can be wrapped in a carousel with set % of width or height with respect to the Main Product Image, while the carousel is placed to the left (vertical) or bottom (horizontal).

Currently, the code available on the old support thread is making the thumbnail images overlap on the subsequent section, as it has no limit on the number of images displayed, i.e. a carousel will do the job.

Note: if any extra coding (i.e. PHP, etc) is needed, please address and I’ll implement it.

Many thanks in advance for your support.

[David]

Hi Rafik,

you can try this more up to version of the code, it falls to default version on Mobile:

/* VERSION 1 - Vertical Scrolling Thumbnails */

.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: 420px) {
    .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 Thumbnails */

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

Getting the height of the Thumbnail column to match the gallery image is tricky, yet to find a CSS way to do it, would probably need JS. Hence the comments above to set the max height of them to suit.

EDIT: Added 2 versions – vertical and horizontal thumbnails.

[Jose]

Wow! David, we’re getting there! Works well, just a bit of fine-tuning might do the trick…

Two things:
1.- I tried “inline-block” to make it horizontal + “row”, but the scroll bar doesn’t show when horizontal, is like a box that contains the thumbnails and shrinks as I add more images. May you issue a code for horizontal under the main image, please?
2.- Would you help me styling the scroll bar, for instance just leave the arrows while the scroll bar goes transparent/translucent or something nicer.

You’ve done a great job with the piece of CSS. May I kindly ask you for a reference site(s) where all the properties related to “flex-control” / “flex-viewport” are explained?

[David]

Hi, i have edited the code above to include both a vertical and horizontal version. I have also added prefixes for cross browser support.

The scrollbar styles default to the browser stying. This article and related codepen are good sources for styling them. Note this isnt supported by all browsers so tread carefully:

https://scotch.io/tutorials/customize-the-browsers-scrollbar-with-css

Flex-control / Flex-viewport are just the CSS Selector names that were applied to those elements by the developer. The CSS for this example is flexbox which here is one of many good resources:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Jose]

Awesome David, works like charm and is now a matter of learning and tweaking with the links you provided.

Really appreciated your support, have a good one!

[David]

Glad to be of help.

[Daniele]

Hi guys,
sorry for reopening this old thread.

I wanted to know if it is possibile to remove image links after this CSS is applied.

I’m trying this snippet of code:

add_filter('woocommerce_single_product_image_thumbnail_html','wc_remove_link_on_thumbnails' );
 
function wc_remove_link_on_thumbnails( $html ) {
     return strip_tags( $html,'<img>' );
}

but I get this result: https://imgur.com/a/3DxT94L

[Leo]

Any chance you can open a new topic for your question?

Thanks 🙂

[Author]

Posts