Back to contents

JetEngine: How to Make a JetEngine-Built Website Multilingual

From this tutorial, you will learn how to prep your site to run polylingual and how to translate the frontmost JetEngine functionalities into any preferred language using WPML.

JetEngine is a Crocoblock plugin that lets you create custom post types and meta boxes, build relations, taxonomies, listings, forms, user profiles, and much more to make your website dynamic and feature-packed.

JetEngine became WPML-compatible, which means it is now possible to translate your website into many different languages. Let’s start by prepping the website and then go through the translation process for every content type.

Prepping the Website to Run Multilingual

Start by purchasing the Multilingual CMS WPML package. It contains WPML Translation Management, WPML String Translation, and the core WPML Multilingual CMS plugin – just what you need to translate the Crocoblock-built website. After you upload it to WordPress, complete the basic language setup

Next, open the WPML > Translation Management > Translation Roles tab. Here, you need to choose who you would like to translate the web pages. Assign all roles at once or one at a time – just return to this page later.

translation roles in WPML settings

Feel free to explore the remaining tabs and learn to add the content to the translation basket.

Afterward, go to the WPML > Settings tab and choose the translation method: Classic or Advanced. Please note that we suggest using the Advanced Translation Editor for new content and the Classic one for old content. In this way, you won’t affect old translations.

translation editor in WPML settings tab

Once done, you’re good to go! Let’s proceed to translate the JetEngine-generated content.

How to Translate Meta Boxes & Meta Fields

First things first, you’ll have to make them translatable. To do so, go to the WPML > Settings page and scroll down to Custom Fields Translation

custom fields translation settings

You can select one of four translation options for your custom fields:

  • Don’t translate – the system will output the given custom fields “as is;”
  • Copy – the custom field value will be always copied to secondary languages whether you decide to modify the default-language custom field or not;
  • Copy once – the custom field value will be copied to the secondary-language site version during the initial translation process. You are at liberty, though, to set a different value for it that won’t be overridden by the value of the default-language custom field;
  • Translate – you will be able to translate these fields wherever they pop out.

Once all radio buttons are checked, hit the “Save” button. To dig even deeper, press the “Show system fields” button and you’ll see the system components that can be made either translatable or not.

system custom fields translation options in WordPress

However, we are here to warn you that playing with system fields can be tricky. Be careful and always make a backup copy of your site content before changing anything on the backend.

NOTE. Due to integration issues, some custom fields may not be picked by the WPML translation editor. Go see the second-language site version on the frontend and – if any flaw is detected – fix that manually.
  • Go to Pages > All Pages and use the admin bar language switcher to view the pages that belong to a given language. 
  • Click to edit the needed page/post.
  • You will see a warning. Press the “Edit anyway” button.
wpml advanced translation warning
  • Input the missing translations by hand and hit the “Update” button to save the changes.

Both Crocoblock and WPML development teams are aware of this issue and working on fixing it.

Concerning meta fields, bear in mind that you do not want to change any Field attributes except for Label. If you alter anything else, chances are your website won’t be working properly. Go to WPML > String Translation and select “Jet Engine Admin Labels” as a preferred domain. You’ll be shown the components subject to translation. To translate them, press the “+” icon and input the translation manually. 

jetengine admin labels translation

How to Translate Taxonomies

For starters, go to WPML > Settings. Scroll down to Taxonomies Translation and make the ones you need translatable. Press the “Save” button.

making taxonomies translatable

Now, follow the WPML > Taxonomy translation directory and choose the one to edit from the drop-down list. You can see exactly the content this taxonomy includes. To add a translation, press the “+” icon.

WPML taxonomy translation section

In the newly-appeared window, submit the necessary translations by hand. The slug will be generated automatically. Please keep in mind that if there are identical slugs on your website, the system will add a suffix like “-uk,” where “uk” is short for the second (third, fourth, etc.) language. Don’t forget to press the “Save” button every time you edit the taxonomy content.

term translation in WPML translation editor

Similarly to that, you can translate the generic taxonomy term. Just scroll down the page, press the “+” icon, and repeat the steps above.

Repeat the same process for every taxonomy you’ve set to be translated.

How to Translate Custom Post Types & Listing Items

Proceed to the WPML > Settings page and find the Post Types Translation section. Make the custom post types translatable. Then click the “Save button.

post types translation section in WPML settings

There are three options available for you here:

  • Translatable – only show translated items. Tick this radio button to display on the frontend only those items you translated.
  • Translatable – use translation if available or fallback to default language. This option will output the content translation if you’ve provided it, and the items with no active translations will be shown “as is.”
  • Not translatable. That’s pretty much self-explanatory. 

Afterward, open the Post Types tab in the admin panel and you’ll see that a small “+” icon appeared next to post type titles. 

properties post types translatable

Press any and you’ll be redirected to the WPML Advanced Translation Editor window. Translate the whole section by yourself or use automatic translation. Don’t forget to confirm each row separately; otherwise, the bottom scale won’t let you quit until it is 100% full.

property content translation

You can translate the Listing Items in the exact same way:

  1. Make them translatable in the Post Types Translation section.
  2. Go to JetEngine > Listings.
  3. Open the desired Listing Item by clicking the “+” icon.
  4. Enter the translation manually or automatically.
  5. Press “Complete.”
listing items in jetengine settings
NOTE. In case some post types/listing items lack translations in the front, that might be due to poor plugin integration. See, if you are using a third-party plugin widget that is not proven to be WPML-compatible, there’s no guarantee the content will be translated at all. You should input the missing translations by hand in either Elementor or WordPress post editing page.

How to Translate JetEngine Forms

So far, the Forms CAN BE made translatable but this setting doesn’t target the Form itself. In other words, if you go to WPML > Translation Management > Post Types Translation and activate the “Translatable” radio button in the Forms row, the WPML tool will be able to detect and translate only the Form’s title. And this is not what you want.

To translate any Form into the language of choice, you’ll have to follow the JetEngine > Forms directory and make a copy of the needed form. Click the “Duplicate” button, name the form accordingly, and proceed to edit it.

duplicating the single page booking form

Now, translate every form field into the necessary language by changing just the Labels, nothing else. If you alter any other components, we do not guarantee the proper functioning. Don’t forget to press the “Apply Changes” button each time you’ve translated the Label.

translated Guest label in the single page booking form

You can also translate both the Notification Types and Messages Settings sections. The procedure is the same – you submit the new content into the allowed text areas and do not change the core field values. 

Once done, click to Update the Form and proceed to the page where it’s placed. You’re going to substitute the default-language form with the translated one. Right-click the Form area and select the second-language form in the “Select form” drop-down list.

picking the translated form in elementor

Afterward, update the page and go see its frontend view. Everything should be working just fine!

translated form display on the frontend

Now you know how to use WPML to translate JetEngine meta boxes and fields, forms, taxonomies, CPTs, and listing items. Enjoy!