Product gallery image showing smaller size

[alessandrorussino]

Hi There,

Please refer to this post: https://theme.co/apex/forum/t/how-to-change-the-product-picture-gallery-layout-to-left-side-of-the-product/69683?u=alessandrorussino

This was done and working fine so far, but suddenly today I saw that my product page gallery image is showing like this: http://prntscr.com/r85ir1 very smaller and not the way it was after the solution I got from the post link above. I have tried to edit the codes you have shared, but that didn’t give me a perfect solution.

Can you please take a look and tell me what went wrong that my product picture gallery image is showing smaller than usual?

I want them to be vertically aligned on the left side according to the first post. Here’s my Shop link: https://www.voyageswimwear.com/product/ruffle-black-bikini/

Thanks

[jade]

Hi Alessandro,

It looks like you are using a third partly plugin for the product gallery images thumbnail.

This is setting a width of 100px to the gallery image container which is causing the images to display smaller.

Try adding this code in X > Theme Options > CSS to override that CSS rule:

.single.woocommerce div.product .images #wpb_wiz_gallery {
    width: 100%;
}

Feel free to change the value of the width in the code above.

Hope this helps.

[alessandrorussino]

Hi,

are you talking about these codes? I got those codes from this post where I wanted to have my product gallery pictures placed on the left side before the main product picture and aligned vertically one by one. The codes you have mentioned above about 3rd party app, it looks similar to the one provided here: How to change the product picture gallery layout to left side of the product?

Now, I have tried your code but that didn’t solve my issue. It just enlarged the gallery image size, but still placed wrongly, overlapping the main picture shown here screenshot: http://prntscr.com/r9jfp6

Thanks

[ruenel]

Hello Alessandro,

The plugin css seems to have caused the issue. Do you want to display the image like this layout?

If that is the case, then please have your custom css updated and use this instead:

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

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

    .zoomWrapper {
        margin-left: 120px !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 #wpb_wiz_gallery .woocommerce-product-gallery__image {
        width: 100%;
        margin-bottom: 10px;
    }

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

We would love to know if this has worked for you. Thank you.

[alessandrorussino]

Hi Ruenel,

Yes, that’s the thing I wanted. It’s working now.

Thanks.

[ruenel]

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