When a customer selects a specific variation on a product page—such as choosing a T-shirt in "Blue"—WooCommerce should instantly swap the main product gallery image to display the blue variant. However, a highly disruptive frontend bug often causes this swap to fail. The main image either becomes completely blank, gets stuck loading indefinitely, or switches back to the default parent product photo the moment the user clicks the "Add to Cart" button.

This visual breakdown is caused by an architectural desynchronization between third-party product gallery slider plugins and the core WooCommerce jQuery script (add-to-cart-variation.js). WooCommerce relies on specific HTML data attributes (data-o_src, data-o_title) to remember the original image before swapping it out. If your theme or gallery plugin customizes the image container without updating these core attributes, the JavaScript engine loses track of the image mapping array, crashing the frontend display.

The Solution

To fix disappearing variation images, you must force a script re-initialization and clean out legacy attachment transient data layers.

  1. Regenerate Product Image Transients: Navigate to WooCommerce > Status > Tools. Locate the Clear WooCommerce transients and Clear expired transients tools and run both to flush old pricing and image index maps.

  2. Force Theme Script Binding: If your theme uses an advanced gallery zoom layout that breaks standard selectors, add this lightweight jQuery fix to your theme's footer file to restore core attribute swapping:

JavaScript
 
jQuery(document).on('show_variation', function(event, variation) {
    if (variation && variation.image && variation.image.src) {
        jQuery('.wp-post-image').attr('src', variation.image.src).attr('srcset', variation.image.srcset);
    }
});
  1. Disable Lazy Loading on Galleries: Aggressive performance optimization layers (like Smush or WP Rocket) often delay image execution threads. Ensure your product page gallery images (.wp-post-image) are completely excluded from lazy loading algorithms.