Back to contents

JetElements: How to Translate Widget-Added Content into Any Language

This tutorial will shed the light on how to get your website ready to be translated into multiple languages, as well as how to translate the content added through JetElements widgets using the WPML modules.

JetElements is a Crocoblock plugin that entails must-have design widgets for Elementor. You can use JetElements to create easy designs for both static and dynamic elements and work any type of content into the webpage canvas.  

JetElements is WPML-compatible, which means you can translate the content you added through JetElements widgets into any desired language. Let’s prepare the website first and then proceed to translate the JetElements-added content.

How to Prepare the Website to Run WPML

The basic preparation steps are fairly easy:

  1. Obtain the Multilingual CMS WPML plugin version.
  2. Upload it to WordPress and register it.
  3. Complete the language setup.
  4. Outline the translation roles.
  5. Choose the translation method.
NOTE. Need more detail? Read the full WPML installation routine here.

Once you’re done, you can proceed to translate pages. Do it manually or drop the texts into the translation basket. In this way, they will be sent to a translator you’ve outlined in Step 4.

How to Translate JetElements Content

As mentioned above, you’ll need to buy the Multilingual CMS plan to be able to translate the JetElements-added content. To be more specific, WPML Multilingual CMS, WPML Translation Management, and WPML String Translation modules are needed.

Next, you have to make the posts and pages translatable. It will let the WPML translation modules detect the texts properly. Proceed to the WPML > Settings page. In the Multilingual Content Setup tab, scroll down the page to find the Post Types Translation section.

There, you can see three available options:

  • Translatable – only show translated items. If you want to output on the frontend only those items you translated, select this radio button. 
  • Translatable – use translation if available or fallback to default language. By choosing this, the system will display the items’ translations whenever provided, and the remaining items will be displayed in the default language. 
  • Not translatable. It means that the post types will not be subject to translation. 

Make the needed custom post types translatable and click the “Save button.

JetElements plugin boasts a whopping 44 widgets, which help you embed and style up any website element. You can use all widgets to add the visuals and texts to the page sections:

But the question is how do you translate the content? Basically, there’s nothing mind-bending about it. Thanks to the WPML modules, you can translate everything at once in the Advanced Translation Editor

Let’s go through the routine using the Slider widget as an example.

1 Step — Determine the pages to translate

Go to Pages > All Pages and seek those containing the JetElements-added content blocks. Then, press the “+” icon next to the correct page title.

all pages in WordPress dashboard
NOTE. The directory above is not the only place to visit, though. If you’ve got any page templates that do contain the JetElements-added blocks, they can be found in the Crocoblock > Theme Builder pathway, WordPress sidebar, etc.

2 Step — Input the translation

As soon as you are redirected to the WPML Advanced Translation Editor window, proceed to translate the content. You can do it by inputting the translations manually or use a translation tool to get everything done automatically. You need to confirm each row separately until the bottom scale is 100% complete. In the contrary case, you won’t be allowed to continue. Once you finish translating, click the “Complete” button.

jetelements slider content translation

3 Step — Check the result

Now, let’s see how it looks on the frontend. It worked!

NOTE. The routine above will work out perfectly for static JetElements widgets. Whenever you choose to display dynamic values, you will have to go the extra mile. Since the widgets will pull out the data from the custom field values, it’s required to make them translatable.

Go to the WPML > Settings page and scroll down to Custom Fields Translation.

custom fields translation section in wpml settings

There are four available options here:

  • Don’t translate – the custom field values will be displayed in the default language;
  • Copy – the custom field values of the default language will be always copied to the secondary-language site version, including the cases of altering the initial custom field in the default language;
  • Copy once – the custom field value will be copied to secondary languages at the primary translation stage. Nevertheless, you can set a different value for this field, and it won’t be overwritten by the default-language field value;
  • Translate – the custom field values are subject to translation and will appear in the Translation Editor window.

The 3-step translation method we described above applies to almost every JetElements widget category like:

  • JetElements Content Widgets;
  • JetElements Business Widgets;
  • JetElements Visual Effects Widgets;
  • JetElements Visual Content Widgets;
  • JetElements Action Widgets.

The remaining JetElements WooCommerce Widgets and JetElements Integration Widgets fall under a bit different translation process, which is about to be described.  

How to Translate JetElements Integration Widgets

This category embraces widgets, which are used to create connections between your website and third-party services:

  • Advanced Map widget;
  • Contact Form 7 widget;
  • Elementor Audio Player widget;
  • Subscription Form widget;
  • Video Player widget;
  • Weather widget. 

Now, let’s consider a few examples and see how they can be translated through WPML.

Contact Form 7 Widget

Proceed to WPML > Translation Management > Post Types Translation and tick the “Translatable” option in the Forms row. In this way, the WPML translation modules will be able to detect the Form title and translate it. 

Currently, there is no way you can translate the Form field values through WPML. Instead, you are ought to duplicate the needed Form and enter its translated values by hand. 

Find the Contact tab in the WordPress sidebar, then press Contact Forms. You will be shown all the contact forms you have. To translate any, hit the “Duplicate” button.

duplicating the contact form

In the newly-opened window, substitute the default-language Form labels with their translations.

editing the contact form labels

You can also translate the texts in both the Mail and Messages tabs. Just type the new texts in the corresponding text areas, then press the “Save” button.

Next, go to the page where this form is placed. You’re going to output the translated Form instead of the default one. Click the Form area and you’ll see a Select Form drop-down list in the Elementor widget panel. Choose the copy of the Form that you created a little while ago.

picking the translated contact form in elementor

At this stage, you’ll see that the language has been changed. Press the “Update” button and check out the final result on the frontend.

translated contact form 7 on the frontend
NOTE. You can also style up the Contact Form 7 widget in Elementor. For more details, check out this tutorial.

Weather Widget

Go to WPML > Theme and plugins localization and scroll down to the Strings in the plugins section. Find the “JetElements for Elementor” option and tick it. Keep scrolling until you see a “Scan selected plugins for strings” button. Click on it and a popup will appear telling you the scanning process has started:

scanning jetelements plugin for strings

Once done, the system will output a success message in the same popup. All the strings were added to the string translation table, where you can find those you wish to translate. Follow the WPML > String Translation pathway, select “jet-elements (…)” as a domain, and search for weather-related strings.

weather strings search in jetelements domain
NOTE. As a shortcut to the exact same page, you can scroll up to the JetElements section on the Theme and plugins localization page and click any of the numbers next to the string name.
clicking the number of jetelements strings

Click to output all the weather-related strings at once and type in the translations manually. Repeat the process as shown below until you complete all translations.

Then go to the page you’ve placed the Weather widget to and see the way it will look on the frontend.

translated weather widget on the frontend
NOTE. If you happen to see that some strings were not translated, make sure to add the translation manually in either Elementor or use the search tool within the String Translation menu item to find these by title and input the missing translations.

How to Translate JetElements WooCommerce Widgets

To fulfill these translations, you’ll need to install and activate the WPML WooCommerce Multilingual plugin. You can do it by navigating to Plugins > Add New > Commercial. In the newly-opened tab, tick the “WooCommerce Multilingual” option, then scroll down the page, tick the “Activate after download” option and press the “Download” button. 

downloading the woocommerce multilingual wpml plugin

Afterward, go to WooCommerce > WooCommerce Multilingual and proceed to translate the content.

Translating the Product Categories and Attributes

Open the Categories tab in the WooCommerce Multilingual section and input the translations manually. Don’t forget to press the “Save” button for every item in every language.

product category translation window

Repeat the same process for every Category until they are all done:

list of translated product categories

Next, click on the “Attributes” tab and you’ll see the available product attributes in the drop-down list. 

product attributes drop-down list

Choose whichever you need to be translated and finish off each item manually.

Translating the Products

Open the Products tab and add the translations blow by blow. Just press the “+” sign next to the product name and type in the translations manually or use the automatic translation tool. Once the bottom scale is 100% full, hit “Complete”.

woocommerce products translation

Repeat the procedure for every product on the list.

Configuring the Multi-Currency Mode

Now that you can output the products through JetElements WooCommerce widgets, the translations will be applied to anything but price. If you want to display the prices relevant to any given secondary language, it’s required to set up the multi-currency mode. 

Open the Multi-currency tab and tick “Enable the multi-currency mode”.

multi-currency tab in woocommerce multilingual

Now, choose the needed option in the Show currencies based on select. There are two options there – “Client Location” and “Site Language”. You can add new currencies by clicking the “Add currency” button. In the table below, set the default currency for each language. It is also possible to disable a particular currency for any given site version – just tick/untick the corresponding checkbox. 

multi-currency mode setup

Configure any other settings you might eventually need and hit the “Save changes” button. 

Lastly, open the page where WooCommerce products were added and see how it worked on the frontend. 

translated woocommerce related products
NOTE. If you happen to see that some pieces of content lack respective translations, add the missing translations manually. Go to WPML > String Translation and search for the corresponding strings. Input the translations and save the changes. Then refresh the product page. Everything should be working just fine.
missing strings translation

How to Translate the Widget Strings

Last but not least, you can translate the desired widget attributes into the secondary language. To do so, follow the WPML > String Translation pathway and select the “Widgets” option in the In domain drop-down list. The system will output the available widget strings. You can add the translations to them by simply clicking the “+” icon and entering the secondary language equivalent in a window that pops out.

translating widget strings in wpml settings


That’s all. Now you know how to use WPML to translate JetElements-added content and widget strings. Good luck!