Skip Navigation
Home » Documentation » A List of Multilingual-Ready Themes, Compatible with WPML » Create multilingual websites using Flatsome and WPML

Create multilingual websites using Flatsome and WPML

Mohamed Khafaja
Updated
November 11, 2020

Flatsome’s compatibility with WPML allows you to build fully functional multilingual eCommerce websites. In this tutorial, you will learn how to translate a website built with Flatsome using WPML.

Content

Getting started

To follow along with this tutorial, make sure that you install and activate the WPML core plugins which include WPML Multilingual CMS, WPML String Translation, and WPML Translation Management.

Check out WPML’s getting started guide to learn how to set up and configure WPML on your site.

For a better translation experience, we recommend that you activate the WPML’s Advanced Translation Editor. To do this, go to the WPML → Settings page. Under the How to translate posts and pages section, check the “Use WPML’s Advanced Translation Editor” option.

Enabeling the Advanced Translation Editor

WPML translation tools

We recommend using WPML’s Advanced Translation Editor as it offers affordable automatic translation, a glossary, spell checker, and more!

Besides translating your site content yourself, you can also:

Translating pages

Pages that you create using the UX Builder are fully translatable using WPML along with pages that you create using the WordPress default editor (Gutenberg).

WPML allows you to translate the pages and posts content yourself, assign the translation job to one of your users that you have assigned as translators, or send the content to be translated by a professional translation service. 

To manage the translation of your site you can use WPML’s Translation Management. Simply navigate to the WPML → Translation Management page to send content for translation. The first time you visit the Translation Management page, WPML will walk you through a quick setup wizard where you choose who will translate your site and choose your preferred translation editor.

Sending content for translation

You can also translate the page by clicking the plus icon in the language meta-box on the post or page editing screen.

Translating the page by clicking the plus icon in the WPML Language box

On the advanced translation editor page, click the Translate automatically button to add the machine translation. Review the translation to make sure that it is human-readable then click the green checkmark button to save the translation. Finally, click on the Finish button then Complete to publish the translated page.

Adding automatic translation and publishing the translated page

Naturally, you can translate posts and portfolio items in a similar fashion.

This is how the translated page looks like on the front-end.

Translated page on the front-end

Translating UX Blocks

Translating UX blocks is similar to translating pages, posts, and portfolio items. To translate a UX block, follow the steps below:

  1. Navigate to the UX block editing screen. 
  2. Click the Plus icon in the Language box. This takes you to the advanced translation editor screen.
Translating UX Blocks
  1. As we did for pages, translate the block content then click the Finish button then Complete to publish the translated block.

Translating categories and tags

You can translate categories and tags assigned to a specific post or portfolio pages while translating them using the WPML translation editor screen.

Furthermore, you can translate categories and tags on the WPML -> Taxonomy Translation page. In the example below, we walk you through the process of translating portfolio categories. You can follow the same steps to translate post categories and tags.

  1. Select the Categories from the drop-down menu and a list of categories will appear.
  2. Click the plus icon for translating a category of the respective language.
Taxonomy translation page
  1. Fill in the translation and click the Save button.
Translating custom taxonomies

Translating texts from Flatsome theme, plugins, and other places

Besides contents coming from posts and pages on your site, there are usually some texts coming from other places. The most common examples are themes and plugins. To learn how to translate these texts, visit WPML’s documentation page about translating strings.

In this example, we will translate the top bar text. You can follow these same steps to translate any text listed in the theme options.

  1. Navigate to WPML -> String Translation.
  2. Search for the top bar text.
  3. Click on the translations link and add your translated text. Make sure that you preserve any HTML in the translation. Then check the Translation is complete box and click the Save button.
Translating the top bar text

Translating WooCommerce elements using WCML

To translate everything that WooCommerce offers, download the WooCommerce Multilingual plugin (WCML) from your WPML account. Visit our dedicated WCML documentation to learn how to set up a multilingual store and translate your products, categories, variations, shipping classes, and more.

Translating menus

With WPML, you can easily synchronize your language menus. For more information, check out WPML’s guide on translating menus.

Known Issues

Right now, there are no known compatibility issues between this theme and WPML.

Getting help

In case you need help translating your site built using Flatsome theme, UX Builder and WPML, visit WPML’s support forum.