Woo-commerce gallery images wrong size

Hi,

I have just update to the latest woocommerce and the product gallery images are massive stacked on top of each other. How do I get it back to normal? I have regenerated the images and checked the settings in WC, they are set at 180 x 180.

Many Thanks

Here is a link :

Link

Hi,

I may have an answer on this link at WooCommerce but I have no idea how to implement it

Woo Commerce

Here’s some more info:

Enabling product gallery features (zoom, swipe, lightbox) in 3.0.0
Claudio Sanches edited this page 21 days ago · 1 revision
Pages 28
Release Notes

2.6.x to 3.0.0 Developer Migration Notes
Enabling product gallery features (zoom, swipe, lightbox) in 3.0.0
CRUD & Data Descriptions

Database Description
CRUD Objects in 3.0
Order and Order Line Item Data
Coupon Data
Customer Data
Product Data
Data Stores
Internal APIs

Settings API
Payment Token API
Shipping Method API
CLI (Command line interface)

WC CLI Overview
WC CLI Commands
Examples / Guides

How Taxes Work in WooCommerce
Customising account page tabs
End-to-end Testing
Getting started with the REST API
Contribution / Guidelines

Our Git Flow
How to ensure SCSS and scripts are minified
CSS SASS coding guidelines and naming conventions
Core Testing Checklist
String localisation guidelines
Template File Guidelines for Devs and Theme Authors
Deprecation in core
Clone this wiki locally

https://github.com/woocommerce/woocommerce.wiki.git
Clone in Desktop
The new gallery introduced in 3.0.0 (read here for more information) uses Flexslider, Photowipe, and the jQuery Zoom plugin to offer swiping, lightboxes and other neat features.

This new gallery is off by default for custom and 3rd party themes since it’s common to disable the WooCommerce gallery and replace with your own. To enable the gallery, you can declare support like this

add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );
You do not have to support all 3; you can pick and choose. If a feature is not supported, the scripts will not be loaded and the gallery code will not execute on product pages.

I don’t have the exact same problem, but the appearance of my store is also weird since the WooCommerce update. Can anyone in support tell us when we can expect a theme update? I am getting an error message saying that some of my templates are out of date and incompatible with WooCommerce 3.0. This includes templates sydney-pro-ii/woocommerce/single-product\add-to-cart\grouped.php and
sydney-pro-ii/woocommerce/single-product\add-to-cart\simple.php .

If only I had logged into this before I updated WooCommerce. My gallery too is displaying incorrectly - basically every gallery image is full size, the thumbnail and gallery system is broken.

Hello there,

I am sorry for inconvenience. I can confirm that this is a known issue since WooCommerce did major changes in the WC 3.0. I reported this to our developer. We hope that it can be fixed ASAP. Please be patience.

Regards,
Kharis

Hi guys,

There should be a theme update available now that will handle the compatibility with the latest Woocommerce version.

Do we have a link as it shows “LAST UPDATE: Feb 22, 2017”

You don’t need to manually install it, just go to Appearance > Themes and you’ll see a notice to update, assuming you’ve activated your license key.

Hi Vlad,

The update through the site worked, however there are still some issues:

  1. The main product image does not show as the main picture. This is the image on the left of the gallery.
  2. If an image is clicked it opens but there no controls like < > or even a X to shut down the image. You have to hit “back” in the browser

Here is a link: link

Thanks
Stuart

Hi,

Clear the cache to handle the first point, from what I can see it looks fine. Use CTRL F5 if necessary.
We can add lightbox support in the theme but meanwhile you can add it yourself, I’ll show you after we clarify the first point.

Hi,

Yes the Ctrl F5 worked, just need lightbox to control opened images :slight_smile:

Thanks
Stuart

Okay,

  • install and activate this plugin;
  • create a new snippet and add this code in it: add_theme_support( 'wc-product-gallery-lightbox' );
  • from Scope, select Only run on site front-end and then click on Save changes and activate.

Hi,

Yes that worked! :slight_smile: One last issue. Is was running this css code to add a space between the gallery images, Im assuming this has changed?

/* Add image thumbnail spaces */
.single-product .images .thumbnails .owl-item {
padding: 3px;
}

Many Thanks
Stuart

Yeah, they changed the classes, that’s why our slider wasn’t working anymore.
Use this instead please:


.single-product .woocommerce-product-gallery__wrapper .owl-item > div {
    padding: 3px;
}

GENIUS! All sorted now.

Many Thanks
Stuart

Thanks!!

Hi, I tried to implement this in my shop. But it didn’t help. Can you check https://www.am-cycling.com/product/womens-violet-jersey/ and let me know what I did wrong?

Thanks in advice.