Woocommerce product gallery vertical

[hyperdrive_boom]

Good afternoon,

I wish to move the Woocommerce product gallery from being in the top right of the image to being vertical and to the left of the main image.

Attached is an example:

The nearest I can get is finding this from your Forum:

.single-product .woocommerce-product-gallery__image>a>img {
    width:100%;
}

.single-product .flex-control-nav.flex-control-thumbs li {
    float: left;
    width: 9.86%;
    margin-bottom: 8px;
}

.single-product .flex-control-nav.flex-control-thumbs li:nth-child(10) {
    margin-left: 0 !important;
}

.single-product .flex-control-nav.flex-control-thumbs img {
    width: 100%;
    height: auto;
}

.single-product .flex-control-nav.flex-control-thumbs {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    padding-top:8px;
}

That has got it so the gallery is under the main:

Please Advise and thank you!
Jason

[lely]

Hi @hyperdrive_boom,

Thank you for the screenshots.

Unfortunately, what you are trying to achieve needs structural changes. It cannot be achieve with just custom CSS. You might want to consult a web developer to achieve this as this is outside the scope of our support. Checking the design, it looks simple just positioning the thumbnails on a different direction, but if you will inspect the element, you can see the structure will not permit it with just CSS. Here’s your guide:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Thank you for understanding.