Elementor Pro allows you to dynamically insert ACF custom field data directly into your Elementor designs. WPML lets you make all the content multilingual.
To learn which ACF field types are supported by Elementor, check out the Elementor Integration with ACF documentation page.
On This Page:
- Getting Started
- Selecting an ACF Multilingual Translation Option
- Making the Choices for Select, Checkbox, and Radio Button Fields Translation-Ready
- Using the “Same fields across languages” Translation Option
- Using the “Different fields across languages” Translation Option
- Translating and Displaying ACF Custom Field Labels
Start by installing and activating the following plugins:
- Advanced Custom Fields (ACF) plugin
- Elementor Pro plugin
- WPML core plugin and WPML String Translation add-on
- Advanced Custom Fields Multilingual (ACFML) plugin. ACFML is a “glue” plugin that makes WPML and Advanced Custom Fields plugins compatible.
ACF Multilingual 2.0 comes with a Multilingual Setup wizard that allows you to choose from three translation options:
- Same fields across languages
- Different fields across languages
On existing site with ACF, Elementor Pro, and WPML, the Expert option will be selected for your existing field groups.
It is important to note that you need to set the translation options on a field group basis. This requires you to Edit each field group and select a translation option for the fields inside of it. If you do not set a translation option for a field group, you will not be able to translate the fields belonging to it.
WPML makes it possible for you to translate and display the Choices you add to Select, Checkbox, and Radio Button field types on the front-end.
However, Elementor only displays field values. So when you add these field types in Custom Fields, you should enter each choice on a new line in the Choices section.
Once you select the Same fields across languages option, you can make your custom fields multilingual by following a two step process:
If you enabled the Translate Everything Automatically mode, your post, the fields assigned to it, and your field labels will be translated automatically.
In the Translate What You Choose mode, you can translate the post, the custom fields within it, and your field labels and labels for Choices in the same way you would translate any other posts and pages.
Here, we’ll quickly show you how to translate a post and the field values by yourself:
- Edit the post you want to translate. From the Language box, click the plus icon next to the language you want to translate the post into.
- You’ll be taken to the Advanced Translation Editor. If you have translation credits, you’ll see the automatic translations filled in. You can review and accept them. If you don’t have credits and translate your content manually, click the plus icons and enter the translations for each line. Once you’re done, hit the Complete button.
Once you have dynamically inserted the ACF custom field data into a Single Post template, you can translate it into your site’s secondary languages. To learn more, see our guide to translating Elementor templates.
When using Elementor and ACF with WPML, you can have the same number of fields across each of your site’s languages while having different field values.
As an example, let’s say you have a blog about movies. Your site’s content is available in two languages – English and Spanish. You want to have a post about the best movie this year. However, your English and Spanish-speaking audiences voted for two different movies.
You want to use the same custom fields, like Movie Title, Movie Description, Movie Image, and Movie Genre across both languages. But, you want the values to be different. You also want both posts to use different Elementor templates.
In this case, you can’t use automatic translation or the Advanced Translation Editor, because this requires you to directly translate the post content and the field values. However, you can choose the Different fields across languages translation option for your field group and:
- Translate your images in WPML Media Translation
- Manually translate the post and field values into your site’s secondary language
- Translate the Select field type values in WPML’s String Translation
- Assign different Elementor templates to the posts in the default and secondary languages
In the sections below, we’ll walk you through the process of translating all the different elements.
If you have an ACF Image field type, you may want to use different images across posts in different languages.
To get started, install and activate the WPML Media Translation add-on.
Then, follow the steps below:
- Go to WPML → Media Translation.
- Locate the image you want to “translate” and click the pencil icon under the language you want to use a different image for.
- Upload a different image and click on the Save media translation button.
Now, you can translate your post and field values in the Different fields across languages translation option. Keep in mind that for this translation option, you can only use the WordPress Editor to translate your content.
- Edit the default language post. From the Language box, click on the plus icon next to the language you want to translate the post into.
- You should see blank custom fields and the image you already translated using Media Translation. Now, all that’s left to do is to manually enter the post content and the field values in the site’s secondary language and then click Publish.
In the Different fields across languages translation option, you need to translate the Choices for Select field types using String Translation.
To do this:
- Go to WPML → String Translation.
- Use the display filter at the top of the String Translation page to determine which strings to display. You can look for strings in the acf-field-group domain, or search for the exact texts.
- Once you locate the text you want to translate, click the plus icon under the language you want to translate it into. Then, hit enter to save the translation.
Once you have finished translating all the post content and field values, you can create different templates for each of the posts and dynamically insert the field values.
You can learn more in our documentation about creating different Elementor templates for specific posts and pages in secondary languages.
Sometimes, you may want to display both the Field Label and the values from your ACF custom fields.
Let’s use our post about movies as an example. We want to display the field label, Movie Genre, and the field value, Action, on the front-end.
WPML lets you translate ACF field labels, but Elementor doesn’t offer a way to dynamically display field labels on the front-end. By default, Elementor can only dynamically display field values.
To dynamically display labels, you need to use the options in the Advanced tab and manually add the text of your choice Before or After the field values.
To translate the text you added Before or After the custom field value, all you need to do is translate the Elementor template. If you’re translating the template by yourself, you’ll see the text in the Advanced Translation Editor.
Once you translate both the post and template, you’ll see the translations in the correct place on the front-end.