Skip Navigation

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client is experiencing several issues with WPML and Elementor on the Jupiter X theme, including critical errors when editing pages, pages displaying as empty or white, broken mobile views, and issues with the language switcher in Elementor.
Solution:
To resolve the critical errors and improve compatibility between WPML and Elementor, follow these steps:
1. Navigate to WPML > Settings > Custom XML Configuration tab and add the following XML code:

<wpml-config>
  <elementor-widgets>
    <widget name="raven-advanced-nav-menu">
      <fields-in-item items_of="menu">
        <field type="Menu text" editor_type="LINE">text</field>
        <field type="Menu link" editor_type="LINK">__dynamic__>link</field>
        <field type="Menu link" editor_type="LINK" key_of="__dynamic__">link</field>
      </fields-in-item>
    </widget>
  </elementor-widgets>
</wpml-config>

2. Update the header template by going to Templates > Edit Header template and clicking on Update.
3. To translate the template ID:
- On your site, navigate to WPML > String Translation, find "raven-advanced-nav-menu", and translate the section ID.
- On ATE, add the following PHP code to your theme's functions.php file:

add_filter( 'wpml_tm_job_field_is_translatable', '__return_true' );

Then, search for the menu template ID in ATE and translate it.

If this solution does not resolve your issues or seems outdated, 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 problems persist, please open a new support ticket at WPML support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 8 replies, has 2 voices.

Last updated by Long Nguyen 1 month, 1 week ago.

Assisted by: Long Nguyen.

Author Posts
September 30, 2024 at 8:30 am

nicoleR-11

Background of the issue:
I am using WPML with Elementor and the Jupiter X theme on my site hidden link. I am experiencing several issues when trying to edit pages and use WPML plugins.

Symptoms:
1. I cannot edit the pages due to a critical error. 2. Activating WPML plugins causes pages to be empty/white or show a critical error. 3. Mobile view of elements built with Elementor is broken. 4. Deactivating all WPML plugins except WPML Multilingual CMS makes pages visible but uneditable. 5. Deactivating WPML Multilingual CMS allows page editing. 6. The widget language switcher does not show French and cannot be added to the Advanced menu from Elementor.

Questions:
How can I resolve the critical error when editing pages with WPML and Elementor?
Why do pages become empty/white or show a critical error when WPML plugins are activated?
How can I fix the broken mobile view of Elementor elements?
Why does the widget language switcher not show French and cannot be added to the Advanced menu from Elementor?

September 30, 2024 at 10:34 am
October 1, 2024 at 1:22 am #16238063

Long Nguyen
Supporter

Languages: English (English )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Hi,

Here is the forum ticket. I've tried some steps to register the Elementor widget Advanced menu for translation and translated the menu ID in the Advanced Translation Editor but the translation menu doesn't display in the frontend.

It could be a compatibility issue between JupiterX and WPML, we will address that by reporting this to the compatibility team.

To be able to report the compatibility issue we need to replicate the issue on a clean installation. I created a clean installation of WordPress, WPML, and all necessary WPML add-ons. You can access the WordPress dashboard with this link
hidden link

Kindly follow the steps below:

- Don’t restore your site there.
- Install JupiterX and its addon plugins.
- Try to replicate the issue with minimal steps.
- Then let me know the steps to replicate it.

Looking forward to your reply.
Thanks

Advanced Translation Editor - WPML 2024-09-30 17-28-44.png
October 1, 2024 at 3:08 pm #16241514

nicoleR-11

Hi Long Nguyen

I installed Jupiter X on your sandbox. And the Jupiter X plugins. Then I imported the related templates for the mega menue and the content of the used Advanced tabs.

This are the steps:
1. I edited the Header in the Jupiter X with the Jupiter X Layout Builder --> Header, then filled in the Container "Advanced Header"
2. Then I created/imported a template for the mega menue --> "New template" --> Line Marking Machines Mega Menue and the template for "menue".
3. Then I edited the element "Advanced Menue" in the Header and chose the first menue item "Linemarking Machines". There I chose "item Type" = "submenue"/"Content type" = "Saved section"/
4. In the dashboard I clicked "Templates", then the plus sign for "Add translation to German" and added the German translation manually. Published.
5. I added the translation for the normal menue (not the saved section) to German.

Result: the normal menue is shown with german text, when I clicked the language switcher. The Megamenue as submenue does not.
I have the same issue on two other pages, where I used the Elementor Element "Advanced tab". So it probably depends on using "Advanced" Elements.

Megamenü.png
October 2, 2024 at 1:55 am #16243189

Long Nguyen
Supporter

Languages: English (English )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Hi,

I can translate the advanced menu on the sandbox site and show the translation on the frontend. Here are steps:

1. Go to WPML > Settings > Custom XML Configuration tab > Add the XML code below:

<wpml-config>
  <elementor-widgets>
    <widget name="raven-advanced-nav-menu">
      <fields-in-item items_of="menu">
        <field type="Menu text" editor_type="LINE">text</field>
        <field type="Menu link" editor_type="LINK" key_of="__dynamic__">link</field>
        <field type="Menu section template" editor_type="LINE">section_template</field>
        <field type="Menu widget template" editor_type="LINE">widget_template</field>
      </fields-in-item>
    </widget>
  </elementor-widgets>
</wpml-config>

2. Go to Templates > Edit Header template > Click on Update.

3.1. If you want to translate the template ID on your site, you can go to WPML > String Translation > Find the name "raven-advanced-nav-menu" and translate the section ID, which is 96 on the sandbox site.

3.2. If you want to translate the template ID on ATE, please add the PHP code below to the file functions.php in the theme/child theme folder

add_filter( 'wpml_tm_job_field_is_translatable', '__return_true' );

in ATE, search for the menu template ID and translate it. Please check the attached screenshots.

Looking forward to your reply.
Thanks

Screenshot 2024-10-02 at 08.47.47.png
Edit Template “DE Line marking machines Mega Menu” ‹ Sandbox — WordPress 2024-10-02 08-50-53.png
Advanced Translation Editor - WPML [Staging] 2024-10-02 08-47-00.png
October 2, 2024 at 7:28 am #16243590

nicoleR-11

Hi.
Thank you for your efforts. I have a few questions:
1. There is another code in the field

<wpml-config>
  <elementor-widgets>
    <widget name="raven-advanced-nav-menu">
      <fields-in-item items_of="menu">
        <field type="Menu text" editor_type="LINE">text</field>
        <field type="Menu link" editor_type="LINK">__dynamic__>link</field>
        <field type="Menu link" editor_type="LINK" key_of="__dynamic__">link</field>
      </fields-in-item>
    </widget>
  </elementor-widgets>
</wpml-config>

Do I have to overwrite the code or add it under the existing code?

2. Why should I translate the template ID on my site?
3. What is ATE? (I'm not a developer and I'm not familiar with coding).
4. Does this work with other Elements, too? The translation does not work with the Advanced Tab from Elementor, too.

Thanks and regards, Nicole

Advanced Tab.png
October 2, 2024 at 9:22 am #16244362

Long Nguyen
Supporter

Languages: English (English )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Hi,

1. Yes, you can use the code in my previous reply and replace it with the existing code on your site.

2. Because the advanced menu saves the template ID and displays it in the frontend.

3. It is Advanced Translation Editor https://wpml.org/documentation/translating-your-contents/advanced-translation-editor/

4. If you use the same widget Advanced menu, you can translate the template ID also.

Looking forward to your reply.
Thanks

October 2, 2024 at 10:47 am #16244920
nicoleR-11

Hi.
The solution for the mega menu did not work. I have replaced the code as described, updated the saved template "mega menue", but the mega menu is still not displayed translated.

My fourth question in the last chat was how do I do it with the Elementor widget ‘Advanced Tab’? With this Elementor widget, the translation is also not displayed.

Thanks for your help. Kind regards

New threads created by Long Nguyen and linked to this one are listed below:

https://wpml.org/forums/topic/how-to-translate-elementor-widget-advanced-tab-jupiterx/

CodeWPML.png
AdvancedTab.png
October 3, 2024 at 1:42 am #16247740

Long Nguyen
Supporter

Languages: English (English )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Hi,

I would like to request temporary access (wp-admin and FTP) to your site to take a better look at the issue. Your next reply is set to private to share the info.

❌ IMPORTANT: Please backup your database and website before proceeding ❌
You can use this plugin to create the backup: https://wordpress.org/plugins/duplicator/

Regarding the issue with Advanced tab widget, I will split this ticket into a new one for better handling.

Looking forward to your reply.
Thanks

October 3, 2024 at 7:36 am
October 3, 2024 at 9:50 am #16248796

Long Nguyen
Supporter

Languages: English (English )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Hi,

I don't see you add the PHP code to the file functions.php in the theme folder as noted in step 3.2 https://wpml.org/forums/topic/critical-error-and-responsive-mobile-view-issues-with-wpml/#post-16243189

So I translate the template ID in WPML > String translation, now you can see the translation menu template in the frontend.

Looking forward to your reply.
Thanks

Screenshot 2024-10-03 at 16.47.15 2024-10-03 16-47-35.png
String Translation ‹ Swozi 25 — WordPress 2024-10-03 16-46-45.jpg
October 3, 2024 at 2:22 pm #16250653

nicoleR-11

Thank you!!