Display Product Gallery Vertically On Single Product Page

Here’s a way to align the “Product Gallery” thumbnails to the right of the most Single Product Page image, irrespective of the device.

First, we will make sure Product Gallery has one image per row if we would like to show it vertically. To do so add this following Snippet to Functions.php

add_filter ( 'woocommerce_product_thumbnails_columns', 'codeithub_change_gallery_columns' );
 
function codeithub_change_gallery_columns() {
     return 1; 
}

Second, we need to “move” the Gallery beside the image. this is often pretty basic CSS you’ll place in your Child theme’s stylesheet.

.single-product div.product .woocommerce-product-gallery .flex-viewport {
    width: 75%;
    float: left;
}
 

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
    width: 25%;
    float: left;
}
 

 
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 90%;
    float: none;
    margin: 0 0 10% 10%;
}

Before:

See also  Move Email Field to Top on Checkout Page
Single Product Page

After:

Vertically Aligned Gallery

Leave a Reply

Your email address will not be published. Required fields are marked *