Back to contents

JetWooBuilder: How to Translate Woo Page Templates Using WPML

From this tutorial, you will learn how to prepare a WooCommerce shop website to be translated with WPML modules and how to use them to translate the JetWooBuilder templates.

JetWooBuilder is a WooCommerce page builder for Elementor. Using its 60+ widgets, you can create unique Elementor product page layouts and templates for My Account, Thank You, Cart, Checkout, and other pages. If you don’t want to build page templates from scratch, you could use custom Woo page templates. 

JetWooBuilder is now WPML-compatible, which means you can translate its templates and widget-added content into multiple foreign languages. This tutorial will take you through basic preparation steps and show how to translate JetWooBuilder templates step-by-step.

Making the WooCommerce Shop Website Translation-Ready

To translate a WordPress website, you’ll need the core WPML Multilingual CMS plugin. 

  1. Go to the WPML pricing page and get the Multilingual CMS plugin.
  2. Proceed to Plugins > Add New, upload the .zip file, and activate the plugin after installation. 
  3. Run the WPML Setup wizard.
  4. Add the necessary languages and choose the URL format.
  5. Register WPML
  6. Choose the preferred translation method.
  7. Install the glue WooCommerce Multilingual WPML plugin. 
  8. Complete the remaining installation steps.
NOTE
Don’t worry if you do not see WooCommerce Multilingual among helpful plugins in the WPML Setup wizard. Log into your WPML account, navigate to the Downloads tab, and get the needed plugins from there. To cover the WooCommerce site translation project, you’ll need String Translation and Media Translation plugins, as well.
downloading WPML plugins from the Downloads tab in the user account

As soon as you complete the WPML Setup, proceed to adjust WooCommerce Multilingual

  1. Open the WooCommerce > WooCommerce Multilingual pathway in the WordPress admin panel. 
  2. Click the “Start the Setup Wizard” button.
woocommerce multilingual screen in the wordpress dashboard

3. Go through the installation steps and decide on the Translation Option. By default, the system offers three allowing you to:

  • translate all products automatically; 
  • choose which products to translate and display only translated products;
  • choose which products to translate and display those with no translation as untranslated.

4. Close the setup window after you complete all steps.

woocommerce multilingual congratulations screen
NOTE
You can skip some steps and return to them later through the WPML > Settings directory.

Afterward, do the final multilingual shop setup. Go to WooCommerce > WooCommerce Multilingual > Status and fix the issues marked with a notice icon.

woocommerce multilingual issues and missing translations

Once done, you can proceed to translate the Elementor WooCommerce plugin templates.

How to Make the JetWooBuilder Templates Translatable

JetWooBuilder is a multi-component plugin, so it requires some time configuring. For starters, you’ll have to make its templates, meta fields, products, widget strings, and taxonomies translatable. Otherwise, the WPML plugin will be unable to detect the JetWooBuilder content and translate it into secondary languages.

Primary preparations

As mentioned previously, you are supposed to buy the Multilingual CMS plan and install/activate the WPML String Translation, WooCommerce Multilingual, and WPML Media Translation modules.

1 Step — Install and activate the Multilingual Tools plugin

Multilingual Tools is a WPML plugin that can help you generate the wpml-config.xml file and place it into the root folder of the theme/plugin. You can find out more about language configuration files. In brief, such a file is meant to tell WPML which custom post types, taxonomies, meta fields, etc., need to be translated. 

  1. Download the Multilingual Tools plugin from GitHub by clicking Code > Download ZIP.
  2. Upload the .zip folder to WordPress through the Plugins > Add New directory. 
  3. Activate the plugin once installed. 

Once done, you will see a new tab in the WordPress admin panel called “Multilingual Tools.”

wpml multilingual tools plugin in the wordpress admin panel
NOTE
Since the Multilingual Tools plugin interferes with the core theme folders and files, you should not use it on live production websites.

2 Step — Generate a language configuration file

Proceed to the Multilingual Tools > Configuration Generator directory. Here, you will see five sections:

  • Custom Post Types;
  • Custom Fields;
  • Custom Taxonomies;
  • Admin Texts;
  • Shortcodes.

Each section allows you to set which elements should be translated.

In the Custom Post Types section, there are three options you can choose from:

  • Do nothing. Select this radio button to ignore the items; 
  • Translatable – only show translated items. Select this option if you prefer to output only translated items on the front end;
  • Translatable – use translation if available or fallback to default language. If you select this option, the items will be displayed either in the second or default language, depending on the provided translations.

Tick the JetWooBuilder-related post types and set the option to “Translatable.”

making custom post types translatable in multilingual tools

In the Custom Fields section, you can choose one of the four available options: 

  • Don’t translate – the custom field values will be outputted in the default language on secondary-language pages;
  • Copy – by selecting this option, the plugin will always copy the default-language values of custom fields to the secondary-language site version, including the cases when the initial custom field value has been modified in the primary language;
  • Copy once – select this option to make the plugin copy the custom field value to the secondary language during the first-time translation. Moreover, if you prefer setting a different value here, the previous value won’t overwrite the new one; 
  • Translate – the custom field values will be made translatable.

Detect the JetWooBuilder custom fields and tick them. In our case, there are three fields: _jet_woo_builder_content, _jet_woo_template, and _jet_woo_product_video_type. You can choose to translate all three custom fields or set different options for each. Please make sure to set the _jet_woo_template field to “Translate,” as it will help the WPML modules pick the JetWooBuilder template content.

custom fields section in WPML multilingual tools plugin

Furthermore, there is the Custom Taxonomies section. 

WooCommerce websites are usually multi-page marketplaces where it’s possible to buy anything from clothing to tools and vehicles. To make it easy to navigate, website developers tend to categorize scattered items and products, creating the so-called taxonomies. 

Find the JetWooBuilder and WooCommerce-related taxonomies in the dedicated section and set the option to “Translatable.” Don’t forget to tick the items.

custom taxonomies section on configuration generator screen
NOTE
Double-check whether the Slug translations option is active. Head to WPML > Settings and scroll down the page to the Slug translations section. If it’s inactive, enable it. In this way, the translated taxonomy terms will be synched between site languages. Otherwise, the secondary-language pages will be displayed poorly.
active slug translations

Lastly, we’ll need to set the Admin Texts section, which stores the plugin strings. There are many JetWooBuilder strings on the website, yet not all should be translated. We’ll choose the major one – “jet_woo_builder” – to let the Configuration Generator know it must be added to the wpml-config.xml file.

admin texts section on configuration generator screen

Afterward, scroll down the page until you see the “Generate” button. Firstly, choose the preferred option between “Save to theme directory” and “Save to file.” 

  • Save to theme directory. It means that the newly-generated configuration file will be immediately saved to the theme folder.
  • Save to file. The language configuration file will be saved to the PC Downloads folder in the XML format. 

We decided to use the first option to save time and effort. Secondly, press the “Generate” button. That’s it. Now you can proceed to translate the WooCommerce taxonomy content and JetWooBuilder templates.

Translating taxonomy terms and slugs

Follow the WPML > Taxonomy translation pathway and select the needed taxonomies from the drop-down list. Since we are translating the WooCommerce website items, it is vital to choose those related to products like Product types, Product color, Product categories, Product size, etc.

selecting product-related taxonomies to be translated

Once the taxonomy translation page opens, press the “+” icon to start adding translations. Provide the translation and click the “Save” button. Repeat these steps until all taxonomy terms, labels, and slugs are translated into the preferred languages.

adding taxonomy terms translations by hand

Not sure how to add a taxonomy term translation correctly? This JetEngine tutorial will have you covered.

NOTE
Some taxonomy terms are better to leave “as is” since they represent universally accepted notions like brand names and size chart indications. Therefore, you need to copy the primary texts to the secondary site languages. Mouse over the taxonomy term and click the “Copy to all languages” link. In the newly-opened pop-up window, tick the “Overwrite existing translations” options and press “OK.”
copying taxonomy terms to all languages

If you have any questions along the way, take a look at this taxonomy translation tutorial by the WPML team. 

After you submit all taxonomy translations, they will be automatically synced to the WooCommerce Multilingual module. However, some translations are still missing, and it’s crucial to provide them. Otherwise, the site content won’t be adequately displayed on the front end.

woocommerce multilingual status tab

As you can see, it is necessary to translate the WooCommerce products and configure the multi-currency mode. 

Translating the WooCommerce products

Open the WooCommerce > WooCommerce Multilingual directory. By default, you will see that the first tab, Products, is open. Start adding translations to each product by clicking the “+” icon next to its name.

products tab in the woocommerce multilingual module

Once you see the Advanced Translation Editor page, enter translations line by line. You can do it manually or use the Translate automatically option on the top toolbar. Please note that it will be possible to press “Complete” and finish the product translation only when the bottom progress scale is 100% full. Repeat the procedure for every separate WooCommerce product.

adding translations to woocommerce products

Configuring the multi-currency mode

Now that you can output translated WooCommerce products on the secondary-language pages, it is crucial to show relevant pricing. 

To set up the multi-currency mode, head to WooCommerce > WooCommerce Multilingual and open the Multi-currency tab. Enable the multi-currency mode if not active and choose the option according to which the currencies will be shown.

multi-currency tab in woocommerce multilingual

You can choose between “Site Language” and “Client Location.” To add a new currency, press the “Add currency” button. In the Currencies section, there is a table where it is possible to set the relevant currency for each site language. By ticking/unticking the corresponding checkbox, you will show a particular currency on the given website version. Configure the remaining settings and press “Save changes.”

How to Translate the JetWooBuilder Templates

Now, let’s proceed to translate the actual JetWooBuilder pages. Open the Crocoblock > Woo Page Builder directory, which stores all the site page templates. Pick whichever template you wish to translate and press the “+” icon to add the translation in the desired language. Then submit the translated content by clicking “Complete.”

adding translations to jetwoobuilder templates

Repeat the process until all the necessary Woo Page templates are translated.

single product templates translation

It’s time to see the final result on the front end. Navigate to the desired page in the selected secondary language and see the way it looks now:

NOTE
If some translations on the page are still missing, chances are they have been added with other widgets, not JetWooBuilder. For instance, the untranslated Reviews section was created thanks to another plugin, JetReviews.

Please remember that JetWooBuilder page templates can contain sections and elements from other Crocoblock and default WordPress plugins, but that does not mean the WPML modules will be equally able to pick and translate them. Therefore, you will have to do some extra setup. Perhaps, the following Crocoblock tutorials will help:

That’s all. Now you know which WPML modules you should use to translate JetWooBuilder templates into any preferred language.