Background of the issue:
I am trying to translate a WooCommerce product built with Elementor. In the French (FR) version, the custom layout and styles (Price Table background, ribbon color, fonts, container background) display correctly. However, in the German (DE), Italian (IT), English (EN), and Spanish (ES) versions, they revert to the default Elementor widget design. Link to a page where the issue can be seen: hidden link
Symptoms:
All translations lose the custom widget-level styling and display the default Elementor design. A previous ticket was closed with the assumption of a cache problem, but this is not the case. The comparative images provided clearly show the difference between FR and DE.
Questions:
Why do the DE/IT/EN/ES translations revert to the default Elementor widget design?
How can I ensure that the custom Elementor layout and styles are applied to all translations?
Hi,
Good news: I was able to re-open the last ticket that had been closed by mistake.
The problem is still the same:
- In FR the Elementor custom layout/styles are correct → hidden link
- In DE (and other secondary languages) the custom styles are lost, widgets/containers display with the default Elementor design → hidden link
I already tried all the steps suggested (global CSS, syncing, custom fields marked as Copy, re-saving translations, regenerating CSS, etc.), but the issue remains.
I have also created a temporary Administrator account — you’ll find the secure access link in the dedicated credentials field below.
Please investigate directly on the site and let me know how we can solve this.
Thanks,
I have attached the screenshots that I am seeing in both languages. I'm not seeing design elements that look different, but perhaps I'm just missing it because I'm not sure what to look for. Can you circle or highlight on these screenshots which sections are not showing up the same?
Hi Lauren,
To make it easier for you to see the issue, I have prepared a dedicated test page: hidden link
Simply switch the language:
- In FR you will see the correct colors and formatting.
- In the other languages the layout loses the custom styling (background colors, formatting, etc.).
I can give you a link to log in as an administrator on the production site.
Thanks, Yann
Pleae try dropping this in a (child) theme’s functions.php and let's see if it force-syncs Elementor design meta to every translation whenever the source template is saved. Load the frontend of our site. Then, you will need to update the TEMPLATE (not the page) in the original language - make any small change and save it. Then update the translation. Here's the code to paste:
/**
* Force-sync Elementor design meta from source template to all translations on save.
* Works for elementor_library (Theme Builder templates). Keeps text editable in translations.
* Add to child theme functions.php
*/
add_action('save_post_elementor_library', function ($post_id, $post, $update) {
if (wp_is_post_revision($post_id) || !$update || 'publish' !== $post->post_status) return;
// Get WPML language/trid details
$details = apply_filters('wpml_post_language_details', null, $post_id);
if (empty($details) || empty($details['trid'])) return;
// Only push from the source language (adjust if you use a different "source")
$default_lang = apply_filters('wpml_default_language', null);
if ($details['language_code'] !== $default_lang) return;
$trid = $details['trid'];
$translations = apply_filters('wpml_get_element_translations', null, $trid, 'post_elementor_library');
// Meta keys that carry Elementor design & per-template settings
$meta_keys = [
'_elementor_data',
'_elementor_page_settings',
'_elementor_edit_mode',
'_elementor_template_type',
'_elementor_default_status',
'_elementor_version',
'_wp_page_template',
];
foreach ($translations as $lang => $t) {
if ((int)$t->element_id === (int)$post_id) continue; // skip source
foreach ($meta_keys as $k) {
$val = get_post_meta($post_id, $k, true);
if ($val !== '') {
update_post_meta($t->element_id, $k, $val);
} else {
delete_post_meta($t->element_id, $k);
}
}
// Clear Elementor CSS for the translated template so it rebuilds with new JSON
delete_post_meta($t->element_id, '_elementor_css');
}
// Global cache flush for Elementor CSS files (optional but handy)
if (class_exists('\Elementor\Plugin')) {
try { \Elementor\Plugin::$instance->files_manager->clear_cache(); } catch (\Throwable $e) {}
}
}, 20, 3);
Hi Lauren,
I added the snippet to my child theme and followed the procedure exactly (edited and saved the template in the source language, then updated the translations).
Unfortunately, nothing has changed and the issue remains the same. You can verify this directly on the test page here: hidden link
In FR the layout and colors are correct, while in the other languages the custom styles are still missing.
What do you suggest as the next step?
Thanks,