How to change the product picture gallery layout to left side of the product?

[alessandrorussino]

Hi There,

Currently, I have my product picture gallery images set underneath the main product picture, but I want to move the gallery images to the left-hand side of the main product pictures and align vertically similar to the screenshot: http://prntscr.com/qv6wjm

My website is voyageswimwear.com and it’s run on Theme X

Thanks

[ruenel]

Hello Alessandro,

Thanks for writing in! To resolve your issue, you may use this css code as a starting point:

@media(min-width: 768px){
    .woocommerce div.product .images > a {
        margin-left: 120px;
    }

    .zoomContainer {
        margin-left: 60px !important;
    }

    .woocommerce div.product .images {
      position: relative;
    }

    .woocommerce div.product .images #wpb_wiz_gallery {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
    }

    .woocommerce div.product .images .thumbnails>a {
      float: none;
      width: 100%;
    }
}

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

CSS Selector Reference
How to find the css selector in chrome

Regards.