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 businessbloomer.com/woocommerce-customization * @sourcecode https://businessbloomer.com/?p=20518 * @author Rodolfo Melogli, Business Bloomer * @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, Business Bloomer * @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, Business Bloomer * @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%; }
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…
Any ideas? Free or paid advice?
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!
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.
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!
Greetings!
I wanted to know if this code would work for Child’s theme?
thank you!
Yes
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?
Screenshot please?
I have same problem see link for screenshot
https://gyazo.com/0f7c35b10427cc456021e6c1bca84ced
Hey Bjorn, not sure I understand what’s the problem here?
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.
I believe there is a WooCommerce filter that allows you to define the product gallery “columns” (1 in your case). Hope this helps
For those of you that can’t this to work you might have to write it like this
Great!
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
Not sure Christian 🙂
should be
otherwise it will equal 110%
Thanks!
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.
—
Sorrry, found what is wrong.
Great to know!
I want to add slider in WooCommerce: Display Product Gallery Vertically (Single Product Page)
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!
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
I figured this out for mobile. FYI, CSS is:
Nice!
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.
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
Hello.
Good decision, thank you very much!
but I just could not build an adaptive version for mobile, can anyone know the solution?
Hey Fazli, thanks for your comment! You’ll need to play with CSS in order to achieve that. Good luck 🙂
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.
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!
Hi Rodolfo,
Is it possible to add slider when we have too many images?
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 🙂
how gallery images can be displayed vertically in the left of the main featured product image
Hey Neancika, thanks for your comment! Maybe you need to float:right the main image, so that the vertical gallery stays on the left 🙂
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?
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!
too much !! thank you, you save me the day !
Eheh, brilliant 🙂
Nice one, thank you!
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:
Any tip? Cheers!!!
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?
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
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
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.
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.
This is great but it would be even better if you could include a slider/navigation for products with lots of images.
Thank you Steven!
Hi
i have tried it .But the code is not reflecting…May i know what would be the reason?
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 🙂
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!
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 🙂
Hi!
Thanks you a lot!
Works!
How is it possible to put the on the left?
And with you disabling the zoom magnifier?
Thanks!
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 🙂
Thanks for great tutorial but I have one question how to move product gallery vertical to under main product image
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?
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.
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!
I’m also wondering how to change the thumbnail image size in Storefront from 43×43 to 120×120??
Thanks!
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
Thanks for another great tutorial!
You are very welcome 🙂
Awesome snippet, yet another great tutorial. Especially the @media rule helps.
Cheers Conrad!
Rodolfo,
It’s great. I am going to try it.
Thanks.
Thank you so much Manas 🙂
Thanks for releasing this tutorial; this is precisely what I have been looking for!
100% A+
Thank you so much Evan! Much appreciated 🙂