WoodMart + Elementor: Frontend Broken

Hello,

I purchased WoodMart today, specifically to build a WooCommerce store with Elementor, and after spending almost the entire day troubleshooting I am extremely frustrated.

The problem is simple to describe but apparently very difficult to solve:

Everything looks correct inside Elementor, but after publishing the page, the frontend does not match the Elementor editor.

This is not limited to one small styling detail.

The biggest problem appeared with the WoodMart Products / Product Loop / Bestseller section.

Inside Elementor the product cards look completely correct. Images, badges, prices, buttons, spacing and positioning are exactly as they should be.

After publishing the page, the product cards completely fall apart. Among other things, the second product image was displayed below the main image instead of being used as the hover image, badges such as “HOT” and discount percentages lost their correct positioning, spacing changed and the whole product grid looked completely different from Elementor.

After many hours of troubleshooting I finally discovered one important thing:

Disabling “Hover Image” in WoodMart → Theme Settings → Product Archive → Product Loop fixes the broken product cards.

So the Hover Image / Product Loop functionality is clearly involved in at least part of the problem.

Unfortunately, that is not the end of it.

Other normal Elementor sections are also displayed differently after publishing. For example, sections containing an image and text have different proportions, widths, spacing and positioning on the live frontend compared with what I see directly in Elementor.

I have searched your support forum extensively and tested practically every relevant solution I could find.

So far I have tested all of the following:

Disabled all additional WordPress plugins to rule out plugin conflicts.
Tested the site with essentially only the required WoodMart / Elementor / WooCommerce components active.
Completely disabled LiteSpeed Cache. It had already been disabled for a long time during testing, so LiteSpeed is not causing the issue.
Cleared cache repeatedly.
Tested the page without CSS/cache optimization.
Cleared browser cache and tested the frontend again.
Tested the website in a fresh/private browser session.
Checked the frontend at 100% browser zoom.
Used Elementor → Tools → Clear Files & Data / regenerate generated Elementor files and CSS.
Re-saved WoodMart Theme Settings to force WoodMart to regenerate/reload its settings.
Checked WoodMart → Theme Settings → Product Archive → Product Loop.
Checked WoodMart → Theme Settings → Product Archive → Product Grid.
Tested different Product Loop settings.
Tested the product layout with Hover Image enabled and disabled.
Confirmed that disabling Hover Image immediately fixes the broken/duplicated product image layout.
Went to WoodMart → Performance → CSS.
Added Product Loop manually to “Styles always load” to force WoodMart to load the Product Loop CSS on the frontend.
Cleared everything again after forcing Product Loop CSS.
This made no difference.
Checked Elementor’s CSS output method.
Tested Elementor with CSS Print Method / CSS Output set to External File.
Then changed it to Internal Embedding.
Cleared Elementor files/data again after changing this setting.
There was no difference between External File and Internal Embedding — the frontend was still wrong.
Changed the page layout from the WoodMart/theme layout to Elementor Full Width.
Published and tested the frontend again.
This also made no difference.
In WoodMart I then disabled “Align Elementor content with the site container”, because your documentation indicates that this can affect Elementor Full Width layouts.
Tested again with Elementor Full Width + WoodMart Elementor container alignment disabled.
Again, no difference.
Checked whether the issue could simply be caused by responsive breakpoints or browser scaling.
Tested at 100% zoom and with the browser window maximized.
Again, no difference.
I also searched numerous existing topics on the XTemos/WoodMart support forum concerning Elementor layouts that look correct inside the editor but break after publishing.

At this stage I have spent hours eliminating the obvious causes one by one.

This is therefore not simply a LiteSpeed Cache problem, not an obvious third-party plugin conflict, not Elementor generated CSS, not the Elementor CSS output method, not Elementor Full Width, and not simply the WoodMart site-container alignment setting.

The most concrete reproducible finding I have is:

WoodMart Product Loop + Hover Image ON = product layout breaks on the published frontend.

WoodMart Product Loop + Hover Image OFF = product layout becomes correct.

However, even with Hover Image disabled, I am still seeing differences between Elementor and the published frontend in other sections of the page.

I purchased WoodMart today. I understand that WordPress, WooCommerce and Elementor constantly evolve and compatibility problems can occasionally happen, but this is not what I expected immediately after purchasing a premium theme.

I have already spent more time debugging why WoodMart does not reproduce the Elementor layout correctly on the frontend than actually building the store.

Please do not reply only with:

“Disable all plugins, clear cache and regenerate CSS.”

I have already done all of that, multiple times.

I need someone from the WoodMart team to actually investigate the frontend and determine:

1. Why enabling Product Loop Hover Image causes the second product image and other product elements to lose their proper styling/positioning on the frontend.

2. Why Elementor sections that look correct in the editor are still rendered with different dimensions/spacing/positioning after publishing.

If necessary, I can provide screenshots showing the Elementor editor versus the published frontend, because the difference is immediately visible.

I purchased the theme today and I would like either a concrete technical solution or, if this cannot be resolved, information about obtaining a refund.

At the moment I simply cannot reliably build a store when the layout I create inside Elementor is not the layout that appears after clicking Publish.

Thank you.

Hi there,

Thanks for the detailed report. Although you had already tested without plugins, we checked the installed plugins and noticed the BeyondSEO plugin had not been included in the previous tests.

When this plugin was temporarily disabled, the Elementor frontend layout started displaying correctly. This indicates a compatibility conflict with BeyondSEO. The plugin is not widely used and has not been tested with Elementor.

Please check how the Elementor pages and Product Loop work with BeyondSEO disabled. In particular, verify whether the hover image and the frontend section layouts now match the editor.

Kind regards,
XTemos Studio

From the very beginning, I had problems with Elementor loading properly. At first, I discovered that disabling the Yoast SEO plugin helped, which is why I later switched to BeyondSEO.

Now, after your intervention and disabling BeyondSEO, everything finally seems to be working correctly. Interestingly, I installed Yoast SEO again and, surprisingly, everything is now working properly with it as well.

I spent many hours today trying to find the cause of the problem, so I really appreciate your help and the fact that you took the time to check it properly.

I will continue testing everything tomorrow to make sure the issue is fully resolved. For today, I think my brain and eyes have had enough.

Once again, thank you very much for your help.

Hi there,

You’re very welcome. We’re glad the issue has been identified and that the frontend is now displaying correctly.

Yoast SEO should work properly with WoodMart and Elementor, so you should not experience the same conflict with it. Please continue your testing when convenient.

Kind regards,
XTemos Studio

[Author]

Posts