WooCommerce Online Product Designer: How to use the Loco Translate plugin to translate on the Online Product Designer?

Web to Print Online Designer by CMSmart is a must-have tool for all printing company which helps customers customize multiple all types of printing products. 

Most WordPress products include themes and plugins are in English, but if your website caters to Vietnam or a certain country, then, of course, it needs to translate according to the language of that country. 

Language customization allows you to adjust different languages to fit your needs. After selecting the language you want, your page translates into the language you specified. This type of configuration gives you complete control over languages. Using the Loco Translate plugin, you can change languages as quickly as possible.

We will explain How to use the Loco Translate plugin to translate on the Online Product Designer? according to the following tutorial.

3 steps to use the Loco Translate to translate on the Designer plugin:

Step 1: Install and Activate Loco Translate plugin
Step 2: Choose Default design editor Layout
Step 3: Translate and view the result 

I would like to present details step by step instructions for you.

Step 1: Install and Activate Loco Translate plugin

1.1. To translate languages in whatever plugin you are using, firstly, you need to install the Loco Translate plugin.

1.2. You enter Loco Translate on an input box on the right of the screen, after the plugin shows up, install and activate Loco Translate to use.

1.3. Loco Translate activates successfully. From now, you can use the plugin to translate.

Step 2:  Choose Default design editor Layout

Choose the default Layout for a design tool to specify a Layout for each Product. 

• For the Modern and Visual Layouts, you can translate with Loco Translate.  

2.1. To choose Layout, you click Settings on the NBDesigner section. 

2.2. The Settings interface displays, on the general settings page you will see the Default design editor layout on the first row to select. Here you see there are three types of Layout, please choose Modern Layout or Visual Layout.

• For the Classic Layout, you can translate with Frontend Translate show up on NBDesigner

2.3. To select the Classic layout, you also perform in the settings section of NBDesigner, after selecting Classic in the Default design editor layout section, click Save Options to save changes.

2.4. When choosing the Classic Layout, Frontend Translate will show up and you translate in it.

Step 3: Translate and view the result 

• Translate by using Loco Translate apply to Modern Layout and Visual Layout.

3.1. You can translate every plugin or theme that integrated into your website with The  Loco Translate. In Loco Translate, you click Plugins to choose plugin need translate.

3.2. After you click Plugins, the Plugins interface displays and you can see there are many plugins listed. Click on NBDesigner.

3.3. Now You can translate your text to any type of language you want, add New language to choose the type of languages you want to translate. 

3.4. Choose the type of language you want to translate on Choose a language section and click Start translating. I select Vietnamese.

3.5. The interface allows you to translate display, in here you type the sentence you want to translate in the filter translations box and enter the sentence you want to translate in the Vietnamese translation box. Finally, click Save to save the change.

3.6. After you have done the translation customization in Loco Translate, go to the General section of Settings to change the language of the Webpage into the language you want to translate. You make change the language in Site Language selection and click Save Changes to save. 

3.7. After you save the change of language for the site, go to the frontend of NBDesigner to view the results of your translation. As you can see, the "Start Design" button has been replaced by the button "bắt đầu thiết kế".

• Translate by using Frontend Translate apply to Classic Layout. Frontend Translate applies to Classic products.

3.8. To Translate Classic Layout, you go into NBDesigner and click Frontend Translate.

3.9. In the Frontend Translate interface, you click Add New Language button to choose language want to translate. The Create new language page shows up, select language on Choose language section and click Save.

3.10. Choose the language you want to translate, type text on the Search box to filter result. 

3.11. Click on the text you want to change, type the content you want to change and click OK button. Finally, click Save Language button to save the change.

3.12. You go to the General section of Settings to change the language of the Webpage into the language you want to translate. You make change the language in Site Language selection and click Save Changes to save. 

3.13. After you save the change of language for the site, go to the frontend of NBDesigner to view the results of your translation.

View the following tutorials video if you want to learn more about how to translate: 

Thanks for your reading!