✅ Display Product Image Gallery Thumbnails on the LEFT SIDE with Elementor & Woocommerce [2021]

[@linaljabri]

3 years later but this was soooo helpful! thanks alot!

[@RaffetAli2006]

It worked perfectly. Really, thank you so much.

[@kamranishtiaq5693]

Thanks for your efforts. I am trying to implement this functionality for the past many months, and you solved my problem in just a few minutes. Thank a lot.

[@MorganReyes-i1d]

Hello chat I am trying to customize my single product page such that the product gallery will be vertically aligned in two rows below the main product?

[@kevinjohnllano8336]

It works great with Divi+Woocommerce man, thank you so much!

[@keyurshah6327]

i want to allign vertical woocommerce poduct image gallery in divi. did you change anything or pasted exact same code?

[@LuizErnesto]

Thank you very much, solved my problem with thumbnails in woocommerce. I was trying to implement this settings for a long time (months). Tks from Brazil.

[@rafaelazuaje_]

You're welcome! More updates and new codes will be coming soon! Blessings!

[@bulka_s_makom]

God bless you. You are the only one who could help me!

[@hippiekingdom]

The solution to the thumbnails layout that I was trying for a long time. Thank you so much for making this video! The code somehow did not work for me at style.css however it worked at additional css. Thanks again!

[@rafaelazuaje_]

I'm glad it worked! I'm preparing more new videos about customization 😀👍🏻

[@hippiekingdom]

@@rafaelazuaje_ Happy to hear that.. A sliding carousal for product images would be great. These are functionalities I wish elementor had.

[@rafaelazuaje_]

We're on the same page!! For now I'll implement a CSS solution, but then I'll tweak it to be more elegant with a bit of jQuery :D

[@hippiekingdom]

@@rafaelazuaje_ 👍

[@ifecoral]

Thank you thank you thank you thank you You don't know what you've done for me with this video

[@AnnaKarinLahti]

Hello! I have made exactly as you said but it doesnt work for me. They are on the left side but not in a line.

[@play-cu5tv]

Really helpful . Thank you Brodha!

[@yacouba4401]

I was trying for longtime to fix this issue hopefully your video help me . Thank YOU.

[@tareknnassar]

hello, i have tried this code, it works perfectly if you have few product images, but if you have a lot of images they will overflow vertically and break the design. is there a way to fix this and make it look like a vertical carousel? thanks.

[@mibelibsen]

Really grateful for your code! But having problem with the gallery overlapping the main image especially on large screens. On smaller screens it looks absolutely as supposed to. What to change?

[@MendyHazan]

Another thing I've noticed is that the zoom on hover doesn't work very well with this custom CSS. It only works on the edges of the image instead of when you hover over any part of the image. Not sure what makes that happen in the code so I couldn't figure out how to fix it, but if you have a fix for that, please let me know. Thanks again for the video.

[@arturo5050]

Its there a way to make it like mansory effect on desktop?

[@gururagavendra3917]

thank you so much bro waiting for more videos

[@abdelazizelh546]

thank you for sharing this very good idea please i get the code from your blog page but i don't know how i can get the result like you i don't know what elementor element i can use in order to get gallery

[@honeywavecreative2762]

Worked like a charm! Thank you!

[@rafaelazuaje_]

🚀🚀🚀🚀🚀

[@barsk76]

Thank you for this amazing tutorial. I have a question: Is it possible to show single product images vertically with the same size of featured product image? What I mean; instead of showing vertically at the left side of the featured image, I would like to show all product images vertically as the same size of main product image. Most of the shopify themes' single product pages are like that. Instead of small thumbnails, at shopify single product page; all images display vertically with same size. So with this way, the layout of the page is like: the left side of the page belongs to images (all vertically displayed) and the right side of the page belongs to Price, Product info/meta data, add to cart button, etc. I wish you could make a tutorial about this. Thanks in advance🤙🤙

[@piypiy4585]

Hi Barsk! Have you found a solution to this problem? I'm trying to solve the same problem now. I want to make all the images (main image and pictures inside the gallery images) vertically and same size aligned in left side or middle of the page. It would be great to hear if there is a solution to this problem😉

[@barsk76]

@@piypiy4585 Hey there; unfortunetly I havent find any solution about this. I also write to the elementor headquarter to have such option and "buy now" button underneath the add to cart button to replicate Shopify themes but there is no joy. I haven't find any solution. Believe it or not; for my ecommerce project, I already jump from Wordpress to Shopify. Even if I am a die hard WP fan, about e-commerce Shopify is 10x better.

[@washingtonapparel]

@@piypiy4585 you can put this CSS in the Custom CSS on your Product Page in Elementor Pro. .woocommerce-product-gallery .flex-control-thumbs { order: -10; } .woocommerce div.product div.images .flex-control-thumbs li { width: 100%; padding-top: 0; padding-bottom: 5px; }

[@DOSSmusic]

Hi there, awesome tutorial I have a question: For example I have 20 photos and I want only 4 to be displayed, and I want for other 16 to have an layout to say "load 16 more.." so when you click to load other images, is that possible?

[@petrasjonuska6305]

Thank you bro, best of success and good health to you Mashallah

[@MendyHazan]

This is great, thank you. QUESTION; Not every button or function can be centered in a column because not every button has the option in Elementor to do so. Of course, you can adjust margins, but that isn't always practical. Is there a css code to automatically center anything?

[@mimilon2816]

Can you do like slider ?

[@aldofematWorkout]

it just work for elemntor theme? Can I use it in themify?

[@msandre19701]

I need to limit in product gallery (slider), two columns and two rows. it's possible?

[@lemiucide]

I want to hug you! Thank you so much!

[@meroniacademy3634]

Wow, excelent solution. THX

[@haumaithe9237]

Is there a guide to customize the thumbnail bar into a slider?

[@ЕГЭМарафон]

Raf, hello! Thanks for the great video! I faced such a problem that the main image is cropped in the Firefox browser if its size is less than 100%. Everything works fine in other browsers. Please tell me how to make it work in Firefox too?

[@rightpadding]

Question: how do we add a scroll to the thumbnail images if the product gallery has lots of images?

[@regalcreds3088]

Having same issue. Did you find the solution?

[@rightpadding]

@@regalcreds3088 did not found any solution. Tried using overflow y: but doesnt work. Maybe I just miss on how to implement the custom css for the scroll

[@regalcreds3088]

@@rightpadding actually i got one plugin you can use that. "Woocommerce product slider"

[@ifecoral]

Thank you

[@flitsdesign7521]

It doesnt work on my site, I have Astra theme, but Astra already has vertical option, but if I use Elementor to build my page it doesnt work.. Can you please help me?

[@OvidiuRazvanConduruta]

did you solve it? same problem here!

[@fitopranaitalia]

Thank you very much! 💘

[@rafaelazuaje_]

You're welcome!!

[@leandrojordaocosta]

Great job! The year is 2022 and nether the WordPress or the Elementor don't have a option to do this without another plugin. Thanks for your time! Congrats! But I have some problem with the zoom, only works on the thumbnail line down. Somebody?

[@vicmichener673]

Just posted a solution that worked for me with gallery slideshow. Thinking it should work for zoom as well.

[@leandrojordaocosta]

@@vicmichener673 Where?

[@vicmichener673]

@@leandrojordaocosta At top of comments.

[@daniele7753]

There's a way (free) to do the same thing but without using Woocomerce and any other plugin? Thanks

[@JessicaCaldeira-sk1uj]

Does this still work? I've tried a bunch of ways to get this to work but I just can't get it! Anybody have any tips of what I could be missing?

[@Cascarola1]

Not working for me.

[@khaledbakromp]

Can you help me please? the images in the products image gallery doesn't load but only the first image loads.

[@rafaelazuaje_]

Hi Khaled! What theme are you using?

[@zamsMG]

cool bro.. but why isn't work in my wp, i'm using astra theme.. ?

[@rafaelazuaje_]

Bro! Option 1: Try to clean up cache and try on incognito. Option 2: Try to put in Appearance -> Customize -> CSS. Note that this code was meant to work with Hello Theme for Elementor, probably with other themes it needs more tweaks. Let us know if it works :)

[@zamsMG]

@@rafaelazuaje_ finally it's work bro.. Thanks a lot, you're the best..

[@rafaelazuaje_]

@@zamsMG Glad it worked my friend!! Cheers!!

[@junonedel3557]

Thank you so much!

[@rafaelazuaje_]

You're welcome! :)

[@vinnyscrouth7196]

OMG! thank you very much

[@rafaelazuaje_]

You're welcome! :)

[@arthurgreb6667]

Thanks!

[@modou293]

The code does not work on my Woocommerce custome CSS

[@rafaelazuaje_]

Hi! Can you try adding it to Appearance-> Customize -> Custom CSS That way it should work! 👍🚀

[@graphicswebminimall3521]

Good Job

[@discretestar3788]

Thank you so much

[@rafaelazuaje_]

You're most welcome!

[@wordpresstime4290]

thankyouso much bro , save me.

[@nicepetproducts]

Thank you for this video, can you share with me the code link?

[@rafaelazuaje_]

Hello! It's in the description of the video: codepen.io/rafaelazuaje_ui/pen/WNoLLLp

[@gergo_44]

its not working

[@fireneks6575]

No funciona no por que el codigo este mal solo que la clase tiene otros nombres xd

[@BlackJacketJones]

doesn't work. don't waste your time

[@vicmichener673]

Re. the zoom on hover only working on the edge of the image with gallery images to left. I'm not using zoom, but had the same issue with launching the gallery slideshow, and expect this will help. The ol with the gallery images sits over the larger image, blocking the link. (If there are only a few gallery images, you are also able to click lower down on the larger image.) Solution that worked for me... still playing with it. This removes the link from the overlay and then restores it to both the gallery images and the main image: /*NEW*/ ol.flex-control-nav.flex-control-thumbs { pointer-events: none; } ol.flex-control-nav.flex-control-thumbs li { width: 15% !important; pointer-events: auto;/*NEW*/ } /*NEW*/ .woocommerce div.product div.images img { pointer-events: auto; }

[@MartinBenesCreative]

Thanks works perfectly!

[@brunogontijo1099]

thanks!

[@IkramIqbal-td3vl]

not working