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

No video

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

Рет қаралды 29,666

3 жыл бұрын

Hey everyone! I'm Raf and here I show you How to Display Product Image Gallery Thumbnails on the left side using Elementor & Woocommerce like the one you always see in Amazon.
Here is all the code
codepen.io/raf...
Questions or doubts, just leave them in the comments and I'll be happy to answer them! :)
✅ Link to purchase SiteGround
www.siteground...
✅ How to Register in SiteGround in 2021
• 👉 How to Buy SITEGROUN...
Looking for more tips?
Try Elementor Page Builder (THE BEST WEBSITE BUILDER EVER)
elementor.com/...
#WordPress #SiteGround #NewWebsite
Music credits to:
/ sapajou-yorgo-h-wastin...
** Support My Channel **
Please notice that I'll get a small amount as a commission for the links in the video at NO cost from you. This review is based on my personal experience using the hosting company and I did the video on my own decision.

Пікірлер: 76

@barsk76 2 ай бұрын

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 10 күн бұрын

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 10 күн бұрын

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

@user-jr6og6qs7o Ай бұрын

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

@LuizErnesto 4 ай бұрын

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_ 4 ай бұрын

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

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

@hippiekingdom 3 жыл бұрын

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_ 3 жыл бұрын

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

@hippiekingdom 3 жыл бұрын

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

@rafaelazuaje_ 3 жыл бұрын

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 3 жыл бұрын

@@rafaelazuaje_ 👍

@movieclips9607 3 жыл бұрын

Thank you so much you really done a great work, you created a video not for someone to watch you created it for someone who needed it that's great hats off, thanks , subscribed

@rafaelazuaje_ 2 жыл бұрын

Glad it was helpful! :)

@kevinjohnllano8336 3 жыл бұрын

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

@keyurshah6327 3 жыл бұрын

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

@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?

@bulka_s_makom 2 жыл бұрын

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

@MendyHazan 2 жыл бұрын

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.

@yacouba4401 2 жыл бұрын

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

@play-cu5tv 2 жыл бұрын

Really helpful . Thank you Brodha!

@user-jr6og6qs7o Ай бұрын

Thank you

@gururagavendra3917 3 жыл бұрын

thank you so much bro waiting for more videos

@MendyHazan 2 жыл бұрын

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?

@tareknnassar 11 ай бұрын

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.

@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?

@lemiucide 2 жыл бұрын

I want to hug you! Thank you so much!

@meroniacademy3634 3 ай бұрын

Wow, excelent solution. THX

@arturo5050 8 ай бұрын

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

@msandre19701 Жыл бұрын

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

@user-zz2hh2pg7n 2 жыл бұрын

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?

@honeywavecreative2762 2 жыл бұрын

Worked like a charm! Thank you!

@rafaelazuaje_ 2 жыл бұрын

🚀🚀🚀🚀🚀

@daniele7753 2 жыл бұрын

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

@haumaithe9237 Жыл бұрын

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

@mimilon2816 2 жыл бұрын

Can you do like slider ?

@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?

@user-qw5qk7pr6m Жыл бұрын

did you solve it? same problem here!

@aldofematWorkout Жыл бұрын

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

@JessicaCaldeira-sk1uj 2 ай бұрын

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 27 күн бұрын

Not working for me.

@user-sc6nm9bt6p 9 ай бұрын

Thank you very much! 💘

@rafaelazuaje_ 4 ай бұрын

You're welcome!!

@khaledbakromp 2 жыл бұрын

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

@rafaelazuaje_ 2 жыл бұрын

Hi Khaled! What theme are you using?

@marionpaolo319 Жыл бұрын

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?

@marionpaolo319 Жыл бұрын

@@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 Жыл бұрын

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

@wordpresstime4290 2 жыл бұрын

thankyouso much bro , save me.

@leandrojordaocosta 2 жыл бұрын

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 2 жыл бұрын

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

@leandrojordaocosta 2 жыл бұрын

@@vicmichener673 Where?

@vicmichener673 2 жыл бұрын

@@leandrojordaocosta At top of comments.

@junonedel3557 2 жыл бұрын

Thank you so much!

@rafaelazuaje_ 2 жыл бұрын

You're welcome! :)

@vinnyscrouth7196 3 жыл бұрын

OMG! thank you very much

@rafaelazuaje_ 2 жыл бұрын

You're welcome! :)

@arthurgreb6667 2 жыл бұрын

Thanks!

@zamsMG 2 жыл бұрын

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

@rafaelazuaje_ 2 жыл бұрын

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 2 жыл бұрын

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

@rafaelazuaje_ 2 жыл бұрын

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

@modou293 2 жыл бұрын

The code does not work on my Woocommerce custome CSS

@rafaelazuaje_ 2 жыл бұрын

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

@discretestar3788 3 жыл бұрын

Thank you so much

@rafaelazuaje_ 2 жыл бұрын

You're most welcome!

@graphicswebminimall3521 3 жыл бұрын

Good Job

@gergo_44 Жыл бұрын

its not working

@nicepetproducts 2 жыл бұрын

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

@rafaelazuaje_ 2 жыл бұрын

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

@fireneks6575 Жыл бұрын

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

@BlackJacketJones 2 жыл бұрын

doesn't work. don't waste your time

@vicmichener673 2 жыл бұрын

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 10 ай бұрын

thanks!