Product Image thumbnail messed up after updating to woocommerce 3.0

This seems to be a problem with Shopisle theme only after woocommerce update, as it is working fine when I switch to other themes.

We’re working on an update which will fix this issue. Please wait and an update will be out soon. Thank you. ??

Thanks for the reply. I have temporarily switched to some other wordpress theme till the update is not released.
Will be waiting.
??

Problems:
1) Images on products are not shown
2) Of course my console log is FULL of errors of 404 for not founding any pictures
3) New gallery is not shown and new zoom on hover doesnt work.

Screenshot :
https://prntscr.com/et2fzz
https://prntscr.com/et2gnr
https://prntscr.com/et2gt7

Not using CDN and tried with “restore thumbnail” plug in

I have the same problem with the product gallery view (Shopisle theme) after updating to woocommerce 3.0

Screenshot:
https://prnt.sc/et6w69

Also it changed the font-family and font-size of the product title in the shop page.

Screenshot:
https://prnt.sc/et76m0

• This reply was modified 7 years, 7 months ago by bluum1.

Everything should be ok now with the new version ??

Still having this issue.

https://vortexskids.com/shop/product/vortex-150-skids/

Updated to 3.0.1. What else can I do?

Having upgraded to 3.0.1 and shopisle theme 1.1.18 the issue still appears in Safari browsers. Works well in Chrome.

Hi RaiedZ (@raiedz), how did you get to fix the gallery image on your website. i am encountering similar problem with shop isle on my website.

Fixed the problem by adding this to functions.php:

add_action( 'after_setup_theme', 'yourtheme_setup' );
 
function yourtheme_setup() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}

and this to Custom CSS:

.woocommerce-product-gallery figure {
    max-width: 1000%;
}

.single-product div.product .images .flex-control-thumbs {
	margin-top: 26px;
}

.single-product div.product .images .flex-control-thumbs li {
	margin-right: 10px;
}

.single-product div.product .images .flex-control-thumbs li img {
	width: 100px;
}

.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}
 
.woocommerce-product-gallery figure {
margin: 0
}
 
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}
 
.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}
 
.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}
 
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}
 
.woocommerce-product-gallery img {
display: block
}
 
.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}
 
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}
 
.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}
 
.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}
 
a.woocommerce-product-gallery__trigger {
text-decoration: none;
}
 
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}
 
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;
}
 
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}
 
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: "\f00e";
line-height: 2;
text-indent: 0;
}

Thanks @llvasconcellos,

I found the topic as well today and this fixed my product image problems too! ?? Finally!!

More info here

Starred out a part of the css, as I prefer the zoom icon: (can also be removed as such)
/* .woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}

a.woocommerce-product-gallery__trigger {
text-decoration: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: “\f00e”;
line-height: 2;
text-indent: 0;
} */

I got the images to display correctly but for some reason the font size and font type is messed up with the product gallery.

any suggestions how to fix this? also i see the font awesome code in the suggested code but how do i apply that so that the magnifying glass is showing on the lightbox?

Please help

I’m still having multiple issues…my thumbnail photo in the shop are as large as the singlemimage size, no amount of regenerating will fix them. Secondly, my frint page lroduct sliders and exclusive products do not show products and my button links don’t work for the image. Pleae help, I’m new WordPress so I don’t know where to place code very well. I have fhe latest versions of WP and Shopisle.

https://www.bfrbcycling.com