Skip Navigation
Home » WPML Documentation » Related Projects » Advanced Custom Fields (ACF) Multilingual – Translate All Fields with WPML » Using WPML to Translate Sites Built With ACF and Elementor Pro

Using WPML to Translate Sites Built With ACF and Elementor Pro

Kathy Banach
Updated
February 7, 2024

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

Start by installing and activating the following plugins:

Selecting an ACF Multilingual Translation Option

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
  • Expert

Learn more about the translation options.

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.

Making the Choices for Select, Checkbox, and Radio Button Fields Translation-Ready

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.

Entering each choice on a new line

Using the “Same fields across languages” Translation Option

Once you select the Same fields across languages option, you can make your custom fields multilingual by following a two step process:

Translating a Post or Custom Post Type with Assigned ACF Custom Fields

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:

  1. 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.
Clicking the plus icon to translate the post
  1. 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.
Translating a post with custom fields in the Advanced Translation Editor

Translating the Elementor Template

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.

Using the “Different fields across languages” Translation Option

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:

  1. Translate your images in WPML Media Translation
  2. Manually translate the post and field values into your site’s secondary language 
  3. Translate the Select field type values in WPML’s String Translation
  4. 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.

Translating Images Using Media Translation

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:

  1. Go to WPML → Media Translation. 
  2. Locate the image you want to “translate” and click the pencil icon under the language you want to use a different image for.
  3. Upload a different image and click on the Save media translation button.
Uploading a different image and saving the media translation

Translating the Post and ACF Field Values in the WordPress Editor

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.

  1. 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.
Clicking the plus icon in the Language box
  1. 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.
Manually enter the field values in your site’s secondary language

Translating Choices for Select, Checkbox, and Radio Button Fields

In the Different fields across languages translation option, you need to translate the Choices for Select field types using String Translation.

To do this:

  1. Go to WPML → String Translation.
  2. 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.
Determining which strings to display
  1. 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.
Clicking the plus icon to translate the strings

Creating Different Elementor Templates for the Default and Secondary Language Posts

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.

Translating and Displaying ACF Custom Field Labels

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.

Manually adding text before the field value in the Advanced tab

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.

Translating text added to the template 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.

The text added before the custom field translated on the front-end