Thumbnails on the left side in single product page (Woocommerce)

Support
#1

Hello,

I’d like to get the thumbnails on the single product page from Coocommerce to be on the left side of the main image (like on this site). How can I achieve this ? Below the main image would also be acceptable if it is complicated to have them on the left side.

URL: https://mandtis.fr/boutique/eperon/coffret-jumping-mspur3/
Pwd: E-MM

Thanks,
Antoine

#2

Hey Antoine,

Thanks for writing in! Do you want something like this?

If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 980px){
  .flex-viewport {
    margin-left: 100px;
  }

  .flex-control-nav.flex-control-thumbs {
    right: auto;
    left: 0;
    width: 100px;
    height: 100%;
    padding: 0;
  }

  .flex-control-nav.flex-control-thumbs li {
    float: none;
    display: block;
    background-color: transparent;
    margin: 5px auto !important;
    border: none;
    box-shadow: none;
  }

  .flex-control-nav.flex-control-thumbs img {
    height: auto !important;
    max-width: 50px;
  }
}

Hope this helps. Kindly let us know.

#3

This is what I wanted to achieve. I should now be able to adapt it for the different screen sizes.
Thank you very much!

#4

You’re welcome!
We’re glad we were able to help you out.