Problem with post-upgrade gallery

  • Hi, After update Woorommerce I have a lot of problems with the gallery and displaying products on the card. Previously I used versions 2.6.9 and everything worked well.

    My problem is the incorrect code in the product-thumbnails.php and product-image.php templates. Previously everything was like this ( photos displayed in lightbox ):

    Correct action

    <div class="images">
	<a href="wp-content/uploads/2017/04/image.jpg" itemprop="image" class="woocommerce-main-image zoom" title="" data-rel="prettyPhoto[product-gallery]"><img width="558" height="600" src="2017/04/image-558x600.jpg" class="attachment-shop_single size-shop_single wp-post-image" alt="image_10" title="image_10" srcset="wp-content/uploads/2017/04/image.jpg 558w, wp-content/uploads/2017/02/image_10-279x300.jpg 279w" sizes="(max-width: 558px) 100vw, 558px"></a>	

<div class="thumbnails columns-3"><a href="wp-content/uploads/2017/02/image_10.jpg" class="zoom first" title="" data-rel="prettyPhoto[product-gallery]"><img width="180" height="180" src="wp-content/uploads/2017/02/image_10-180x180.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="image_10" title="image_10" caption="" url="wp-content/uploads/2017/02/image_10.jpg" srcset="wp-content/uploads/2017/02/image_10-180x180.jpg 180w, wp-content/uploads/2017/02/image_10-150x150.jpg 150w, wp-content/uploads/2017/02/image_10-300x300.jpg 300w" sizes="(max-width: 180px) 100vw, 180px"></a><a href="wp-content/uploads/2017/04/image_34.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"><img width="180" height="180" src="/wp-content/uploads/2017/02/image_34-180x180.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="image_34" title="image_34" caption="" url="wp-content/uploads/2017/02/image_34.jpg" srcset="wp-content/uploads/2017/02/image_34-180x180.jpg 180w, wp-content/uploads/2017/02/image_34-150x150.jpg 150w, wp-content/uploads/2017/02/image_34-300x300.jpg 300w" sizes="(max-width: 180px) 100vw, 180px"></a><a href="wp-content/uploads/2017/02/image_31.jpg" class="zoom last" title="" data-rel="prettyPhoto[product-gallery]"><img width="180" height="180" src="wp-content/uploads/2017/02/image_31-180x180.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="image_31" title="image_31" caption="" url="wp-content/uploads/2017/02/image_31.jpg" srcset="wp-content/uploads/2017/02/image_31-180x180.jpg 180w, wp-content/uploads/2017/02/image_31-150x150.jpg 150w, wp-content/uploads/2017/02/image_31-300x300.jpg 300w" sizes="(max-width: 180px) 100vw, 180px"></a></div>
	</div>

    Now, after updating: columns is broken, images are not displayed in lightbox and as a new subpage.

    Incorrect action

    				<div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 1; transition: opacity 0.25s ease-in-out;">
	<figure class="woocommerce-product-gallery__wrapper">
		<div data-thumb="wp-content/uploads/2017/04/image-180x180.jpg" class="woocommerce-product-gallery__image"><a href="wp-content/uploads/2017/04/image.jpg"><img width="558" height="600" src="wp-content/uploads/2017/04/image-558x600.jpg" class="attachment-shop_single size-shop_single wp-post-image" alt="" title="" data-src="wp-content/uploads/2017/04/image.jpg" data-large_image="wp-content/uploads/2017/04/image.jpg" data-large_image_width="558" data-large_image_height="600" srcset="wp-content/uploads/2017/04/image.jpg 558w, wp-content/uploads/2017/04/image-279x300.jpg 279w" sizes="(max-width: 558px) 100vw, 558px"></a></div><div data-thumb="wp-content/uploads/2017/04/image-180x180.jpg" class="woocommerce-product-gallery__image"><a href="wp-content/uploads/2017/04/image.jpg"><img width="558" height="600" src="wp-content/uploads/2017/04/image-558x600.jpg" class="attachment-shop_single size-shop_single" alt="" title="" data-src="wp-content/uploads/2017/04/image.jpg" data-large_image="wp-content/uploads/2017/04/image.jpg" data-large_image_width="558" data-large_image_height="600" srcset="wp-content/uploads/2017/04/image.jpg 558w, wp-content/uploads/2017/04/image-279x300.jpg 279w" sizes="(max-width: 558px) 100vw, 558px"></a></div><div data-thumb="wp-content/uploads/2017/04/image_34-180x180.jpg" class="woocommerce-product-gallery__image"><a href="wp-content/uploads/2017/04/image_34.jpg"><img width="558" height="600" src="wp-content/uploads/2017/04/image_34-558x600.jpg" class="attachment-shop_single size-shop_single" alt="" title="" data-src="wp-content/uploads/2017/04/image_34.jpg" data-large_image="wp-content/uploads/2017/04/image_34.jpg" data-large_image_width="558" data-large_image_height="600" srcset="wp-content/uploads/2017/04/image_34.jpg 558w, wp-content/uploads/2017/04/image_34-279x300.jpg 279w" sizes="(max-width: 558px) 100vw, 558px"></a></div><div data-thumb="wp-content/uploads/2017/04/image_31-180x180.jpg" class="woocommerce-product-gallery__image"><a href="wp-content/uploads/2017/04/image_31.jpg"><img width="558" height="600" src="wp-content/uploads/2017/04/image_31-558x600.jpg" class="attachment-shop_single size-shop_single" alt="" title="" data-src="wp-content/uploads/2017/04/image_31.jpg" data-large_image="wp-content/uploads/2017/04/image_31.jpg" data-large_image_width="558" data-large_image_height="600" srcset="wp-content/uploads/2017/04/image_31.jpg 558w, wp-content/uploads/2017/04/image_31-279x300.jpg 279w" sizes="(max-width: 558px) 100vw, 558px"></a></div>	</figure>
</div>
		</div>

    I worked a bit in code and I managed to restore the layout. Gallery still does not work and miniatures are non-click.

    • This topic was modified 7 years, 11 months ago by Jon Doe.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Mike Jolley

    (@mikejolley)

    Changing the markup to the old markup is not a good idea. The new gallery has new markup, and needs to be enabled to function. https://github.com/woocommerce/woocommerce/wiki/Enabling-product-gallery-features-(zoom,-swipe,-lightbox)-in-3.0.0

    Thread Starter Jon Doe

    (@kbdrwnk)

    I tried it, the gallery functions, but it did not solve my problems. Maybe the correct changes in the code would solve this.

    After adding the code to the functions.php file, lightbox opened with use magnifier icon, which is next to the image. However, this has not returned the layout page

    How did I get the code correct so that everything worked as before with the new versions?

    Thread Starter Jon Doe

    (@kbdrwnk)

    Ok, I did downgrade to the previous version 2.6x. Everything worked as before and it is probably a better solution. There is currently one problem, the icon cart has disappeared. The settings are all in order, after updating, it displays normally.

    I added the code to the console and it appears normal. It looks like its previous version is not showing, its code is also not visible. Any idea?

    Plugin Contributor Mike Jolley

    (@mikejolley)

    Cache.

    The new gallery has a lightbox etc but needs enabling. if your theme is not compatible yet maybe the author will release an update to address this.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Problem with post-upgrade gallery’ is closed to new replies.