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.
- Getting Started
- Setting the Translation Preferences for ACF Custom Fields
- Translating and Displaying ACF Custom Field Values
- 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 bridge plugin that makes WPML and Advanced Custom Fields plugin compatible.
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.
You can set the translation preferences for ACF custom fields in the Custom Fields Translation section of the WPML → Settings page.
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.
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.
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
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:
- 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 can translate the content automatically. If not, enter the translations for each line and click Complete once you’re done.
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.
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.
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.
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.