Product Gallery no longer displays for Variable Products

[jbeales]

Prerequisites (mark completed items with an [x]):

• I have have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug
A Variable Product with images in the Product Gallery, but not in the Product Image, or for individual variations, displays no images on the Single Product page.

Additionally, (maybe related - let me know if I should open a second ticket), if a Variation has an image it displays, but there is no magnification or lightbox option.

Expected behavior
Images that users set as part of the Product Gallery should be displayed in the Product Gallery on the front-end.

Additionally, these images, and individual variation images, should have magnification and a lightbox if these features are enabled.

Actual behavior
After adding images to the Product Gallery of a Variable product and saving the product, the Product Page for that product shows the placeholder image for the gallery, and no gallery thumbnails appear so there is no way to view any images for the product despite having images in a gallery.

This used to be the behaviour. I don't know exactly when it went away, but I think around WC 4.3.

Steps to reproduce the bug (We need to be able to reproduce the bug in order to fix it.)
Steps to reproduce the bug:

1. Create a new Variable product
2. Create a couple of variations with no images.
3. Add images to the Product Gallery, (on the right side of the Edit Product screen).
4. Save the product.
5. View the product on the front end. Note that in the gallery there's only a placeholder image, and no way to view any other images.

Screenshots

The Product Gallery control for a test product for this image in the wp-admin:

The product page on the front end for the same product, (Storefront theme):

Isolating the problem (mark completed items with an [x]):

• [x ] I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

WordPress Environment

``` ` ### WordPress Environment ###

WordPress address (URL): http://wptest.loc
Site address (URL): http://wptest.loc
WC Version: 4.3.1
REST API Version: ✔ 1.0.10
WC Blocks Version: ✔ 2.7.2
Action Scheduler Version: ✔ 3.1.6
WC Admin Version: ✔ 1.3.1
Log Directory Writable: ✔
WP Version: 5.4.2
WP Multisite: –
WP Memory Limit: 2 GB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
External object cache: –

Server Environment

Server Info: Apache/2.4.41 (Unix) OpenSSL/1.1.1d
PHP Version: 7.3.10
PHP Post Max Size: 8 MB
PHP Time Limit: 300
PHP Max Input Vars: 1000
cURL Version: 7.66.0
OpenSSL/1.1.1d

SUHOSIN Installed: –
MySQL Version: 5.7.27
Max Upload Size: 2 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 4.3.1
WC Database Prefix: wp_
Total Database Size: 4.64MB
Database Data Size: 3.11MB
Database Index Size: 1.53MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 2.13MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 0.08MB + Index: 0.03MB + Engine InnoDB
wp_posts: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_bookings_availability: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_booking_relationships: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wpsc_also_bought: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_cart_contents: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_cart_item_meta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_checkout_forms: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wp_wpsc_claimed_stock: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_coupon_codes: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_currency_list: Data: 0.02MB + Index: 0.01MB + Engine MyISAM
wp_wpsc_download_status: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_meta: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wp_wpsc_product_rating: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_purchase_logs: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_purchase_meta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_region_tax: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_submited_form_data: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpsc_visitors: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wp_wpsc_visitor_meta: Data: 0.00MB + Index: 0.01MB + Engine MyISAM

Post Type Counts

attachment: 6
flamingo_contact: 2
page: 12
post: 4
product: 9
product_variation: 4
revision: 7
shop_coupon: 2
wpcf7_contact_form: 1

Security

Secure connection (HTTPS): ❌
Your store is not using HTTPS. Learn more about HTTPS and SSL Certificates.
Hide errors from visitors: ✔

Active Plugins (1)

WooCommerce: by Automattic – 4.3.1

Inactive Plugins (16)

Better Sold Out for WPEC: by John Beales – 0.1
Bookings Helper: by WooCommerce – 1.0.2 – Installed version not tested with active version of WooCommerce 4.3.1
Contact Form 7: by Takayuki Miyoshi – 5.2
Elementor: by Elementor.com – 2.9.14
Flamingo: by Takayuki Miyoshi – 2.2
Gallery Captions for WooCommerce: by John Beales – 1.1 – Installed version not tested with active version of WooCommerce 4.3.1
JB Widget Problems Demo: by John Beales – 1.0
JB woocommerce_single_product_image_html Demo: by John Beales – 1.0 – Installed version not tested with active version of WooCommerce 4.3.1
Porto Theme - Functionality: by P-Themes – 1.7.1
Variation Swatches for WooCommerce: by Emran Ahmed – 1.0.85 – Installed version not tested with active version of WooCommerce 4.3.1
Variation Swatches for WooCommerce - Pro: by Emran Ahmed – 1.0.54 – Installed version not tested with active version of WooCommerce 4.3.1
WooCommerce Additional Variation Images: by WooCommerce – 1.7.22 (update to version 1.7.23 is available) – Installed version not tested with active version of WooCommerce 4.3.1
WooCommerce Bookings: by Automattic – 1.13.3 (update to version 1.15.23 is available) – Installed version not tested with active version of WooCommerce 4.3.1
WooCommerce Services: by Automattic – 1.24.0 – Installed version not tested with active version of WooCommerce 4.3.1
WooCommerce Stripe Gateway: by WooCommerce – 4.5.0 – Installed version not tested with active version of WooCommerce 4.3.1
Woo Description on Radio Buttons demo: by John Beales – 1.0

Settings

API Enabled: ✔
Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: booking (booking)
external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: ✔

WC Pages

Shop base: #17 - /shop/
Cart: #18 - /cart/
Checkout: #19 - /checkout/
My account: #20 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Storefront
Version: 2.5.8
Author URL: https://woocommerce.com/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

Templates

Overrides: –

Action Scheduler

Complete: 7
Oldest: 2020-07-15 18:38:09 +0000
Newest: 2020-08-04 13:44:04 +0000

`

</details>

[juliaamosova]

Hi @jbeales,

Thank you for taking the time to report this bug, we really appreciate your help. I can reproduce it on my end.

I have a variable product without main product image and without variation images but with images added to the product gallery:

But no product gallery images are shown on the product page:

We won’t be able to include this fix in the upcoming release due to the lower priority of this issue compared to others reported. We’re going to add it to our backlog so we can include it in our planning for one of our future releases.

[juliaamosova]

Additionally, (maybe related - let me know if I should open a second ticket), if a Variation has an image it displays, but there is no magnification or lightbox option.

@jbeales thanks for this as well. Would you please indeed open a separate issue for that as it seems different and will need to be fixed separately.

[jbeales]

I did some more testing to prep a second ticket found out more:

• this isn't confined to Variable products. It looks like any product with gallery images but no Product image has this problem, (only the placeholder image is displayed).
• If the Product image is added everything works as expected, including the Zoom & Lightbox on Variation images. I suspect that most of the gallery functionality is simply not initialized without a Product image. I'll still open the second ticket, but I suspect that fixing this will fix it as well.

[juliaamosova]

Changing the priority to high on this issue as it affects the basic functionality of WooCommerce.

[jbeales]

I guess the question is "what should happen if there is no Product Image, but there are images in the gallery?"

I think that the first image in the gallery was displayed, but I'm not 100% sure.

[vinodglobalstep]

Hi @jbeales,

Thank you for taking the time to report this bug, we really appreciate your help. I can reproduce it on my end using WooCommerce 5.6 version.

Here are the Screenshots :

[Hudcatt]

@jbeales thanks for your well worded review of the issue, made it easy to find on Google.

@juliaamosova

I am experiencing the same issue with the product gallery, although with slight differences:

1. My product was previously setup as a Simple Product, changed to a Variable Product recently.
2. The Simple Product had a main product image and a few product gallery images before this change. These still work after the change to Variable Product.
3. Once changed to Variable Product though, newly uploaded product gallery images don't work. I can see the images in the admin section but not on the front end.

Any news on a fix yet?

[shameemreza]

I followed the steps mentioned by @Hudcatt on this thread to test the issue:

• Create a new Variable product
• Create a couple of variations with no images.
• Add images to the Product Gallery.
• Save the product.
• View the product on the front end. In the gallery, there's only a placeholder image and no way to view any other images.

Here is my product setup with no product image:

And here is the preview:

Later, I added a product image, and the product gallery started to show:

Preview:

I recommend @Hudcatt to try this workaround.

[anastas10s-afk]

6600783-zen

[sunyatasattva]

This issue can still be reproduced, we are going to tackle it very soon, but we removed the priority: high label as this is not critical and has workarounds.

@Hudcatt we weren't able to reproduce point 3 in your message:

Once changed to Variable Product though, newly uploaded product gallery images don't work. I can see the images in the admin section but not on the front end.

That would be a separate issue, however. Can you still reproduce that? If so, feel free to open a new issue with that.

[Aljullu]

I was able to reproduce this as well and, as mentioned in #27222 (comment), it's not specific to Variable products, it can also be reproduced in Simple Products with images in the Product gallery but no Product image: the gallery images don't render.

This is reproducible in all classic themes and block themes using the Product (Classic) and Product Image Gallery block. However, it seems to be fixed in the Product Gallery (Beta) block, which is the new block we are planning to introduce:

Having said that, I can't see a use case for defining Product gallery images but not defining a main Product image. The Product image is important because it's the image used in the Product Catalog, Cart, Checkout, etc. In fact, the new Product editor which is being worked on doesn't allow defining Product gallery images without having a Product image (which in the new editor is called Cover):

tl;dr

Based on all of this, I would say it's better not to do anything here. I don't think WooCommerce should support having Product gallery images without a main Product image. That's an edge case that will no longer be possible to achieve in the new Product editor. Even if we agreed that's a use case we need to support, it looks like the new Product Gallery (Beta) block already supports it accidentally.

Please let me know if you think I missed something or you don't agree with my points, there might be use cases I'm not aware of. 🙂 Otherwise, I would go ahead closing this issue in the following days.

[sunyatasattva]

Thanks @Aljullu for the added context about the new Product Editor, I wasn't aware of that. In this case, I fully agree with you that we can mark this as a wontfix.

Ideally, I'd love to give the original commenters of this issue an extra couple of weeks to read the thread and provide us with their use-case, as I was reading someone (I don't remember where, I can't find it) mentioning that their entire store works on variations without cover images.

Like you, I don't see the reason for this, or as a use-case to support, but perhaps we're missing something important, so I propose to give it a couple of weeks for further comments.

cc @jbeales @Hudcatt @shameemreza

[shameemreza]

I don't think WooCommerce should support having Product gallery images without a main Product image.

Yes, I agree with @Aljullu. It's better not to support having product gallery images without a main product image.

[sunyatasattva]

Alright, then. Grace time is over :) thank you everyone for your input and research.