Skip Navigation
Home » Documentation » Related Projects » Translate Sites Built with Advanced Custom Fields (ACF) » 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
September 26, 2022

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.

This page is about translating content created with ACF and Elementor Pro. If you are not using ACF with Elementor Pro, please see the main page about Translating Sites Built with ACF.

On This Page

Getting Started

Start by installing and activating the following plugins:

If you’re new to WPML, check out our Getting Started Guide. It quickly walks you through different translation options you can use. One of these options is Translate Everything, which automatically translates your site’s content as you add or edit it.

Setting the Translation Preferences for ACF Custom Fields

You can set the translation preferences for ACF custom fields in the Custom Fields Translation section of the WPML → Settings page.

Setting the translation preferences for custom fields

WPML allows you to choose from four different translation options. To see which translation preference to use for each custom field type, see the page about recommended translation settings for ACF custom fields.

Here, we explain each of the four translation options in more detail: 

  • Translate – This option allows you to translate your custom fields automatically or using the Advanced Translation Editor. It is recommended for text fields (e.g. Text, Text Area, WYSIWYG, Message).
  • Copy –  This option copies the field value from the default language into the secondary language(s), which keeps your custom field value in sync across all languages. It is recommended for fields like Number, Range, True/False, and similar. Please note that when you use this option, the value of the field will not be available in WPML’s Advanced Translation Editor.
  • Copy Once – This option copies the value of the field from the default language, but the value of the field can be changed later in the WordPress native editor. After the first copy, it will not be kept in synchronization with the default language. Please note that when you use this option, the value of the field will not be available in WPML’s Advanced Translation Editor.
  • Don’t translate – The field is not available for translation. You should avoid using this option. For any custom fields you don’t want to translate, choose the Copy option.

Setting the Translation Preferences for Select, Checkbox, and Radio Button Field Types

If you want to translate and display the Choices you add to Select, Checkbox, and Radio Button field types on the front-end, you can set the translation preferences for these field types to Translate.

However, when adding these field types in Custom Fields, you should enter each choice on a new line in the Choices section. This makes it possible for you to then translate the choices automatically or using the Advanced Translation Editor. At the moment, you shouldn’t specify both a value and a label. 

Entering each choice on a new line in the Choices section

Translating and Displaying ACF Custom Field Values

To display your ACF custom fields on the front-end with Elementor, you need to create a Single post template and dynamically insert the ACF field custom data.

To make the content coming from your custom fields multilingual, you need to:

  • Translate your post and the custom fields assigned to it
  • Translate the template your post is using

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

If you have not enabled the Translate Everything mode, you can translate the post and custom fields within it in the same way you would translate any other posts and pages.

For custom fields assigned to a custom post type, see our documentation about translating custom post types.

Here, we’ll quickly show you how to translate a post 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 a post
  1. You’ll be taken to the Advanced Translation Editor. If you have translation credits, you can translate the content automatically. If not, enter the translations for each line and click Complete once you’re done.
Translating a post with custom fields in the Advanced Translation Editor

Translating Elementor Templates

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.

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.

For the purpose of this example, we created a book review website. Let’s say we want to display both the field label, Book Genre, and the field value, Horror, on the front-end.

The custom field label and value on the backend

By default, Elementor only allows you to dynamically insert the ACF custom field values into your template. However, you can use the options in the Advanced tab to 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