Home Forums WoodMart support forum Variable Products Layout and Image Stacking Issues After WooCommerce 7.0 Update

Variable Products Layout and Image Stacking Issues After WooCommerce 7.0 Update

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #720087

    beauty.cloud31
    Participant

    Hello XTemos Support Team,

    I am experiencing two layout issues with variable products on my WoodMart store, which seem to have started after updating WooCommerce to the latest version (7.0).

    Issue 1: Variation Images Stacking
    Instead of displaying a single main product image that changes only when a customer selects a specific variation, all variation images are now loading and stacking vertically on the product page at the same time. I will attach a screenshot showing this.

    Issue 2: Dropdown Misplacement (When No Variation Images Exist)
    For variable products where I haven’t assigned specific images to the variations, the layout breaks. The variation selection dropdowns and options are displaying out of place, appearing at the top and outside the designated product summary/add-to-cart box. I will attach a screenshot for this as well.

    Could you please check if this is a known compatibility issue with the new WooCommerce update, or guide me on how to fix this layout glitch?

    I have attached screenshots to illustrate both issues perfectly.

    Thank you,

    #720128

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site, and then check the issue. I am sure your issue will be solved. Then, activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

    Otherwise, if the issue still exists, then keep the 3rd party plugins deactivated and share the WP admin login details of your site so I can check and give you a possible solution.

    Best Regards

    #720134

    beauty.cloud31
    Participant

    Hi Aizaz,

    To be honest, I would much prefer if you could log in and investigate this directly. I haven’t changed any settings or added new plugins recently, so I’m quite surprised this layout issue suddenly appeared.

    Since the store is currently live and actively receiving customers, I am very hesitant to start deactivating plugins myself. I don’t want to risk breaking the site or disrupting the shopping experience for our visitors.

    As you are the expert, I believe it’s much safer for you to access the backend, find the root cause, and safely apply the fix. I have already set up an admin account for your team.

    Thank you for your understanding and support.

    Best regards,

    #720154

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Thank you for your patience.

    I have further investigated the issue and noticed that you are using a custom Single Product Layout and have customized the product page using Elementor. I can also see that some widgets/elements are configured to be hidden on specific devices.

    As a first troubleshooting step, please temporarily disable the custom Single Product Layout and check the product page using the default WoodMart single product layout.

    This will help us determine whether the issue is coming from the custom Elementor layout or from the theme/WooCommerce itself. In most cases, layout issues such as stacked variation images or misplaced variation dropdowns are caused by customizations within the Single Product Layout rather than by WooCommerce updates.

    Please test this and let us know the results.

    Best Regards

    #720178

    beauty.cloud31
    Participant

    Hi Aizaz,

    I understand your point, but I noticed something very important. When I open the Custom Single Product Layout inside the Elementor editor, the variation swatches and images appear perfectly normal, small, and well-aligned (I have attached screenshots from inside the editor to show you this).

    The layout only breaks and images stack huge on the live frontend. This leads me to believe the issue might be a JavaScript/CSS conflict between the new WooCommerce update and WoodMart’s core settings, rather than the Elementor layout itself, since the editor renders the structure correctly.

    As I mentioned, the site is live and receiving traffic. Since you now have admin access, could you please safely run this troubleshooting step yourself (temporarily disable the custom layout) to test the theory and isolate the conflict?

    Please feel free to test it and apply the necessary patch. Let me know what you find.

    Best regards,

    Attachments:
    You must be logged in to view attached files.
    #720249

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    To investigate this properly without affecting your live website. Please try to create a Staging platform where you can test issues, enable/disable features/plugins, thus such changes will affect the main site. Also, share the WP login details of the staging site so I can further check on your staging site and troubleshoot the issue.

    The article below will help you to create it: https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

    Best Regards

Viewing 6 posts - 1 through 6 (of 6 total)