Support » Plugin: WooCommerce » WooCommerce 3.0 – Product Images Broken

  • Resolved throwninstone

    (@throwninstone)


    Since the 3.0 update product gallery thumbnails have turned into large fullsize images. The theme is the latest version of Canvas.

    Also happens with mystile theme.

    • This topic was modified 2 years, 7 months ago by throwninstone.
Viewing 15 replies - 1 through 15 (of 24 total)
  • Plugin Author Mike Jolley

    (@mikejolley)

    This has been logged internally to be addressed in Canvas (https://github.com/woocommerce/canvas/issues/808 for my ref).

    You may want to check out Storefront – it’s way better IMO 🙂

    My Mystile theme is also acting like this. Is it better to resolve it yourself by code or wait for the themes update?

    Plugin Author Mike Jolley

    (@mikejolley)

    There is an issue logged for that theme also.

    I have problem with product images using storefront. There is no image displayed when click on image or zoom icon.
    This happened after update.
    Thanks

    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.

    Plugin Author Mike Jolley

    (@mikejolley)

    Latest storefront is compatible.

    Other themes see https://wordpress.org/support/topic/3-0-missing-gallery-functionality/

    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?

    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..

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

    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…

    Any luck with mystile?
    I am trying to figure this out without any knowledge, I see the code:
    .woocommerce-product-gallery–columns-x
    but not really sure where to replace what in mystile. Any ideas would help a lot!

    [EDIT!]
    Found the solution:
    add this to custom style sheet of your theme:
    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active, .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
    opacity: 1;
    }
    woocommerce.css?ver=4.7.3:1 .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
    opacity: .5;
    -webkit-transition: all, ease, .2s;
    -moz-transition: all, ease, .2s;
    transition: all, ease, .2s;
    }
    .single-product div.product .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, .single-product div.product .woocommerce-product-gallery {
    margin-bottom: 2.617924em;
    margin-top: 0
    }
    .single-product div.product .woocommerce-product-gallery {
    position: relative
    }
    .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;
    text-decoration: none;
    }
    .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;
    }
    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger img {
    display: none!important
    }
    .single-product div.product .woocommerce-product-gallery img {
    margin: 0
    }
    .single-product div.product .woocommerce-product-gallery .flex-viewport {
    margin-bottom: 1.618em
    }
    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
    margin: 0;
    padding: 0
    }
    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs:after, .single-product div.product .woocommerce-product-gallery .flex-control-thumbs:before {
    content: “”;
    display: table
    }
    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
    list-style: none;
    margin-bottom: 1.618em;
    cursor: pointer
    }
    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
    opacity: .5;
    -webkit-transition: all, ease, .2s;
    -moz-transition: all, ease, .2s;
    transition: all, ease, .2s
    }
    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active, .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
    opacity: 1
    }
    .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery–columns-2 .flex-control-thumbs li {
    width: 42.8571428571%;
    float: left;
    margin-right: 14.2857142857%;
    }
    .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery–columns-2 .flex-control-thumbs li:nth-child(2n) {
    margin-right: 0
    }
    .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery–columns-3 .flex-control-thumbs li {
    width: 23.8095238%;
    float: left;
    margin-right: 14.2857142857%;
    }
    .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery–columns-3 .flex-control-thumbs li:nth-child(3n) {
    margin-right: 0
    }
    .single-product div.product .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%;
    }
    .single-product div.product .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
    }

    source: https://wordpress.org/support/topic/css-to-fix-a-woocommerce-image-display-proble/#post-9004524

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

    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
    }

    Hi everyone,

    Just clarifying, both Canvas and Mystile are compatible, the versions that you need to have with the fixes in are:

    Canvas 5.11.4
    Mystile 1.3.19

    Thanks for reporting this!

    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

    I’m also experiencing the same issue with the ‘For The Cause’ theme. Anyone know if any updates will be happening for this one?

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘WooCommerce 3.0 – Product Images Broken’ is closed to new replies.