Woocommerce产品页缩略图在左边并支持滚动代码

实现Woocommerce产品页缩略图在左边或右边，修改css即可实现，同时也可以把缩略图框定在一定的高度或长度内，不使用js即可轻松实现滚动效果。

Woocommerce产品页缩略图在左边并支持滚动代码如下

竖向代码没滚动条

.woocommerce-product-gallery {
    display: flex;
}

.woocommerce-product-gallery .flex-control-thumbs {
    order: -10;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100%;
    padding-top: 0;
    padding-bottom: 5px;
}

竖向代码带滚动条

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

横向代码

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

竖向代码在手机端恢复为默认状态，毕竟手机端正常是不需要实现把缩略图竖向摆放，再在手机端定义以下css，即可把缩略图缩小成一小块，与常规手机端模式一致。

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 10px;
}
    .product ol.flex-control-nav.flex-control-thumbs {
    justify-content: center;
    display: flex;
}

样式大小这些可以自己修改一下就可以，默认滚动条是浏览器默认滚动条，支持所有浏览器。

添加css去掉滚动条，整体更加美观

.woocommerce ::-webkit-scrollbar{
    display:none;
}

以上代码火狐浏览器不能去掉滚动条，需要添加以下css

.flex-control-thumbs {
    scrollbar-width: none;
}