Editor vs. Live Site Mismatch (Global Styles Overriding Elementor in Layouts)

Hello WoodMart Support Team,

I am experiencing a persistent “What You See Is What You Get” (WYSIWYG) issue where the Elementor editor preview does not match the final, live front-end of the site. I hope you can help me find the correct setting to resolve this.

Important Context:
I am using your Layouts feature to build a custom single product page template. All the design work is being done with Elementor inside this layout.

The problem manifests in several ways, all pointing to a style conflict:

1. Global Background Color Isn’t Previewed in Editor:

I have set a global page background color in WoodMart > Theme Settings. This color appears correctly on my live website.

The issue: When I edit my layout with Elementor, the editor canvas shows a plain white background. It does not preview the global background color from the theme settings, which makes accurate designing difficult.

2. Elementor Widget Styles are Broken on the Live Site:

Audio Player Example: I added a standard Audio Player widget. In the editor, its style is modern and looks perfect. On the live page, it flashes the correct style for a second, then “jumps” to an inconsistent, broken black style.

Google Pay Button Example: I have also noticed that the Google Pay express checkout button (below the “Add to Cart” button) on the live product page is also styled with the same black background. This matches the broken style of the audio player.

My Conclusion & Goal:
These issues strongly suggest that a single global theme style (likely for buttons and media elements) is overriding both Elementor’s styles and other plugins’ default styles on the front-end.

My goal is to achieve a consistent design experience. Specifically:

For the background, I want the Elementor editor to accurately preview the global style from WoodMart.

For widgets like the player, I want the live site to display the correct style that I see in the Elementor editor.

My Question:
What is the recommended method in WoodMart to resolve these inconsistencies? Is there a global setting (e.g., for Buttons or Media styling) that I need to adjust, or a setting within the Layouts builder itself to ensure Elementor’s styles are prioritized for the content area?

For troubleshooting, I have already cleared all caches multiple times and regenerated Elementor’s files. The problem persists.

Thank you for your excellent theme and support.

Best regards,

Attachments:

You must be logged in to view attached files.

Hi reneersloan,

Thanks for reaching to us and appreciate your patience.

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Regards,
Hung PD

Hi Hung,

Thank you so much for looking into this for me.

Hi Hung,

I am writing to provide an urgent update. A new, more critical issue has appeared: the Elementor editor is failing to load on some specific pages, but not all of them.

Here is what I have found:

Some of my existing pages (for example, my simple policy pages) can still be edited correctly.

However, the editor will not load for other important pages, most notably my main Shop page.

Furthermore, if I try to create a brand new page, the editor also fails to load for it.

I have tested this using Elementor’s “Safe Mode”, and the editor loads correctly in all cases when in Safe Mode. This strongly suggests a theme or plugin conflict that specifically affects archive or new page templates.

Since you already have temporary admin access, could you please also diagnose this new, more urgent Elementor loading problem? This has become a high-priority issue.

Thank you for your understanding and expert help on both matters.

Hi reneersloan,

You cannot edit the WooCommerce pages directly with any page builders.

– You can go to Dashboard > Theme Settings > Product archive and there you can find options related to WooCommerce pages.

– You are also can use Custom WooCommerce Builder to rebuild WooCommerce pages, please refer to documentation https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Regards,
Hung PD

[Author]

Posts