WooCommerce 3.0 – Product Images Broken

Thank goodness there are others with this same issue with just a single image coming up and no thumbnails. I have it on Sommerce theme.

Glad to see it’s been logged.

Thanks.

when can we expect to see this going into themes such as mystile and canvas? I’ve enabled the product gallery features for mystile, but then the thumbnails still show up as blurry full images. zoom and slider seems to work alright, the zoom icon is way off though. could be a styling issue?

hope this can be updated from the official woocommerce (woothemes) channel soon?

Me too:

“I can add to the list of people where it broke down for canvas.
No more product image galleries just full images.
And adding theme support to Canvas does not help.
Canvas is seriously broken for Woo 3.0..”

Also…

1) Archive page now shows everything in the Product Short Description, which just looks ridiculous.
2) Custom Related Products for WooCommerce plugin can no longer turn off Related Products. There seems to be no control over this at all, and it makes a mockery of the the totally customizable Cross-sells and Upsells features.
3) Suddenly I have to use Firefox in order for the options on the Woocommerce Settings page to even be visible. Chrome has always worked just fine for that.
4) Who knows what else is broken?

How could you do this to Canvas? When WordPress bought Woo, it was exciting and promising. Now this…???

Please fix Canvas! It wasn’t broken…

A quick update on my tries to fix Canvas (until Woo comes out with an update)

So you need to add this to your function.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' );
}

You can disable the zoom theme support, but not the others! They need to be enabled.

Css Code for Canvas

You can adjust
– Size of thumbs (.woocommerce-product-gallery.woocommerce-product-gallery–columns-4)
— Adjust the margin and margin-right

– Opacity of thumbs (woocommerce-product-gallery .flex-control-thumbs li img)
– Color of zoom/magnify icon (.woocommerce-product-gallery .woocommerce-product-gallery__trigger:before)

.woocommerce-product-gallery .flex-control-thumbs li {
	list-style: none;
	margin-bottom: 1.618em;
	cursor: pointer;
}
.single-product .pswp__button {
	background-color: transparent
}
.single-product div.product {
	position: relative;
	overflow: hidden
}
.single-product div.product:after, .single-product div.product:before {
	content: "";
	display: table
}
.single-product div.product .images, .single-product div.product .summary, .woocommerce-product-gallery {
	margin-bottom: 2.617924em;
	margin-top: 0
}
.woocommerce-product-gallery {
	position: relative
}
/* Position of magnify icon */
.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;
	text-decoration: none;
}
/* Magnify icon */
.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;
	color:gray;
}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger img {
	display: none!important
}
.woocommerce-product-gallery img {
	margin: 0
}
.woocommerce-product-gallery .flex-viewport {
	margin-bottom: 1.618em
}
.woocommerce-product-gallery .flex-control-thumbs {
	margin: 0;
	padding: 0
}
.woocommerce-product-gallery .flex-control-thumbs:after, .woocommerce-product-gallery .flex-control-thumbs:before {
	content: "";
	display: table;
	clear:both;

}
.woocommerce-product-gallery .flex-control-thumbs li {
	list-style: none;
	margin-bottom: 1.618em;
	cursor: pointer
}
.woocommerce-product-gallery .flex-control-thumbs li img {
	/*opacity: .5;
	-webkit-transition: all, ease, .2s;
	-moz-transition: all, ease, .2s;
	transition: all, ease, .2s */
}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,  .woocommerce-product-gallery .flex-control-thumbs li:hover img {
	 opacity: 0.5;
}

.woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
	width: 42.8571428571%;
	float: left;
 	margin-right: 14.2857142857%;
}
.woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
	margin-right: 0
}
.woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
	width: 23.8095238%;
	float: left;
        margin-right: 14.2857142857%;
}
.woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
	margin-right: 0
}
.woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
	/*width: 14.2857142857%; */
	width: 18%;
	float: left;
	/*margin-right: 14.2857142857% */
	margin-right: 8.2857142857%; 
}
.woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
	margin-right: 0
}
.single-product div.product .images .woocommerce-main-image {
	margin-bottom: 1.618em;
	display: block
}
.single-product div.product .images .thumbnails a.zoom {
	display: block;
	width: 22.05%;
	margin-right: 3.8%;
	float: left;
	margin-bottom: 1em
}
.single-product div.product .images .thumbnails a.zoom.last {
	margin-right: 0
}

Automattic/woothemes has finally released an update to the Canvas theme (hopefully also other themes) to support the new gallery type in Woocommerce 3.0.
And many other bugs have been introduced (and solved again) in the current version 3.0.3.

A rocky start of a great plugin and from now on ALL UPDATES to woocommerce are labeled “Dangerous” by me !!! (Until woo has proven themselves again!!….) sick