How to Change “Add to Cart” button text Using Loco Translate?

• First, install and activate the plugin.
• It will add a new section to your WordPress dashboard down below settings.
• Navigate to Loco Translate > Home.
• Then, you’ll see a screen like this.

• Click on ‘WooCommerce’ under Running plugins.
• And then, click the ‘+New Language’ option.

• What you’ll want to do is choose the language that you have active on your WordPress site from the drop-down menu there.
• After that, you’ll see a list with all the text “strings” that you can translate.
• At the top, there is a handy “filter” field where you can search for the text ‘Add to Cart’.

Demo: We want to change the “Add to Cart” text to ‘Enquire’ for our demo. We just select “Add to Cart” from the list, and then in the bottom box for our “translation”, we enter what we’d like it to say instead. After that, you only need to click the “save” button in the top left to make the change live. It worked for us.

Before we proceed, you need to add Loco Translate to your Astra website first. Furthermore, if you need help doing this, you can check this article.

How To Change WooCommerce String Using Loco Translate

• First, install and activate the plugin.
• It will add a new section to your WordPress dashboard down below settings.
• Navigate to Loco Translate > Home.
• Then, you’ll see a screen like this.

• Click on ‘WooCommerce’ under Running plugins.
• And then, click the ‘+New Language’ option.

• What you’ll want to do is choose the language that you have active on your WordPress site from the drop-down menu there.
• After that, you’ll see a list with all the text “strings” that you can translate.
• At the top, there is a handy “filter” field where you can search for the text you’d like to change.

Demo: For our demo here, we want to change the “Proceed to checkout” text to ‘Buy!’. We just select “Proceed to checkout” from the list, and then in the bottom box for our “translation”, we enter what we’d like it to say instead. After that, you only need to click the “save” button in the top left to make the change live. It worked for us.

Note: If the string is not visible, then you might have to sync the string, or the string is available with the WooCommerce plugin. 

If you have translated the string and it is not visible on the front end then it might be a cache issue. So, once you make the changes, try to clear clear the cache for the site.

When using the Astra Pro, you can enable the two-step navigation by navigating to Customize > WooCommerce > Misc > Enable Two Steps Navigation. Once you enable the two-step navigation, you will see the following steps in the cart.

If you want to translate these strings, you can do so with the help of the Loco Translate plugin.

How To Change WooCommerce String Using Loco Translate

• First, install and activate the plugin.
• It will add a new section to your WordPress dashboard down below settings.
• Navigate to Loco Translate > Home.
• Then, you’ll see a screen like this.

• Click on ‘Astra Pro’ under Running plugins.
• And then, click the ‘+New Language’ option.

• What you’ll want to do is choose the language that you have active on your WordPress site from the drop-down menu there.
• After that, you’ll see a list with all the text “strings” that you can translate.
• At the top, there is a handy “filter” field where you can search for the text you’d like to change.

Demo: We want to change the “Shopping Cart” text to ‘Shopping Bag’ for our demo. We just select “Shopping Cart” from the list, and then in the bottom box for our “translation”, we enter what we’d like it to say instead. After that, you only need to click the “save” button in the top left to make the change live. It worked for us.

Note: If the string is not visible, then you might have to sync the string, or the string is available with the WooCommerce plugin. 

If you have translated the string and it is not visible on the front end then it might be a cache issue. So, once you make the changes, try to clear clear the cache for the site.

This document will show you how to make your Astra website multilingual with TranslatePress for free.

Setup

Firstly, to translate your Astra-based website with the TranslatePress free plugin, you must install it from WordPress.org. Please follow these steps:

Step 1 – Navigate to Dashboard > Plugins > Add New, and search for “TranslatePress” using the search bar in the top-right corner;

Step 2 – Next, click the Install Now button to install the TranslatePress plugin;

Step 3 – Once the install process finishes, click the Activate button to activate the plugin.

Choose Languages in TranslatePress

Once you’ve activated the TranslatePress plugin, you can choose the languages you want to use on your site.

Step 4 – Navigate to Dashboard > Settings > TranslatePress to open the TranslatePress settings area;

Step 5 – To begin with, set the Default Language. This will be the language in which your current site content is written. Though TranslatePress should automatically detect this language, you should verify that it’s correctly selected;

Step 6 – Further, use the “All Languages” option to add one or more languages you wish to translate your site’s content to. Use the dropdown menu to choose a language and click the “Add” button to add it to your site.

The free version of TranslatePress lets you add one new language (two languages total). To add more languages, you’ll need to purchase the premium version, which supports unlimited languages.

In our example, we’ll use English as the default language and add Spanish as the new language on our website:

Once you’ve added your languages, make sure to click Save Changes.

Now, TranslatePress is all set if you plan on doing the translations on your website manually. Hence, you can start translating your website content, menus, and other areas.

On the other hand, if you would like to use “Automatic Translations”, please check out the next section.

Set Up Automatic Translation (Optional)

This section is entirely optional. Nevertheless, if you want to save time while translating your content, TranslatePress supports automatic machine translation. Furthermore, you can set automatic translations with either Google Translate or DeepL translation engines.

The TranslatePress will automatically translate all of your site’s content using the service you’ve chosen. However, you’ll still be able to edit those automatic translations manually, if needed.

If you decide to use automatic translations, please continue the setup process following these steps:

Step 7 – Switch to the “Automatic Translation” tab in the TranslatePress settings area;

Step 8 – Click on the “Enable Automatic Translation” dropdown and select “Yes” to expand the automatic translation settings;

Step 9 – Next, choose your automatic translation engine. The free version of TranslatePress supports Google Translate API. On the contrary, you’ll need a premium version of TranslatePress to use DeepL;

Step 10 – Generate a translation service API key for your selected translation engine. Further, the following TranslatePress documents show how you can get the Google Translate API key or the DeepL API key;

Step 11 – Now, add the API key to the TranslatePress settings area to finish the automatic translations setup;

Step 12 – You can also limit your machine translation service usage with the “Limit machine translation/characters per day” option. This is optional, but it helps you control your budget.

Make sure to click Save Changes when you’re done.

Translating Pages, Posts, and Post Types with TranslatePress

Following the setup, it’s time to start translating your website. Most importantly, you can translate all of your content with the TranslatePress visual translation editor. It works a lot like the WordPress Theme Customizer that you use to customize the Astra theme. Similarly, the translation editor can be accessed on the front-end.

Now, let’s show you how to translate your website in a few simple steps:

Step 1 – To start, navigate to the front-end of your site, and open the post or page you want to translate;

Step 2 – Click the Translate Page option on the WordPress toolbar to open the TranslatePress editor;

Step 3 – Choose an element to translate by hovering your mouse over it and clicking the pencil icon. This will open the translation sidebar for that element. You can translate any text or image on your site’s preview. Also, you can select a specific string to translate from the strings dropdown;

Step 4 – Next, you can add or edit content translation using the sidebar. Here, just add translated content in the empty translation field If you’re manually translating your site from scratch. In contrast, if you used automatic translation, the translation field will already contain the translated content you can modify;

Step 5 – Save your translation by clicking the “Save translation” button. Alternatively, you can use the keyboard shortcut – “Ctrl + S” on Windows or “Cmd + S” on Mac;

Step 6 – Translate all of the content on the page in the same way;

Step 7 – Repeat the process to translate the rest of your posts, pages, and custom post types.

Translating Images

In addition to translating all of the text content on your page, you can also “translate” images. Translating an image means that you can set a different image file to use for each language.

To translate and image, follow these steps:

Step 1 – Acces the TranlsatePress Editor;

Step 2 – Click on the image you want to translate;

Step 3 – In the translation field, add the URL of the image you wish to display for each language and save changes.

Again, you can save time by setting up the automatic translation at any point. This way, your remaining content would be automatically translated.

Translating Menus, Widgets, and Other Areas of Your Site With TranslatePress

Likewise, you can use the same approach to translate your site’s menus, widgets, and other non-editor content.

Though we’ll focus on translating menu items in this example, you can apply the same principles to other parts of your site. In the same way, you can translate content from any plugins that you might be using.

To translate each menu item, you can follow these steps:

Step 1 – Open the TranslatePress editor for any piece of content. That includes the menu, widget, or other details you want to translate.

Step 2 – Select the menu item you want to translate by hovering over it and clicking the pencil icon.

Step 3 – Add or edit the translation using the sidebar:

Once you translate the menu item, that translation will automatically be used for all instances of your menu. There’s no need to translate menu items on each page manually.

Adding a Language Switcher With TranslatePress

By default, TranslatePress adds a floating language switcher to the bottom-right corner of your site. The language switcher allows your visitors to choose their preferred language.

However, you can configure it and change the language switcher location and behavior.

Configuring the Floating Language Switcher

Step 1 – Navigate to Settings > TranslatePress. Scroll down to the Language Switcher settings. Here, you can modify or deactivate the floating language switcher;

Step 2 – Use the Floating language section settings to adjust the placement and color scheme of the floating language switcher. Also, choose whether to display country flags, the language name, or both.

Further, you can disable the default language switcher by unchecking the Floating language selection box.

Alternatively, you can add the language switcher to a menu or use a shortcode anywhere on your site.

Adding a Language Switcher to Your Menu

If you want to add a language switcher to your menu, you can set it up in the following manner:

Step 1 – Navigate to Settings > TranslatePress and scroll down to the Language Switcher settings.

Step 2 – Use the Menu item dropdown menu to set how you want your language switcher to look. You can choose to show language names, show/hide country flags, and more.

Step 3 – Next, navigate to Appearance > Menus and select the navigation menu to add the language switcher.

Step 4 – Locate the Language Switcher option in the Add menu items column on the left side of the interface.

Step 5 – Add the Current language option as a top-level menu item. Expand it to adjust its position within your menu.

Step 6 – Finally, add the individual languages as sub-menu items to enable website users to switch between languages.

Step 7 – Click Save Menu to save your changes.

Manually Placing a Language Switcher With a Shortcode

If you want to place the language switcher in any other area of your site, you can use the shortcode. For example, you can add it to a sidebar widget or your footer like we did:

Step 1 – Navigate to Settings > TranslatePress and scroll down to the Language Switcher settings.

Step 2 – Use the Shortcode dropdown menu to choose how you want your language switcher to look.

Step 3 – Add the [language-switcher] shortcode to your desired location. In our example, we added the language switcher shortcode to the HTML element in Astra Footer Builder:

Other TranslatePress Settings and Features

So far, we have covered most of the options available with TranslatePress. However, if you navigate to the Settings > TranslatePress and choose the Advanced tab, you will find several additional options.

Though most users won’t need to edit any of the advanced settings, here you can set how your translation works. For example, you can exclude a specific text from automatic translation.

You can also access the add-ons with the premium version of TranslatePress. The most notable is the SEO Pack add-on. It lets you translate your URL slugs, SEO titles, meta descriptions, image alt text, and other essential SEO details.

Besides, you can find other premium add-ons for the following features:

• Automatic user language detection – option lets you automatically redirect users to their preferred languages based on their chosen browser language or physical locations.
• Translator accounts – this lets you create dedicated user accounts for translators. It’s helpful if you’re working with freelance translators or translation services.
• Browse as user role – this lets you add role-specific translations for different types of users. This is especially useful for membership sites where different types of users might need to see different content.
• Navigation based on language – option lets you create completely different navigation menus based on a user’s chosen language. With the free version, you can only translate the same set of menu items to different languages.

For more details, help, and assistance with the TranslatePress plugin, you can check the official TranslatePress documentation. The TranslatePress team also maintains their guide on translating the Astra theme – which you can find here.

Before we start, you will need to install the Polylang plugin on your website and do the setup. If you need help turning your Astra website multilingual with Polylang, please check this article.

How To Translate Post Categories and Tags?

Similar to translating posts or pages, you can translate post categories and tags.

We will show you how to translate a category using Polylang as an example.

Please follow these steps:

Step 1 – Navigate to Dashboard > Posts > Categories;

Step 2 – In the category list, find the category you wish to translate. You will see Polylang translation options on the right side of each category. There will be columns for each available language translation. Flags mark the language of the original category (most often default language). Languages without translations are marked with the “+” icon; 

Step 3 – Start translating the category by clicking on the “+” icon for the desired language. This will open the category editor;

Step 4 – To translate the category, add your translation to the “Name” field;

Step 5 – Click on the “Add New Category”. This will create a new category linked as a translation to your original category. You will also notice that the “+” icon changed to the “pencil” icon to mark the existing translation;

Step 6 – Repeat steps 3 to 5 for each of the available languages.

Similarly to these steps, you can also translate any other category and your tags.

How To Translate Astra Strings?

In this article, as an example, we will show you how to translate Astra Theme custom texts. You can follow a similar method for translating any other string in Astra.

We added a Button Header element to the Primary Header and added the label “Register”. We will add a translation for this label using Polylang string translations.

Please follow these steps:

Step 1 – From the WordPress dashboard, navigate to Dashboard > Polylang > Strings translation page;

Step 2 – Browse the string list and find the string you wish to translate. You can also use the search bar on the top right side of the page. You can type in any term (e.g., “astra”) to sort the list to related strings only;

Step 3 – We searched for the term “register” and found our button string. On the right side of that string line, you will see the Polylang translation fields for each available language;

Step 4 – To translate the string to any language, just click the appropriate translation field and add your translation.

Step 5 – Scroll down and click on the “Save Changes” button once you’re done.

You can repeat this process for each string and language.

Now, that you know how to translate categories, tags, and strings with Polylang, you can make your Astra website entirely multilingual.

Setup

For translating your Astra-based website with Polylang, you will need to install several plugins. To do this, please follow these steps: 

Step 1 – Navigate to Dashboard > Plugins > Add New. In the search bar on the top right, search for these plugins: 

• “Polylang”
• “Duplicate Page”

Step 2 – Install all plugins mentioned in the previous step; 

Step 3 – Activate the “Polylang” plugin. This will start a website translation wizard;

Polylang Setup Wizard

Step 4 – The first wizard option, Languages, will add the languages you need on your website. When you choose your first language, it will be set as your default language. Further, just click on the “Add New Language” button to enable additional language(-s).

For our example, we will use English (primary), German and French languages:

Once you added all languages, click on “Continue”;

Step 5 – In the next step, Media, you can allow translations for media (title, alternative text, caption, and description);

Step 6 – Under “Content”, choose the language you wish to assign for all the content without an assigned language (this should be most often your primary language);

Step 7 – On the next step, you can confirm your Homepage translations. Clicking on the “Continue” button will create blank versions of your homepage in all languages. This means that non of your designs nor content will be copied from your homepage.

However, unless you’re planning to add different designs for each language (homepage looking differently in every language), click on the “Not right now” button at the bottom;

Step 8 – Consequently, you will be transferred to the Dashboard with the option to skip setup. Go ahead and click on that button to close the Polylang setup wizard (all of your previous wizard settings are saved).

So, the Polylang plugin is now set, and language options were added to your website. Now you need to add your content and media translations.  

Translating Pages, Posts, and Post Types with Polylang

When you translate pages or posts with Polylang, you get linked versions of pages or posts where each version is assigned a language. 

We will show you two methods of creating the translated version of your page in a couple of steps.

For Polylang to work properly, you need to add at least translations for your homepage (static front page). Since we skipped the automatic step (Step 7) to create homepage versions in other languages through the wizard, we will show you how to do it manually now.

Method One – Translate Page

Step 1 – Navigate to Dashboard > Pages and check the right side of the pages list. You will notice the Polylang options for each page. Each page is shown with the flag of the language that is assigned to that page. In our example, existing pages are in English (Default language).

Step 2 – To create a page version in another language, just click on the “+” icon in the desired language column. This will open a page editor for a new empty version of the page. We decided to add a French version of the page in our example

Step 3 – Name your page, add your page content, and design for the language selected. Once you’re done, click on “Publish” to create the translated page.

As a result, you will get two different and connected pages. If you check the Polylang options for these pages, you will see each has its appropriate language flag mark.

Also, you will see that existing translated versions have a “pencil” icon to mark that the translation exists.

This is the easiest method to translate a page when you wish to provide completely different content for different languages. For each language, you will get an empty new page to edit from scratch.

On the other hand, if you wish to have precisely the same page design, just with the translated content, the second method would be a better option. 

Method Two – Clone and Translate

With “Polylang”, you might be surprised to discover your page or post content is not copied to another language version. Upon adding a new language version, you will find just a clean new page or post. 

Unless you’re a Polylang Pro user (Pro comes with a “Duplicate content” feature), we suggest using the “Duplicate Page” plugin. 

Instead of adding all your content and designs manually for each language, you can duplicate pages or posts. Once you translate the duplicated page, just link it to the original one, and it’s done. 

As an example, we will show you how to clone your Home page and link different page versions. To start, make sure you activate the “Duplicate Page” plugin next to “Polylang”. 

Let us show you how to do it:

Step 1 – Navigate to Dashboard > Pages to edit pages (you can also do this for posts or custom post types);

Step 2 – Click on the “Duplicate This” option under the page to clone it. You will see a new draft page appearing in the pages list with the same name;

Step 3 – Click on the “Edit’ option under the cloned (draft) page and adjust the page title – as this is the home page for the French language, we will rename the page title to “Accueil”;

Step 4 – In the page settings (on the right side), scroll down to the “Languages” section and set the cloned page language. Here, we set the language to French;

Step 5 – In the same section, connect this page with the original page. Just click on the original page language field and start typing the page’s title – click on the original page name once it pops out in the list.

Step 6 – As you will notice, the cloned page contains the exact copy of the content found on the original page. Now you need to adjust and update content on your cloned page. You can translate the text and adjust the rest of your content and design as you wish. Click on the “Publish” button to save.

Note: Your cloned page might look different before you update the content created by Page Builders. Once you edit content and update the page, the design will show correctly.

Great, you just created your page translation.

Now you can repeat these steps for all pages and languages. You can also translate all of your posts and custom post types this way.

Translating Menus and adding a Language Switcher to the Header

Now that we have translated all pages and posts, it’s time to translate the menus and add a Language Switcher so website visitors can choose the language they want.

In addition, before editing menus you should check if activating Polylang affected your permalinks or your menu locations. Thus, if you notice any changes please correct these first.

Translate Primary (or any other) Menu

Now let’s see how you can set your menus for each of the languages added. Here, we’ll show you how to translate your Primary Menu. In this example, we will set a Primary Menu for a French version of our website:

Step 1 – Navigate to Dashboard > Appearance > Menus and select your Primary Menu. If you scroll down a bit to “Display locations”, you will notice that Polylang added a Primary Menu location for each language you added. Your primary menu will be set for your default language. In our case, this will be “Primary Menu English”;

Step 2 – Click on “Create a new menu” to start building your translated menu. Start by giving it a name (we’ll use Primary Menu FR) and selecting the appropriate display location. We choose “Primary Menu Francais” as we are creating a menu for the French language;

Step 3 – Add the appropriate language versions of pages and posts and other items you need in this menu. Click on “Save Menu” to create this menu and save the changes you made.

You can translate your other menus this way too.

Adding the Language Switcher

Our final step here is to add the Language Switcher. Polylang provides its own Language Switcher that can be added to your menus at Dashboard > Appearance > Menus.  

Keep in mind that this option might be hidden by default. If you don’t see the “Language switcher” section under “Add menu items”, please click on the “Screen Options” on the top of your screen and add this option:

We’ll be adding the Language Switcher to the Primary Menus here, but this can be done with any menu you need. Please follow these steps:

Step 1 – Navigate to Dashboard > Appearance > Menus and select your Primary Menu for your default language. From the menu items, under the “Language switcher” section, select the “Languages” option and click on the “Add to Menu” button to add it to your menu;

Step 2 – Drag and drop the Language Switcher item to position it in your Primary Menu;

Step 3 – Click on the Language Switcher item to expand it. Here you have several options to set the way your Language Switcher looks. Click on “Save Menu” to save changes;

Step 4 – Repeat steps 1 to 3 for each language to add the switcher on all of them.

Great job, your multilingual Astra Website is ready for visitors.

Other Polylang Settings

There are some additional settings for the “Polylang” plugin that you might find helpful. You can find these at Dashboard > Languages > Settings. 

Here you will find the following options:

• URL modifications – set how do you want your multilingual URLs to look like

• Detect Browser language – your website will show the version of your website based on the browser language preference;

• Media – you can activate or deactivate media translations (we set this to “active” during the initial setup);

• Custom post types and Taxonomies – choose custom post types and taxonomies you wish to activate translations for;

• Synchronization – choose where you wish to keep meta content synced between translations.

Further, you can find more details about translating categories, tags, and Astra strings in this article.

In addition, at Dashboard > Languages > Strings translations, you can translate your Site Title and Tagline, as well as the date and time formats.
For more details, or help and assistance working the “Polylang” plugin, you can check the official Polylang documentation.

In case you need to implement this translation in your website immediately, you can export the current translation file in the .mo format and use on your website by uploading it to the languages folder using FTP / SFTP with the correct naming convention.

Below are the detailed steps –

Step 1: Visit the GlotPress Project. GlotPress for Astra Theme is hosted on WordPress Repository here and Astra Pro can be translated here.

Step 2: Login or Register a new account.

Step 3: Choose your language from the list. (Screenshot). Click on the Astra.

Step 4: Click on any string and translate it

Step 5: Once you translate all required strings, scroll the page till the end.

Step 6: From the last line select only matching the filter and Machine Object Message Catalog (.mo), then click on Export.

Step 7: Rename the .mo file as –

• For Astra Theme:  astra-{locale-slug}.mo
• For Astra Pro: astra-addon-{locale-slug}.mo

Note: You can find a local-slug for your language from the list here.

For example – If the language is Hebrew, WordPress Locale Code for it is he_IL, then the theme mo file will be renamed as astra- he_IL.mo

Step 8:  Copy the above-renamed file to –

• For Astra Theme:  wp-content/languages/themes/
• For Astra Pro: wp-content/languages/plugins/

That’s it! This will display unapproved translations on your site.

Before we proceed, you need to add WPML to your Astra website and turn it multilingual first. Furthermore, if you need help doing this, you can check this article.

How To Translate Astra Strings?

In this article, we will show you how to translate Astra Theme custom texts. As an example, we will translate the Site Title. Similarly, you can translate any other string on your Astra website.

You can follow these steps to translate Astra strings with WPML:

Step 1 – To begin with, login to your website and navigate to Dashboard > WPML > String Translation page;

Step 2 – Next, in the “Search” field on the top of the page, search for “astra”. This will sort the string list to the Astra related strings;

Step 3 – Further, browse the string list below and find the strings you wish to translate. On the right side of that string line, you will see the WPML options and columns for each available language translation. 

Step 4 – To translate the string to any language, just click on the “+” icon to open the translation popup.

Step 5 – Finally, add your translation for the selected language and click on any empty space to close the popup. 

Step 6 – You will notice that the “+” icon changed to the “pencil” icon to mark that there is a translation saved for that language. 

You can repeat this process for each string and language.

WPML and Custom Layouts

Firstly, you need to add WPML to your Astra website and turn it multilingual. In addition, if you need help doing this, you can check this article.

Secondly, we need to make sure that the option to translate the Custom Layout with WPML is active. Follow the steps below to activate this option:

Step 1 – Login to your website and navigate to Dashboard > WPML > Settings;

Step 2 – Nest, scroll down to reach the “Post Types Translation” section;

Step 3 – In the end, select Custom Layouts (astra-advanced-hook)  to be Translatable. Here you have options to show items only if there is the translation available in the selected language or to show content in the default language (fallback option). Choose the option which suits you better and click on the “Save” button to apply changes.

This will enable all Custom Layouts to be translated with WPML. You will find the translation options in your Custom Layouts list.

Translating Custom Layouts

Now that this option is activated, let’s show you how to translate your Custom Layouts:

Step 1 – Navigate to Dashboard > Appearance > Astra Options > Custom Layouts and check the column next to the custom layouts titles in the list. You will notice the WPML language options for each layout. Layouts are set to your default language, and the column contains flags of the other languages available.

Step 2 – To create a version of the custom layout in another language, just click on the “+” icon in the desired language column. This will open an Advanced Translation Editor that will allow line-by-line translation.

By default, the editor will display content in “dual” mode, showing the original content on one side and translation fields on the other side. 

We decided to add a French version of the layout in our example:

Step 3 – To translate a line of the content, you need to click on the matching translation field for each line and provide the translation. Once you added all translations, click on “Complete” to create the translated page.

Managing Translations

Keep in mind that you will not be able to click the “Complete” button until you provided all translations. If you need to pause translating, just click on the “Back to list” button. This will save you current progress and take you back to the custom layouts list. To mark the translation in progress, you will notice that the “+” icon changed to the “cogs” icon. You can resume translating the layout any time you want by clicking this icon.

Once you complete your translation and click the “Complete” button, the translated version of your custom layout will be automatically added and linked with the original. In the layouts list, you will see that existing translated versions are represented by a “pencil” icon instead of a “+” icon to mark that the translation exists.

When it comes to the layout content, your designs will be automatically copied, and original content will be replaced with the translated content:

Great, you just created your Custom Layout translation. You can repeat these steps for any layout you want to translate.

Since WPML is a premium plugin, please make sure you’ve purchased the WPML license before proceeding.

Add WPML

For translating your Astra-based website with WPML, you will need several plugins. 

Install and Activate plugins

Let’s see how you can download and install these plugins:

Step 1 – Login to your WPML account and download the following plugins from the “Download” section:

• WPML Multilingual CMS
• String Translation
• Media Translation

Step 2 – Login to your website backend and navigate to Dashboard > Plugins > Add New > Upload Plugin. Choose the plugin .zip file and click the “Install Now” button to install a plugin. Install all mentioned plugins this way;

Step 3 – Activate all installed WPML plugins; 

Step 4 – When you activate the “WPML Multilingual CMS” plugin, you will see a notification in your Dashboard to start configuring WPML. You can click on the “Configure WPML” button on the notice or navigate to Dashboard > WPML > Setup. This will activate the Setup wizard.

Setup Wizard

The setup wizard will guide you through the whole multilanguage setup process and preparing your website for translation:

Step 1 – The first wizard option, “Languages”, is where you will add the languages you need. Choose your “Default language”. This is your primary language for your existing website content;

Next, you need to add all other languages you wish to translate your website to by clicking on the “+” icon. If you can’t find your language in the dropdown list, you can create a custom language.

For our example, we will use English (default), German and French languages:

Once you have added all languages, click on “Continue”;

Step 2 – In the next step, “URL Format”, you need to decide what will your URLs for different languages look like – different directories, different domains, or with added parameters;

Step 3 – On the third step (“Register WPML”) you need to add your “Site key”. You can find this by clicking on “Get a key for this site”. You will be transferred to the “Sites” page on the WPML website.

Also, you do this manually by going to your WPML account. Log in, navigate to “My Account”, and click on “Register WPML on your sites” (Account > Sites). 

On the “Sites” page, click on the “Add new site” button. You will be asked to add your website URL and confirm if this is a development or production website. Once you click on “Finish”, you will see a code – copy this code to the wizard field on your website. Click “Continue” to move to the next step;

Step 4 – At the fourth step, you should decide how you want to translate your website. You need to select if you want WPML to automatically create versions in all languages for all of your posts, pages, etc. (“Translate Everything”), or do you want to choose what to translate (“Translate Some”).

If you choose “Translate Some”, you will also need to decide who will be allowed to do translations on the website. You can choose to allow it only for the administrator (“Only myself”) or to allow this for more users on your website (“Individual translators”). 

You can also decide to use (paid) professional translation services through WPML (“A Professional Translation Service”), and you can combine this with the “Individual Translators” option, as both can be active and you can choose who will be translating which content.

If you’re creating a website for a client, you can also set a “Translation Manager” to choose the options and assign the translators.

For our example, we choose “Translate Some” and “Only myself” options.

Step 5 – “Support” is the step where you can opt-in to share your theme and plugins information with WPML to get faster support and compatibility alerts. For our example, we decided not to share this information;

Step 6 – If you’re running some third-party plugins like WooCoomerce or WPForms, the next step (“Plugins”) will recommend WPML components for these plugins (if any). If you need these to be multilingual too, we recommend you add these components.

To install and activate these components (plugins), mark them in the list and click “Install and Activate”. Otherwise, click on “Skip” to move to the last step;

Step 7 – For the last step, “Finish”, WPML will add a language switcher to the bottom of your footer. You can edit or disable this one, and enable other language switchers by navigating to Dashboard > WPML > Languages.

WPML plugin is now set, and additional languages were added to your website. Now you need to translate your content, media, and options.  

Media Translation Setup

Once you finish your WPML setup, you will see the notification to finish the Media Translation Setup. You can do this by clicking on the link in the notification or by navigating to Dashboard > WMPL > Media Translation. 

Once you navigate to this page, click on the “Finish setup” button. This will load all of your website media and automatically copy the media name from the original language. 

That’s it – your media translations are set. 

In addition, if you wish to edit translations for your media at any time, you can click on the translation (pencil) icon for any media files in the list. Here, you will see the following settings:

• Translate the file name
• Use a different file – this can be used for example if you have a logo or images with translatable text

These additional settings are not obligatory, and you do them at any time for any media file.

Translating Pages, Posts, and Post Types in Astra

When you translate pages or posts with WPML, you get linked versions of pages or posts where each version is assigned a language. 

We will show you how to create the translated version of your page in just a couple of steps:

Step 1 – Navigate to Dashboard > Pages and check the column next to the page titles in the pages list. You will notice the WPML language options for each page. All pages are in your default language, and the column contains flags of the other language available.

Step 2 – To create a page version in another language, just click on the “+” icon in the desired language column. This will open an Advanced Translation Editor that will allow line-by-line translation. 

By default, the editor will display content in “dual” mode, showing the original content and translation fields on the other side. 

We decided to add a French version of the page in our example:

Step 3 – To translate a line of the content, you need to click on the matching translation field for each line and provide the translation. Once you have added all translations, click on “Complete” to create the translated page.

Keep in mind that you will not be able to click the “Complete” button until you provide all translations. If you need to pause translating, just click on the “Back to list” button. This will save you current progress and take you back to the page list. To mark the translation in progress, you will notice that the “+” icon changed to the “cogs” icon. You can resume translating the page any time you want by clicking this icon.

Once you complete your translation and click the “Complete” button, the translated version of your page will be automatically added and linked with the original. The page list shows that existing translated versions are represented by a “pencil” icon instead of a “+” icon to mark that the translation exists.

When it comes to the page content, your designs will be automatically copied, and original content will be replaced with the translated content:

Great, you just created your page translation.

Now you can repeat these steps for all pages and languages. You can also translate all of your posts and custom post types this way.

Translating Menus and adding a Language Switcher to the Header

Now that we have translated all pages and posts, it’s time to translate the menus and manage your Language Switcher settings so website visitors can choose the language they want.

Before editing your menus, please check if activating the WPML plugin affected any of your permalinks or your menu locations in any way, and correct this.

Translate Primary (or any other) Menu

Now let’s see how you can set your menus for each of the languages added. The menus can be translated similarly as pages or posts. Here, we’ll show you how to translate your Primary Menu:

Step 1 – Navigate to Dashboard > Appearance > Menus and select your Primary Menu. Your primary menu will be set for your default language. In our case, this will be English. On the upper right corner of the “Menu Structure” section, you will notice the translation options similar to those you used for translating pages:

Step 2 – To start translating your menu, click on the language translation option. We choose to translate the menu in our example to the French language;

Step 3 – Start by giving your translated menu a name (we used “Primary Menu – French”). You will notice that the language and the original menu you’re translating are already selected. Click on the “Create Menu” button to create the translation;

Step 4 – Once your menu translation is created, you can add menu items. Keep in mind that you will see only translated pages and posts in your item list. Pages and posts that have not been translated to the language of the menu you’re editing will not be available.

Step 5 – Once you add the appropriate language versions of pages, posts, and other items to the translated menu, click on “Save Menu” to save the changes you made.

You can translate your other menus this way too.

Managing the Language Switcher

Our final step here is to manage the Language Switcher and add it to the desired location. WPML provides its own out-of-the-box Language Switcher that can be added to your menus, widgets, and footer. 

You can add Language Switcher and manage all its settings at Dashboard > WPML > Languages. Here you will find two groups of settings:

• Global “Language Switcher options” applied to all language switchers on your website,
• Individual settings for each of the language switchers added to your website

In global “Language Switcher options”, you will find the following settings:

• Order of languages: set the order in which available languages will be shown in the switcher;
• How to handle languages without translation: chose if you want to with the content without translation – skip it or link it to the home page in selected language;
• Preserve URL arguments: if you use any of the plugins that need URL arguments to function properly, add these here to keep them when switching languages;
• Additional CSS: you can use this option to add styling to your Language Switchers using CSS;

Individual settings can be applied to each of the language switchers in different language switcher sections. These sections are:

• Menu language switcher;
• Widget language switcher;
• Footer language switcher;
• Link to translation of posts.

Adding A Language Switcher

As an example of how to edit these settings and add the language switcher, we’ll be adding the Language Switcher to the Primary Menu. Please follow these steps:

Step 1 – Navigate to Dashboard > WPML > Languages and scroll down to the “Menu language switcher” section. Click on the “Add a new language switcher to a menu” button. This will open a popup for adding a new menu language switcher;

Step 2 – Choose to which of your menus you would like to add this language switcher. We will choose the “Primary Menu” here;

Step 3 – Select if you want to show the languages as a dropdown menu or the list of languages;

Step 4 – Decide how the languages should be represented: by the flag, native language name, or the name in the current language. Also, here you can select if you want to show or hide the “current language” option;

Step 5 – In the end, set the language switcher colors. Click save to add your Language Switcher:

Great job, your multilingual website is ready for visitors.

Other WPML Settings

In addition, at Dashboard > WPML, you can find a lot of additional settings for your multilingual website.
For more details, or help and assistance working the WPML plugin, you can check the official WPML documentation.