Product Gallery Images Appear Behind Main Product Image

  • Resolved jrothra

    (@jrothra)


    4 years, 5 months ago

    Problem Summary
    The problem is with products that have a main product image as well as images in the product gallery. When viewing a product archive/gallery, you can see both the main image and one of the gallery images on top of each other. Hovering over the image hides the main image and displays the gallery image underneath.

    When there is only a main image and no gallery image, the product image is smaller and does not change when you hover over it.

    Video Capture of the Problem
    Screen Shot of Single Product with Gallery Image

    In this video, you can see first that one MP3 has a larger image and, when I hover over it, you see a different image. All my MP3 images are exactly the same dimensions and image type (600×600 jpg). In the one that is larger and changes, I added a different (and unrelated) image in the product gallery (see screen shot linked above).

    Next in the video, you can see that, in the case of the cups, there are two handles visible. The cups come in two different sizes (11 oz and 15 oz), so I use the gallery in that case.

    The product gallery/archive should show only the main product image, even when hovering. The gallery images should appear only on the single product page.

    Attempted Solutions
    1. Updated to latest version of WordPress, theme, and all plugins
    2. Deactivate all plugins except WooCommerce and Elementor
    Note: All my WC pages are built using Elementor Pro, so deactivating it kills the site and you can’t see the product gallery.
    3. Switch themes to Twenty Twenty
    4. Clear all caches (site, browser, etc.)

    Results: problem persisted in each case.

    At this point I’m not sure what’s causing it or how to fix it.

    • This topic was modified 4 years, 5 months ago by jrothra. Reason: Make title clearer

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • laceyrod

    (@laceyrod)

    Automattic Happiness Engineer

    Hi there,

    Thanks for reaching out! I’ve taken a look at the video you provided, and I can definitely see the behavior you’re describing. Very odd!

    It seems you have taken all of the steps we would typically recommend in this case by testing for conflicts. Because the problem remains with just WooCommerce and Elementor active and you depend on Elementor for the structuring of your pages, I would actually recommend reaching out to them directly to see if there’s anything at play with their page builder. This isn’t something we can reproduce on a default install with just Twenty Twenty and WooCommerce active, so I wouldn’t be surprised if something was going on with the Elementor plugin causing this behavior.

    Please reach out to their team directly and hopefully they’ll get you pointed in the right direction!

    Thread Starter jrothra

    (@jrothra)

    If I get a solution from Elementor, I’ll post it here in case others also have this problem.

    Thread Starter jrothra

    (@jrothra)

    Talked to Elementor support and this was the solution:

    Go to the WooCommerce settings in Customizer and change the product style and image display settings:

    Appearance > Customize > WooCommerce > Archives
    Set “Products Style” to “Default”
    Set “Product Entry Media” to “Featured Image”

    For me, the style was already set at Default, but the Media was set to Hover. I changed it and it fixed the problem!

    Hello, I have a similar problem as jrotha originally:

    “When viewing a product archive/gallery, you can see both the main image and one of the gallery images on top of each other. Hovering over the image hides the main image and displays the gallery image underneath.”

    This is especially problematic in the mobile version. I also went through all the trouble-shooting steps as descirbed by jrotha, including

    Appearance > Customize > WooCommerce > Archives
    Set “Products Style” to “Default”
    Set “Product Entry Media” to “Featured Image”

    However, this did not change anything and the problem still persists. Is there any other approach how to solve this problem?

    Thank you very much in advance!

    laceyrod

    (@laceyrod)

    Automattic Happiness Engineer

    Hi @mmmn –

    Are you also using Elementor?

    If so, please reach out to their team for a closer look.

    If your problem exists with just a default theme and WooCommerce core, please open a new thread so we can take a look there.

    Cheers.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Product Gallery Images Appear Behind Main Product Image’ is closed to new replies.