Image wider than flex-viewport after making thumbnails vertical

Question

I've a problem with image size in Woocommerce and FlexSlider product gallery.

I'm using a free Astra theme. I've found the code that makes the thumbnail vertical on the left side of product image.

.woocommerce-product-gallery {
    display: flex;
}

.woocommerce-product-gallery .flex-control-thumbs {
    order: -10;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100%;
}

Now thumbnails looks OK on the left side.

But here is the problem. Image (now on the right of the thumbnails) is not fully visible.

The image is shown in div.flex-viewport:

<div class="flex-viewport" style="overflow: hidden; position: relative; height: 554.45px;">

    <figure class="woocommerce-product-gallery__wrapper" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

        <div class="woocommerce-product-gallery__image flex-active-slide" data-thumb="http://localhost/site01/wp-content/uploads/prod01.jpg" data-thumb-alt="" style="position: relative; overflow: hidden; width: 554.45px; margin-right: 0px; float: left; display: block;" </div>

When I inspect element it is wider than first element .

It is wider because now thumbnails take some space on the left. The flex-viewport is now narrower than it was but the image has the same width like was when thumbnails was under the active product image.

I"ve figure out that when I change the width in above from 1000% to 100% and change the width in the last div auto, image is shown correctly. But because I've changed 1000% to 100% other images in the gallery are not shown when I click on the thumbnail. It is shown as blank space.

So I need to get active slide have the same width as flex-viewport (child have the same width as grandparent, not as parent).

I've been trying to solve this for a while with no luck.

Can somebody help me this?

Regards....

Answer 1

Same problem, looks like nobody found solution yet. They are even closing the tickets without a solution :D Other threads: https://wordpress.org/support/topic/woocommerce-image-gallery-bug-on-firefox/ https://wordpress.org/support/topic/wider-product-images-cut-off-on-right-but-only-with-firefox/

There is a difference with Figure element for FF and Chrome. FF:

<figure class="woocommerce-product-gallery__wrapper" style="width: 1000%; transition-duration: 0s; transform: translate3d(-749px, 0px, 0px);padding: 0;margin: ;">

Chrome:

<figure class="woocommerce-product-gallery__wrapper" style="width: 1000%; transition-duration: 0s; transform: translate3d(-624px, 0px, 0px);">

It should be translate3d(-624px, just like in Chrome, but somehow it is not calculated properly.

Answer 2

First: the viewport width has to be 100% MINUS the width of thumbnail.

For example, if thumbnail is 20% width, then viewport has to be 80% to fit in!

Check this nice tutorial : https://www.businessbloomer.com/woocommerce-display-product-gallery-vertically-single-product/

Second: after that you will notice an issue happening only in firefox : the image will keep 100% while the viewport will be 80%.

To correct that you need to overwrite the minified jquery file from woocommerce/assets/js/flexslider/jquery.flexslider.min.js :

I changed this : m.isFirefox&&(m.w=m.width())

To this : m.isFirefox&&(m.w=m.viewport()) <- do not work anymore

The image will use the width of the viewport in place of the entire slider.

Wish this can help! Its worked perfectly for me!

EDIT : After an auto-update, my fix didnt work anymore (log error : m.viewport is not a function...).. I actually dont know why but this new edit do the job :

NEW FIX :

change this : m.isFirefox&&(m.w=m.width())

to this : m.isFirefox&&(m.w=(m.viewport===undefined?m:m.viewport).width())

There is for sure better way to handle this but i'm still learning and haven't actually the time to focus on that..

Answer 3

I fixed the problem by adding display: flex !important; to the woocommerce-product-gallery__image element.