Galería avanzada de Woocommerce

Con el siguiente código, en Divi podremos pasar de esto:

.flex-viewport {
    max-width: 80%;
    float: right;
}
        .flex-control-thumbs.active {
            cursor: grabbing;
            cursor: -webkit-grabbing;
        }
.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: 0%;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 65%;
    max-height: 300px;
    overflow-y: auto;
    align-items: flex-end;
    direction: rtl;
}
.pswp__bg {
    background: #00000059 !important;
}

.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
    width: 4px;
}

Y este código Script