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

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 CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=20518
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @community     https://businessbloomer.com/club/
 */

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
 * @community     https://businessbloomer.com/club/
 */

add_filter ( 'storefront_product_thumbnail_columns', 'bbloomer_change_gallery_columns_storefront' );

function bbloomer_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://businessbloomer.com/?p=20518
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @community     https://businessbloomer.com/club/
 */

/* 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 custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce Visual Hook Guide: Single Product Page
    Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments! […]
  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Show Number Of Products Sold @ Product Page
    WooCommerce database already stores the number of products sold for you. Therefore, you may want to show such number on the product page, close to the Add To Cart button. As we’ve seen in my book Ecommerce and Beyond, showing the number of sales for each product can increase your sales conversion rate. All you […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

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

  1. Hi,
    Not working with Muffin Group’s BE theme…
    the gallery appears in on the side, but in three columns, not 1…
    so CSS is working but this added to funtions.php not…

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

    Any ideas? Free or paid advice?

    1. Hi Hela, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Hi!

    Thanks for the awesome tutorial! I almost make my perfect!

    There are too many pictures as you may see in the screenshot, the left row of thumbnails is too long…if only the first 5 thumbnails need to show, how to hide the rest and use a down arrow to slide them out?
    Hope I made myself clear. Thank you.

    1. Hi Sima, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  3. Greetings!

    I wanted to know if this code would work for Child’s theme?

    thank you!

    1. Yes

  4. Thank you for the code, it works fine, but the vertical align thumb shown up just beneath the main image. How can I show the Product Galleryโ€ thumbnails” to the left side of Image?

    1. Screenshot please?

      1. I have same problem see link for screenshot

        https://gyazo.com/0f7c35b10427cc456021e6c1bca84ced

        1. Hey Bjorn, not sure I understand what’s the problem here?

  5. Hi, can anyone help me with knowing if I can display products gallery images under each other? So that user just scrolls and sees the full product and saves his time by sliding the images by arrows or swiping.

    1. I believe there is a WooCommerce filter that allows you to define the product gallery “columns” (1 in your case). Hope this helps

  6. For those of you that can’t this to work you might have to write it like this

    add_filter ( 'woocommerce_single_product_image_gallery', 'bbloomer_change_gallery_columns' ); //where woocommerce_single_product_image_gallery is the selector
     
    function bbloomer_change_gallery_columns() {
         return 1; 
    }
    1. Great!

  7. Did anyone find a solution for the Firefox issue? Crops the main image when is less than 100% using .single-product div.product .woocommerce-product-gallery .flex-viewport {

    Works fine on all other browsers though

    Thanks

    1. Not sure Christian ๐Ÿ™‚

  8. margin: 0 0 10% 10%;

    should be

    margin: 0 0 5% 5%;

    otherwise it will equal 110%

    1. Thanks!

  9. Hi,

    I get ERROR for “CSS Snippet (Part 2 of 2): โ€œmoveโ€ the Product Gallery beside the image” –
    —-
    syntax error, unexpected ‘.’, expecting end of file.

    1. Sorrry, found what is wrong.

      1. Great to know!

  10. I want to add slider in WooCommerce: Display Product Gallery Vertically (Single Product Page)

    1. Hi Sabista, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  11. 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%;}
      }
      
      1. Nice!

  12. 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

  13. 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 ๐Ÿ™‚

  14. 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!

  15. 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 ๐Ÿ™‚

  16. 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 ๐Ÿ™‚

  17. 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!

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

    1. Eheh, brilliant ๐Ÿ™‚

  19. 
    /*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?

  20. 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

  21. 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.

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

  23. 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 ๐Ÿ™‚

  24. 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 ๐Ÿ™‚

  25. 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 ๐Ÿ™‚

  26. 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?

  27. 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!

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

        1. 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

  28. Thanks for another great tutorial!

    1. You are very welcome ๐Ÿ™‚

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

  30. Rodolfo,

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

    Thanks.

    1. Thank you so much Manas ๐Ÿ™‚

  31. 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? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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