Product page issue

[micheal_w]

Hi guys,

After the latest updates my product page (especially the thumbnails) look completely different with many issues.
I have updated on the staging site only, so I can show you how they look at the moment.
Please see details on the next private comment below:

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

Hi,

This login allowed me access past the initial login, however I would need to the details for the admin. I tried the supplied but they did not work.

The WooCommerce 3+ update was a huge change and we had to slightly alter the product gallery output.

Are the image sizes the same as the live site?

Thanks.

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

Hi,

We are limited as to what we can do as WooCommerce released such huge change. Please add this to Theme Options => Custom CSS, this will get the left thumbs to the previous reduced dimensions.

.woocommerce div.product div.woocommerce-thumb-nav--left .flex-control-thumbs li {
    max-width: 62px;
}

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

1) You can remove that using:

.woocommerce div.product div.woocommerce-thumb-nav--left .flex-control-nav {
    padding-right: 0;
}

2) Please enable Preloader/Transition Options => Page Transitions

3) Please add this to Theme Options => Custom CSS:

@media only screen and (max-width: 767px) {
.woocommerce div.product div.woocommerce-thumb-nav--left .flex-viewport {
    float: none;
    width: 100%;
    margin-bottom: 30px;
}
.woocommerce div.product div.woocommerce-thumb-nav--left .flex-control-nav {
    float: none;
    width: 100%;
    padding-right: 0;
    margin: 0 auto;
}
}

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

Hi,

1) I have adjusted the CSS, it now looks like:

2) If you test with WooCommerce 3+ and Twenty 17 you will see the same behaviour. It seems to be a negative consequence of the 3+ update.

3) As above, I have improved the CSS for this:

The updated CSS I have added to your CSS option for your review. It’s:

.woocommerce div.product div.woocommerce-thumb-nav--left .flex-control-nav {
    padding-right: 0;
    margin: 0 auto;
}

@media only screen and (max-width: 767px) {
.woocommerce div.product div.woocommerce-thumb-nav--left .flex-viewport {
    float: none;
    width: 100%;
    margin-bottom: 30px;
}
.woocommerce div.product div.woocommerce-thumb-nav--left .flex-control-nav {
    float: none;
    width: 100%;
    padding-right: 0;
    margin: 0 auto;
}
.woocommerce-product-gallery__image {
    min-height: auto!important;
}
.woocommerce div.product div.woocommerce-thumb-nav--left .flex-control-thumbs li {
    margin-bottom: 0;
}
.woocommerce div.product div.summary {
    padding-top: 0;
}
}

Thanks.

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

1) I see this:

What browser/device/size or orientation are you viewing this on? Be sure you have not zoomed into the page also.

2) Let me check this with Ed (lead dev).

3) You can revert to the default Woo style using:

@media only screen and (max-width: 767px) {
   .woocommerce div.product div.woocommerce-thumb-nav--left .flex-control-thumbs li {
      float: left;
      width: initial;
   }
}

[micheal_w]

This reply has been marked as private.

[micheal_w]

Hi guys, I know I am bumping up this post, but it’s been 3 days since my last reply…
Can you please have a look at these?

Thanks!

[Rui Guerreiro – SUPPORT]

Hi,

Apologise for the delay, David is not around this week. I will have to forward it to Ed.

-Rui

[Swift Ideas – Ed]

Hi @micheal_w

Apologies for the delay, have assigned it to me so that I can keep this topic close by.

1) I’ve checked this on Chrome + tested incognito, and both show a single column. Can you try clearing browser cache? I’ve tested multiple viewport sizes and still can’t replicate.

2) Unfortutanely this is due to the way the WooCommerce slider loads in combination with the thumbs set to be in left position – we can’t prepare the layout before the slider is initiated. If you

3) There was CSS added that removed this space, I removed that for you.

– Ed