Problem: The client experienced layout distortion on translated pages of their website, which uses Elementor and WPML. The issue was not caused by the iframe script used for embedding a contact form, as initially suspected, since similar distortion occurred on another contact page without the script.
Solution: We identified the problem as a known compatibility issue between WPML and Elementor V4 Atomic Global Classes. To resolve this, we recommended the following steps: 1. Add specific entries to the site’s XML configuration via WPML > Settings > Custom XML. The entries to add are:
3. After adding the configuration, follow these steps: - Back up the website and database. - Open the Default Kit in the primary language and make a small change, then save it. - Translate and update the Default Kit. - Run 'Clear Files & Data' or 'Regenerate CSS & Data' in Elementor → Tools. - Clear all WordPress, server, and browser caches. - Verify the affected page in the secondary language.
If this solution does not resolve the issue or seems irrelevant due to updates or different configurations, we recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If the problem persists, please open a new support ticket at WPML support forum.
Problem: If you're experiencing issues with JavaScript not functioning correctly on translated pages using the Elementor HTML widget, it might be due to WPML's Translation Editor not handling large JavaScript blocks well. This can result in modified or escaped scripts, causing them to stop working. Solution: We recommend moving the HTML and JavaScript code out of the Elementor HTML widget and registering it as a WordPress shortcode or a small custom plugin. Here's a step-by-step guide: 1. Add the following code to your theme's functions.php file:
function hotel_spider_form_shortcode() {<br /> ob_start();<br /> ?><br /> <!-- Place your complete HTML, CSS and JavaScript here --><br /> <?php<br /> return ob_get_clean();<br />}<br />add_shortcode( 'hotel_spider_form', 'hotel_spider_form_shortcode' );
2. Replace the full HTML and JavaScript in the Elementor HTML widget with the shortcode: [hotel_spider_form] This approach ensures that WPML only translates the page content, while the JavaScript is generated by WordPress and remains consistent across all languages. It also simplifies maintenance, as future changes only need to be applied in one place.
If this solution does not resolve your issue or seems outdated, please check the related known issues, verify the version of the permanent fix, and confirm that you have installed the latest versions of themes and plugins. If the problem persists, we highly recommend opening a new support ticket at WPML support forum.
Problem: If you're experiencing issues where WPML does not automatically detect text to translate within Elementor components, even after applying Custom XML Configuration and clearing cache. Solution: We recommend you first remove any existing Custom XML configurations by navigating to WordPress Dashboard > WPML > Settings > Custom XML Configuration (tab). Next, follow these steps: 1. Go to Dashboard > Pages and open the edit screen of the original page. 2. Make a minor edit, such as adding an extra space at the end of a paragraph. 3. Save the changes. You should see a circular arrow next to the language links, indicating that an update is required. 4. Re-edit the translation and ensure it is saved as 100% translated.
If this solution does not resolve your issue, or if it seems outdated or irrelevant to your case, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please open a new support ticket at WPML support forum.
