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.

WooCommerce: Display Single Product Thumbnails Beside the Main Image
WooCommerce: Display Single Product Thumbnails Beside the Main Image

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        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=20518
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter ( 'woocommerce_product_thumbnails_columns', 'bbloomer_change_gallery_columns' );

function bbloomer_change_gallery_columns() {
     return 1; 
}

For Storefront theme:


/**
 * @snippet       CSS to Move Gallery Columns @ Single Product Page
 * @sourcecode    https://businessbloomer.com/?p=20518
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter ( 'storefront_product_thumbnail_columns', 'bbloomer_change_gallery_columns_storefront' );

function bbloomer_change_gallery_columns_storefront() {
     return 1; 
}

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://businessbloomer.com/?p=20518
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

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

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

47 thoughts on “WooCommerce: Display Product Gallery Vertically (Single Product Page)

  1. Hi Rodolfo,
    Many thanks for the code, works really well. A quick question please: I’m using Storefront and I wish to only use the vertical thumbnail alignment on desktop and more landscape browsers. On mobile and tablet devices, I wish to revert to the original Storefront thumb positioning. Is there a way for the code to not “work” on mobile, please?
    Thanks,
    Paul

    1. I figured this out for mobile. FYI, CSS is:

      @media only screen and (max-width: 480px), screen and (max-device-width: 480px) {
      .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {width: 100%; display: flex;}
      .single-product div.product .woocommerce-product-gallery .flex-viewport {width: 100%; float: left}
      .single-product div.product .woocommerce-product-gallery img {width: 99%;}
      }
      
    2. Nice!

  2. Good done, but it seems doesn’t work on Firefox.
    The flex-viewport width is set to 75% , but the woocommerce-product-gallery__image div width remain of 100% and product images go under thumbnails area.
    This happens with the default woocommerce setting, not using storefront or other’s high compatibility themes.

    1. Thanks Alessio – default WooCommerce should behave similarly on all browsers, so maybe there is an additional CSS call that needs to be added for Firefox (or otherwise, try clearing your Firefox cache). Hope this helps

  3. Hello.
    Good decision, thank you very much!
    but I just could not build an adaptive version for mobile, can anyone know the solution?

    1. Hey Fazli, thanks for your comment! You’ll need to play with CSS in order to achieve that. Good luck ๐Ÿ™‚

  4. Hello. I see this post is old. This is exactly what I need, but It doesnt work perfectly. My Thumbnail are horizontal and not vertical, maybe the new versions of woocommerce changed something. Is there a solution to get my thumbnails vertical ?
    Thank you for this tutorial.

    1. Hey Ollivier, thanks for your comment ๐Ÿ™‚ This is a snippet and CSS code specific to Storefront theme, so you need to re-adapt it to your custom one. Hope this helps!

  5. Hi Rodolfo,
    Is it possible to add slider when we have too many images?

    1. Hey Muhammad, thanks so much for your comment! I’m sure it is, however WooCommerce Product Gallery slider plugins add a horizontal slider (check it on Google) and I’m not sure how they behave vertically. Give it a go ๐Ÿ™‚

  6. how gallery images can be displayed vertically in the left of the main featured product image

    1. Hey Neancika, thanks for your comment! Maybe you need to float:right the main image, so that the vertical gallery stays on the left ๐Ÿ™‚

  7. Hi Rodolfo,

    thanks for the tutorial. I have managed to implement Phase 2 (CSS) but Phase 1 (PHP) does not work. The positioning is changed but the columns count does not alter at all.

    I am running WordPress 4.9.5 on DIVI Child Theme with PHP 7.0 and have put the code in the functions.php no luck.

    Can you recommend a solution?

    1. Hello Stephan, thanks so much for your comment! This could be theme-specific, so I can’t help in this case. Can you try switching to a default theme to see if the snippet actually works? Thank you!

  8. too much !! thank you, you save me the day !

    1. Eheh, brilliant ๐Ÿ™‚

  9. 
    /*Based on Solution from Rodolfo Melogli*/
    
    /* --- PHASE 1, make the gallery thumbnail column count 1 (not 3 or 4 )---  */
    add_filter( 'woocommerce_product_thumbnails_columns', 'dk_single_gallery_columns', 99 );
    function dk_single_gallery_columns() {
     return 1; 
    }
    
    // Do it for the Storefront theme specifically:
    add_filter( 'storefront_product_thumbnail_columns', 'dk_single_gallery_columns_storefront', 99 );
    function dk_single_gallery_columns_storefront() {
     return 1; 
    }
    
    /* --- END PHASE 1 --- */
    
    
    /* --- PHASE 2 add CSS --- */
    add_action('wp_head','dkAddVertGalleryCSS');
    function dkAddVertGalleryCSS() {
    
     echo '
            @media (min-width: 0px) {
            /* Make image width smaller to make room to its right */
            .single-product div.product .images .woocommerce-main-image, .flex-viewport {
                width: 85%;
                float: left;
            }
    
            /* Make Gallery smaller width and place it beside the image */
            .single-product div.product .images .thumbnails, ol.flex-control-nav.flex-control-thumbs {
                width: 15%;
                float: left;
                margin-top: 40px !important;
            }
    
            /* Style each Thumbnail with width and margins */
            .single-product div.product .images .thumbnails a.zoom, ol.flex-control-nav.flex-control-thumbs a.zoom {
                width: 90%;
                float: none;
                margin: 0 0 10% 10%;
            }
    
            /* Move the zoom tool to the left side to accommodate the gallery thumbs (otherwise it covers the first thumbnail */
            .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
                left: .875em !important;
            }
    
            } 
        ';
    
    } 
    
    /* --- END PHASE 2 --- */
    
    
    1. Trying it all… nothing really working.
      The first thing that’s not rendering is the 1 column action. The rest is just following, but this isnt even workigng:

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

      Any tip? Cheers!!!

    2. Hi Darshan,
      Iโ€™m already used above code as per given steps or procedure child theme but unable got the vertical gallery with a single product. so can you help me?

  10. I have a hard time figuring this out. Can you add more detail on the function and css.

    Note:
    – I have tried copying entire code for function – Failed
    – I have tried copying only the woocommerce function (since I dont have storefront) – Failed
    – For CCS, I just copied to my child without any results

    1. Hey Manu, thanks for your comment! I had to re-write and check the whole thing, so take a look at the updated article. Now, the CSS is specific to Storefront, as this will need to be customized according to your theme style. The PHP should work, and that puts the images in a vertical layout – the CSS moves them beside the featured image. Hope this helps

  11. Have any of the CSS classes or IDs changed since this post was created? I tried and didn’t get the results as the post.

    1. Brad, thanks for your comment! It could also be your theme has custom CSS, so you will need to target that one. I believe I was using the default Storefront theme.

  12. This is great but it would be even better if you could include a slider/navigation for products with lots of images.

  13. Hi

    i have tried it .But the code is not reflecting…May i know what would be the reason?

    1. Hey! It could be your custom theme is already “messing” with the default WooCommerce – sorry but I can’t give direct support here on the blog ๐Ÿ™‚

  14. Hi!

    I bought these theme.. but It already has the vertical display.. I want to have the horizontal display… Can I make that with a snippet also?

    Thanks!

    1. Hello Ricardo, thanks so much for your comment! I’m afraid this will depend on your specific theme, so you’ll need to research what code they’re using and then unsetting it / disabling it via custom PHP. Hope this helps a little ๐Ÿ™‚

  15. Hi!
    Thanks you a lot!
    Works!
    How is it possible to put the on the left?
    And with you disabling the zoom magnifier?
    Thanks!

    1. Hey Marco, thanks for your comment!

      To align it to the left, just change “float: left” to “float: right” in the CSS. Very easy ๐Ÿ™‚

      For the question regarding the zoom, I don’t think that’s a default WooCommerce feature. It’s probably a theme or a third party plugin feature that you’ll need to disable separately ๐Ÿ™‚

  16. Thanks for great tutorial but I have one question how to move product gallery vertical to under main product image

    1. Hitesh, thanks for your comment! Well, the product gallery is already under the main product image, so I don’t really understand what you need here. Maybe send me a screenshot?

  17. Thank you for this tutorial ! I wanted to ask, will you make a tutorial on how to change the thumbnail sizes in woocommerce ? Like the ones on the shop page.
    My parent theme has this by default: https://docs.woothemes.com/document/set-woocommerce-image-dimensions-upon-theme-activation/
    and I can’t figure out for the life of me how to change it in the child theme… It’s preventing me from launching my website for the moment.

    1. Queina, thanks so much for your comment! And yes, WooCommerce images are definitely on my to-teach list. I should run a live class in June or July about this topic ๐Ÿ™‚

      Thanks again!

    2. I’m also wondering how to change the thumbnail image size in Storefront from 43×43 to 120×120??
      Thanks!

    3. Hey Ben, thanks so much for your feedback and comment!

      Yes, this is possible of course – but unfortunately this is custom development work and I cannot provide this solution on the blog right now.

      If you would like to get a quote for the fix, feel free to go here and get in touch ๐Ÿ™‚

      Thanks for your understanding!

      ~R

  18. Thanks for another great tutorial!

    1. You are very welcome ๐Ÿ™‚

  19. Awesome snippet, yet another great tutorial. Especially the @media rule helps.

  20. Rodolfo,

    It’s great. I am going to try it.

    Thanks.

    1. Thank you so much Manas ๐Ÿ™‚

  21. Thanks for releasing this tutorial; this is precisely what I have been looking for!

    100% A+

    1. Thank you so much Evan! Much appreciated ๐Ÿ™‚

Questions? Feedback? Support? Leave your Comment Now!
_____
If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)
¯¯¯¯¯

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.