# Translating Calculator with WPML

For multilingual sites, it is important to translate the same calculator and have it automatically displayed in the chosen language by the user. Using WPML plugin by following the manual below the Calculators can be translated into multiple languages.

{% hint style="info" %}
The manual below is for translating the Plugin into different languages at the same time to make it multilingual. If you need to just translate into another language please skip this section and follow the [Translation Basics](https://docs.stylemixthemes.com/cost-calculator-builder/translating-cost-calculator-into-a-different-language/translation-basics) and [Translation Static Strings](https://docs.stylemixthemes.com/cost-calculator-builder/translating-cost-calculator-into-a-different-language/translating-static-strings) sections.
{% endhint %}

WPML is a popular plugin among users for setting up a multilingual WordPress site and has control over the translations on a deeper level.

{% hint style="info" %}
WPML requires a Multilingual CMS license or higher. More information about WPML's pricing options can be found on its [website](https://wpml.org/).
{% endhint %}

## Translating Calculator into different Languages

### Installing and Activating WPML

To make site multilingual the main WPML components should be installed and activated:

* WPML Multilingual CMS (the core plugin)
* String Translation
* Media Translation
* [WooCommerce Multilingual](http://wordpress.org/plugins/woocommerce-multilingual/)

They are available from your account’s [Downloads](https://wpml.org/account/downloads/) page on WPML.org.

{% hint style="success" %}
You can read more about [how to download and activate your WPML plugins](https://wpml.org/faq/install-wpml/) on your site.
{% endhint %}

### Configuring WPML

After activating WPML main components, click on **Configure WPML** to finish the plugin installation:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FanD5qoBCbwKCNqkvjmtR%2FCCBN%20-%20%20WPML%20Configure%20start.png?alt=media&#x26;token=ff265dc5-05c7-4322-8291-35d4261f2d46" alt=""><figcaption></figcaption></figure>

In the setup wizard you will be offered two different translation modes:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FvqFhvofKSBEwAvpFIqdj%2FCCBN%20-%20%20WPML%20wizard%20select%20modes.png?alt=media&#x26;token=b39c64e4-9415-49bb-90ae-8381c3583a94" alt=""><figcaption></figcaption></figure>

* **Translate Everything** - This option sends all of your site’s content to be translated automatically when you finish the setup wizard or change your translation mode. As you add new content or edit existing content on your site, WPML translates it immediately, which means your site’s translations are never out of date.
* **Translate Some** - This option allows you to set a translator and work on your website to translate selected content. To Translate the Cost Calculator this mode is suitable.

### Translating the Calculator

Initially, build Calculator that matches your business needs by adding elements in the main language:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FzZjnPz3zGee2lOparGkZ%2FCCBN%20-%203.1.9%20Calculator%20in%20main%20language.png?alt=media&#x26;token=08d19fe8-2b2b-44bb-aea4-53466aecddcd" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
When a calculator is not translated into multiple languages, and a user switches the language settings of the page, the calculator will still be displayed in the main language that it was originally designed for.
{% endhint %}

After creating a calculator in the main language, it can be translated into other languages following these steps:

1. Go to the **WPML** > **Translation Management** page.
2. Select the previously created that you want to translate.
3. In the **Select Translation options section**, choose the **Translate** option corresponding to the language(s) you want to translate the page.
4. Click the **"Translate selected content"** button to add the item to the translations queue.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FeoqHn2hy9RHqt1yIWnRv%2FCCBN%20%203.1.9%20-%20Translate%20selected%20content.png?alt=media&#x26;token=f046100e-603e-4447-9025-8bb58e08d43f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To translate content including calculators, translators must be added to your site.
{% endhint %}

{% embed url="<https://wpml.org/documentation/translating-your-contents/how-to-set-up-local-translators-and-language-pairs/#adding-local-translators-through-translation-management>" %}

To translate those jobs, go to **WPML** > **Translations** section and click on "Take and Translate" to begin the translation process:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FUFhIKcOd8F7vg8sNIeLd%2FCCBN%20-%203.1.9%20Calculator%20start%20translting.png?alt=media&#x26;token=a68ded73-e234-4c32-a293-95a59cb1e5e4" alt=""><figcaption></figcaption></figure>

On the opened Advanced translator editor, translate the labels of the fileds and click on the "**Complete**" button:&#x20;

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FvOakvDTeqgdsfZwjmlwN%2FCCBN%20%203.1.9%20-%20ADV%20editor.png?alt=media&#x26;token=6289691f-5c04-44cf-a916-8e5c883f3a00" alt=""><figcaption></figcaption></figure>

### Translating the Pages with an Embedded Calculator&#x20;

Initially, create the page and following the manual below embed one of the calculators to the page:

{% embed url="<https://docs.stylemixthemes.com/cost-calculator-builder/plugin-features/insert-calculators-into-the-page>" %}

To translate the page where the Cost Calculator is added follow these steps:

1. Go to the **WPML** > **Translation Management** page.
2. Select the page that you want to translate.
3. In the **Select translation options section**, choose the Translate option corresponding to the language(s) you want to translate the page.
4. Click the **Translate** button to translate the content of the page to another language.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FrixtH6m3GwMQFAl8wpcR%2FCCBN%20%203.1.9%20-%20translate%20the%20page.png?alt=media&#x26;token=6cc98ec8-556a-49cf-b6b5-41e64f5d13fe" alt=""><figcaption></figcaption></figure>

To translate those jobs, go to **WPML** > **Translations** section and click on "Take and Translate" to begin the translation process:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FlVDcXCYyImp8jAigBanP%2FCCBN%20%203.1.9%20-%20translate%20the%20page%20take.png?alt=media&#x26;token=4a03df38-5b20-435a-82c5-6deb4ba42515" alt=""><figcaption></figcaption></figure>

On the opened Advanced translator editor, translate the labels of the fileds and click on the "**Complete**" button:&#x20;

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FvqeFU7TGLrvl6rPejv32%2FCCBN%20%203.1.9%20-%20translate%20the%20page%20adv.png?alt=media&#x26;token=2142c9f0-8f89-4e3d-9c93-ca35a7902906" alt=""><figcaption></figcaption></figure>

### Translating Static Strings

While translating the Cost Calculator, you may notice a couple of parts that aren't translatable by editing the Calculator and its settings.

If **Translate Everything** is turned on while configuring the WPML, the strings will be available for translation.

If you selected **Translate Some** follow these steps:

* Navigate to **WPML** > **Theme and plugins localization** and select Cost Calculator Builder & Cost Calculator Builder Pro plugins to Scan for strings:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fe8S7n6uiG1EsVHVvGhxO%2FCCBN%20-%20%20WPML%20scan%20for%20strings.png?alt=media&#x26;token=0155d3cc-b6e9-47df-8d6a-7a9867d31010" alt=""><figcaption></figcaption></figure>

* WPML makes static texts in Cost Calculator available to translate with String Translations.
* Navigate to **WPML** > **String Translation** and search for the text that you want to translate:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FnBQRjSeESm68Oy3iJLLf%2FCCBN%20-%20%20WPML%20string%20translation.png?alt=media&#x26;token=eeab8382-f022-42ba-ae1c-6c6d50631372" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Some texts from the Cost Calculator admin area may not be listed in the String Translation section, and they may not be found in search results. For example, content of Company Info in PDF Entries settings:&#x20;
{% endhint %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FmKksd2Xj9X2gjT7zo9r5%2FCCBN%20-%20%20WPML%20company%20info%20not%20availabe.png?alt=media&#x26;token=388eb002-dcfc-4f2e-9f39-f058c76ccc98" alt=""><figcaption></figcaption></figure>

Navigate to **WPML** **> String Translation > Translate texts in admin screens** to make available for translation:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FbhMZRxZZCbZdtYtJDN10%2FCCBN%20-%20%20WPML%20text%20in%20admin%20area.png?alt=media&#x26;token=514d80cc-6bf5-40ab-b436-3003dc40869d" alt=""><figcaption></figcaption></figure>

Search for the Text that you are looking for and add to String Translation:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fc7GKm5OmK2KM5n2oCTWX%2FCCBN%20-%20%20WPML%20text%20in%20admin%20area%20found.png?alt=media&#x26;token=3e038fb2-833b-4ad9-9be1-bf255356337f" alt=""><figcaption></figcaption></figure>

Following the Steps above your Calculator can be translated into more than one language.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F1JzJ9dYQzj37FjAJla69%2FCCBN%20-%20WPML%20Translated%20calculators.gif?alt=media&#x26;token=2bf846e5-e637-4c05-8662-66f023356578" alt=""><figcaption></figcaption></figure>

## Translating WooCommerce Products

The Calculators can be added to the Single product page of WooCommerce using the Product Category.

{% content-ref url="../cost-calculator-settings/calculator-settings/woo-products" %}
[woo-products](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-products)
{% endcontent-ref %}

To assign a Proper calculator for different translations of the products, they should be translated by the following manual:

### Installing and Activating WooCommerce Multilingual

To install the plugin, go to Dashboard and find the **Plugins** section from the left menu and choose **Add New.**

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FdFTjklEdlzJFpT262CGW%2FCCBN%20-%20%20Loco%20add%20new%20plugin.png?alt=media&#x26;token=d71ebccd-d9ad-41c3-a9d1-978a48658667" alt=""><figcaption></figcaption></figure>

You need to search **WooCommerce Multilingual & Multicurrency** and install & activate it on the opened page.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FzN6n3SnHlOtUUTesbSKJ%2FCCBN%20-%20%20WPML%20woo%20install.png?alt=media&#x26;token=77531930-1367-4ace-9cd6-cee9cd705e1a" alt=""><figcaption></figcaption></figure>

After activating the Plugin run WooCommerce Multilingual & Multicurrency Set Up wizard:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fe5fAjnIBAD9qJWc7KUwR%2FCCBN%20-%20%20WPML%20woo%20wizard.png?alt=media&#x26;token=f92ed504-221a-4575-adef-cb6d24ee231d" alt=""><figcaption></figcaption></figure>

In Translation Options step, select "*I'll choose which products to translate. Only show translated products.*":

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FMObzs7BFnvHS5lcbEiBK%2FCCBN%20-%20%20WPML%20woo%20wizard%20translate%20options.png?alt=media&#x26;token=e2ecb668-d91a-46e1-818d-1bd22e1a1633" alt=""><figcaption></figcaption></figure>

### Translating WooCommerce Products and Categories

After finishing Set up wizard go to the **Dashboard >  WooCommerce > WooCommerce Multilingual & Multicurrency** and open **Categories** Tab.&#x20;

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F4QcRSr6zBsSV61zoVPxz%2FCCBN%20-%20%20WPML%20woo%20categories.png?alt=media&#x26;token=af05ccbe-0f25-46a5-8da1-bc0135bd4fd7" alt=""><figcaption></figcaption></figure>

There translate all Product Categories on your website:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FYvTmmZPXp9q7zfENT9ZD%2FCCBN%20-%20%20WPML%20woo%20categories%20translated.png?alt=media&#x26;token=fda46e05-fe21-4bcd-bb7a-0720caebfaa5" alt=""><figcaption></figcaption></figure>

Go to the **Dashboard >  WooCommerce > WooCommerce Multilingual & Multicurrency** and open Products Tab.&#x20;

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FHRhIZziwT2PYy1Ba4U9r%2FCCBN%20-%20%20WPML%20woo%20proucts.png?alt=media&#x26;token=71e42376-17e1-4154-8a75-07e4af261bd8" alt=""><figcaption></figcaption></figure>

There translate all Products on your website:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FglHkHpWk3ZNgMuOyKamM%2FCCBN%20-%20%20WPML%20woo%20translated.png?alt=media&#x26;token=9bfc5273-2855-4b5f-9920-4d2de285df89" alt=""><figcaption></figcaption></figure>

### Assigning Calculators to WooCommerce Products

Edit the Calculator that matches with selected Site language:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FkZOZlOSXWBKxjRETwDcw%2FCCBN%20-%20%20WPML%20edit%20spanish%20calc.png?alt=media&#x26;token=56717550-8174-400a-9178-ff8dfcdf256b" alt=""><figcaption></figcaption></figure>

Go to **Settings > Woo Products** and select the WooCommerce product category in the corresponding language:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fa6QJ0BzN8GenwYMPMaEt%2FCCBN%20-%20%20WPML%20select%20spanish%20category.png?alt=media&#x26;token=e3172f31-5447-4d1b-b527-c868f84301f2" alt=""><figcaption></figcaption></figure>

Do the same steps for other languages and select the WooCommerce product category in the corresponding language:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FgBY003WPiHIFKP4oODjx%2FCCBN%20-%20%20WPML%20select%20englishcategory.png?alt=media&#x26;token=8dfee93f-4198-4e82-b8ed-918cad8e3c98" alt=""><figcaption></figcaption></figure>

When manual above followed, the correct calculator is attached depending on the translation of the product.

{% tabs %}
{% tab title="Englsih" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fk3qcujPdQ0gjKiF4XngG%2FCCBN%20-%20%20WPML%20product%20eng.png?alt=media&#x26;token=98aa545b-f858-4551-bee6-b59aec46aea4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Spanish" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FUOxFVVBjvp1Z5wNopbxO%2FCCBN%20-%20%20WPML%20product%20spanish.png?alt=media&#x26;token=1833f08d-f2bc-4ca8-9b9b-8e9bf3cb1ded" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FIje3AWQZA7slEU3x4WC3%2FCCBN%20-%20Woo%20produucts.gif?alt=media&#x26;token=8e373030-4a6f-4114-aa2a-084eafc14e7e" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Please contact our [support team](https://support.stylemixthemes.com/tickets/new/support?item_id=29) if for some reason the translations do not work even though you have done all according to the manual.
{% endhint %}