WooCommerce: Display Product Gallery Vertically (Single Product Page)

Today’s challenge has been on the top of my to-write list for a while. And thanks to one of Business Bloomer’s subscribers, I finally decided to post a quick tutorial. Here’s how to align the “Product Gallery” thumbnails to the side of the main Single Product Page image, no matter the device.

PHP Snippet (Part 1 of 2): Change the Number of WooCommerce Product Gallery Columns

First, we need to make sure our Product Gallery has 1 image per row if we want to display it vertically (the default is 3 if I’m not wrong).

/**
 * @snippet       Change Gallery Columns @ Single Product Page
 * @how-to        Get tutoraspire.com FREE
 * @sourcecode    https://tutoraspire.com/?p=20518
 * @author        Tutor Aspire
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://www.tutoraspire.com
 */

add_filter ( 'woocommerce_product_thumbnails_columns', 'tutoraspire_change_gallery_columns' );

function tutoraspire_change_gallery_columns() {
     return 1; 
}

For Storefront theme:

/**
 * @snippet       CSS to Move Gallery Columns @ Single Product Page
 * @sourcecode    https://tutoraspire.com/?p=20518
 * @author        Tutor Aspire
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://www.tutoraspire.com
 */

add_filter ( 'storefront_product_thumbnail_columns', 'tutoraspire_change_gallery_columns_storefront' );

function tutoraspire_change_gallery_columns_storefront() {
     return 1; 
}

CSS Snippet (Part 2 of 2): Edit the WooCommerce Product Gallery CSS

Second, we need to “move” the Product Gallery beside the image. This is pretty basic CSS you can place in your child theme’s stylesheet.

For Storefront theme:

/**
 * @snippet       CSS to Move Gallery Columns @ Single Product Page
 * @sourcecode    https://tutoraspire.com/?p=20518
 * @author        Tutor Aspire
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://www.tutoraspire.com
 */

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

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

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

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

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