Docs

[BigBagoo]

Hi There!
I want to move the image thumbnails on the single product page to the right of the main image. I have done this, but I can’t get the thumbnails to organize nicely into a grid like they do when they are under the main image.

When I leave them under the main image originally and they organize into a grid nicely:
screenshot_1

What my thumbnails look like now that I have moved them over, but unable to organize them nicely into a grid:
screenshot_2

Any tips? can this be accomplished simply with CSS, javascript, or through my child theme? Thanks for your time 🙂

I found this in the forums, but it wasn’t quite the same thing: https://community.theme.co/forums/topic/woocommerce-product-image-thumbnail-placement/

[Rue Nel]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[BigBagoo]

Hi There,
Our site has visitors coming to the page and thus we have it “under construction”. We can make it available if necessary, but that could look bad to our customers. Is there anyway you can make do with the screenshots I provided? If not, then I understand and we can open up our website to you!

Thanks for getting back to me so fast!
Best Regards

[Christopher]

Hi there,

You can provide us with login credentials in private replay so we can login and see the issue.

Thanks.

[BigBagoo]

This reply has been marked as private.

[Nico]

Hi There,

I have tried to login in your setup however upon checking your setup it has an error to your databse.

Let us know if you already fix it so we could check your setup closer.

Thanks.

[BigBagoo]

Hi Nico,

I was working on the website off and on all day yesterday, without any issues. I’m not sure what error you got with the database. I also tested the credentials I sent in a private message and those worked fine too. Please let me know in more detail what issue you had.

Thanks.

[Rue Nel]

Hello There,

I am another staff checking on this thread! I have logged and checked your single product page. To resolve this issue and align your product thumbnails, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 768px){
  .thumbnails .x-img-thumbnail {
    max-width: 120px;
    min-height: 120px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block; 
  }
}

You should have something like this:

Hope this helps.

[BigBagoo]

Hi Rue,
That worked perfectly! Thank you very much for the help! Have a great day 🙂

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts