Skip Navigation
Updated
October 4, 2023

The Multilingual Tools plugin includes a WPML – Config Generator for Elementor. You can add any custom Elementor widgets you want to register for translation to a page. The tool then automatically generates the first version of XML code for these custom widgets.

This tool is intended for developers. You should only use the WPML – Config Generator for Elementor as a starting point.

Before making the code available to end users, manually review and test it. This tool generates XML code for all the fields in the widget. Make sure to remove fields that should not be translated or modified by users, for example, configuration fields and fields with boolean values. These types of fields should not be registered for translation, as translating them may cause errors for end users.

Getting Started

To get started, download the Multilingual Tools plugin from the OnTheGoSystems GitHub page. 

Make sure you have the WPML Multilingual CMS core plugin and WPML String Translation add-on installed and activated in your site.

How It Works

When you create a page using the Elementor page builder, all the content gets saved in the _elementor_data custom field.

Once you add the custom widgets you want to register for translation to a page, WPML – Config Generator for Elementor accesses this _elementor_data field to read its contents. After reading, it converts the data into XML code that corresponds to the custom widgets you’ve used on your page.

Important: For this plugin feature to work correctly, you need to set up every available option in the custom widget while designing your page.

If you don’t fill in a field or enable an option in the widget, the  _elementor_data field won’t have that information. As a result, WPML – Config Generator for Elementor won’t generate the XML code for the unconfigured field or option.

Using WPML – Config Generator for Elementor

To automatically generate XML code for your custom widgets: 

  1. Create a new page and click to Edit with Elementor.
  2. Add the custom widgets you want to register for translation to the page. Since WPML – Config Generator for Elementor only registers the fields and options you use, set up as many features of the custom widgets as you can by filling in text fields and enabling options.
Adding custom widgets you want to register for translation to a page
  1. Publish the page and return to the WordPress edit screen for that page. Scroll down to the section labeled WPML: Elementor Widgets. You will see the generated XML code for the widget fields and settings added into your page that are not registered for translation yet.
Automatically generated XML code for the custom widgets

Testing the Automatically Generated XML Code

To test the automatically generated XML code:

  1. Copy the XML code from the section labeled WPML: Elementor Widgets on the WordPress edit screen of your page with the custom widgets.
  2. Go to WPML → Settings and click on the Custom XML Configuration tab.
  3. Paste the code into the editor and press the Save button. Check that you don’t see any warnings or validation errors appear. Make sure to remove any fields that shouldn’t be translated, such as configuration fields and fields with boolean values. Leaving these fields available for translation can cause issues for end-users.
Pasting the code into the editor in the Custom XML Configuration tab
  1. Go back to the edit screen of the page with the custom widgets. Make a small change to the page, such as editing the page title, and click Update.
Making a small change to the page with the custom widgets
  1. From the Language box, click on the plus icon to translate the page. The Advanced Translation Editor opens and you should see the registered fields from the custom widget available for translation. Review the automatic translations or input your own and click Complete when you’re done.
Translating the custom widget fields in the Advanced Translation Editor
  1. Take a look at the translated page on the front-end to make sure the custom widget fields appear correctly.
Viewing the translated custom widgets on the front-end

Additional Features

Besides automatically generating the XML code for your custom Elementor widgets, WPML – Config Generator for Elementor provides additional debug information. This information allows you to inspect and understand the underlying data and how it’s being used.

Additional debug information provided by WPML – Config Generator for Elementor

WPML Config XML (generated for all widgets in the page) 

What it does: Provides the XML code for all the widgets on the page, including those already registered for translation.  

Why it’s useful: Allows you to review or edit the XML code of existing widget settings.

RAW value from _elementor_data (JSON)

What it does: Shows the original value of the _elementor_data field of the post.

Why it’s useful: Lets you see the data the WPML – Config Generator for Elementor Widgets uses to generate the XML code.

Array generated from _elementor_data

What it does: Provides the value of the _elementor_data field of the post, converted into an array.

Why it’s useful: You can use the array for debugging purposes.

Extracted Widgets from _elementor_data

What it does: Shows which custom widgets the plugin was able to extract and use from the _elementor_data field. 

Why it’s useful: If you do not see custom widget, custom widget field, or custom widget option here, it will not be added to the XML. This is useful for debugging.