WooCommerce: Display Product Gallery Vertically (Single Product Page)

  Paste this code in function.php

add_filter ( 'woocommerce_product_thumbnails_columns', 'change_product_gallery_columns' );

 

function change_product_gallery_columns() {

     return 1; 

}

Paste css in style.css

/* Make image 75% width to make room to its right */

.single-product div.product .woocommerce-product-gallery .flex-viewport {

    width: 75%;

    float: right;

}

/* Make Gallery 25% width and place it beside the image */

 

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {

    width: 25%;

    float: right;

    margin: 0;

}

/* 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%;

}