Help Center

Knowledge base Plugins JetAppointment How to Translate Appointment Website Using WPML

How to Translate Appointment Website Using WPML

This tutorial will explain how to make the appointment website translation-ready and which WPML modules you will need to translate the JetAppointment plugin content.

JetAppointment is a WordPress appointment booking plugin. Using its guided Installation Wizard, you can add a possibility to book hourly services and schedule hourly appointments through the appointment website online. 

JetAppointment is now WPML-ready, which allows you to translate the plugin content like Services and Providers posts, appointment booking forms, and other dynamic data into the desired foreign language. From this tutorial, you will learn how to create a language configuration file and translate the JetAppointment content.

Making the Appointment Website Pages Translatable

To turn a WordPress project into a multi-language appointment site, you’ll need the core Multilingual CMS plugin by WPML, String Translation, and Media Translation. Below are the installation steps:

  1. Open the WPML pricing page and purchase the Multilingual CMS.
  2. Follow the Plugins > Add New pathway, upload the .zip file, and activate it afterward. 
  3. Start the WPML Setup process.
  4. Choose the secondary site languages and set the URL format.
  5. Register WPML
  6. Pick the translation method.
  7. Finish the installation. 

Don’t forget to repeat the second step for String and Media Translation plugins. Once you finish the setup, you need to make the WordPress appointment plugin content WPML-ready.

Things to know

Please acknowledge that there is a more detailed WPML installation routine. Check it if having questions at any setup stage.

How to Make the JetAppointment Content Translatable

JetAppointment is a JetEngine-based plugin, which means it won’t work as needed without a dynamic content plugin. For that reason, to translate JetAppointment posts and pages, it is necessary to make both plugins translatable. 

To do so, we’ll need to create a language configuration file called wpml-config.xml, where we shall mention all the CPT, meta field, form, and taxonomy data that needs to be picked by the WPML modules.

Creating a language configuration file

To generate a wpml-config file, you’ll need to install and activate the Multilingual Tools plugin by WPML. When added to the root directory of the plugin/theme, this file tells the translation plugin which content to detect. 

Things to know

We have already described a Multilingual Tools installation process in detail. If any questions arise, kindly follow the link and check the routine.

Download the plugin from GitHub, upload the archive to the WordPress dashboard, and activate the plugin. Now, go to Multilingual Tools > Configuration Generator and tick the JetAppointment, JetEngine, and JetFormBuilder plugin content (if you use the latter plugin to create appointment booking forms). 

As to settings, they are different for Custom Post Types and Custom Fields

In the Custom Post Types section, you can choose from three different options. It is possible to:

  • make the items translatable and show them on the secondary-language pages;
  • make the items translatable and show the translation whenever provided;
  • ignore the post types making them non-translatable.

In the Custom Fields section, four options allow you to:

  • leave the custom fields “as is” without translating them;
  • copy once the field values from the primary language website to the secondary-language site version;
  • always copy the default-language custom field values to the secondary-language pages;
  • make the field values translatable.

Don’t forget to make the JetAppointment-related taxonomy translatable. In this case, we mean the “services” taxonomy.

Things to know

When it comes to taxonomy translations, you need to ensure that the Slug translations option is activated in the WPML > Settings. Do it to sync the taxonomy terms between website languages.

active slug translations

Last but not least, you need to configure the plugin strings translation in the Admin Texts section. As to JetAppointment, there are two string arrays – “jet-apb-settings” and “jet-appointments-booking-db-version” – to select.  

admin texts section on configuration generator screen

All in all, you must set the following elements to “Translate”:

  • two custom post types, which are Teams standing for Providers and Services;
  • JetFormBuilder plugin content;
  • JetEngine plugin content including Listing Items;
  • one taxonomy called “services”;
  • custom fields related to JetEngine CPTs, JetFormBuilder appointment booking forms, and JetAppointment attributes;
  • two JetAppointment string arrays called “jet-apb-settings” and “jet-appointments-booking-db-version.”

Once you configure the translation settings, scroll down the page and pick the “Save to theme directory” option to save the configuration file to the active theme directory at once. Hit the “Generate” button and proceed to translate the appointment website content. 

Translating taxonomy terms and slugs

Head to the WPML > Taxonomy translation directory and select the services taxonomy from the drop-down list.

selecting services-related taxonomy to be translated

Once you see the taxonomy translation page, start adding translations by pressing the “+” icon. Sometimes, there are no taxonomy terms to translate, but taxonomy labels and slugs are.

taxonomy labels and slugs translations

Translate them into the second language and press “Save” when editing each item.

translating a taxonomy slug
Things to know

We have prepared a more detailed taxonomy translation routine. Please check out this JetEngine tutorial for references.

How to Translate the JetAppointment Content

Since JetAppointment cannot perform without JetEngine and JetFormBuilder, it is necessary to translate the Custom Post Type items and the booking forms separately.

Translating the Custom Post Type content

Open the Appointments > Services tab in the WordPress admin panel. Click the “+” icon next to the service name to add a translation.

all services in the appointments tab

You will be taken to the Advanced Translation Editor page, where it is necessary to enter translations line by line. Do it by hand or use the automatic translation feature. Keep in mind that you need to complete the bottom progress scale. Once it is 100%, the job is deemed done. Hit “Complete.”

adding service translations in the advanced WPML editorRepeat the routine as many times as necessary to translate all services. 

Now, proceed to the Appointments > Providers directory, which will take you to the Teams CPT. Submit translations to all team member posts.

translated team member posts in WordPress

Translating the page templates

Except for CPT content, we need to translate the page templates that contain the appointment-related data. To do so, head to WPML > Settings, scroll down to the Post Types Translation section and locate the “Theme Parts (jet-theme-core)” row. Set it to “Translatable” and press the “Save” button.

making theme parts translatable

Navigate to the Crocoblock > Theme Builder directory and press the “+” icon next to the desired page template. We’ll translate the Single Barber template. 

theme builder tab in crocoblock WordPress directoryAdd the translations by hand or use the Translate automatically feature. Remember to confirm each row separately until the progress bar is 100% full. Then press the “Complete” button.

adding translations to single barber template in WPML

Once you check the page on the front end, you’ll see that all texts and titles are now translated. 

As soon as you translate the appointment website page templates, proceed to forms.

Translating the appointment booking forms

Even though we have marked JetFormBuilder content as “Translatable,” the WPML plugin will not be able to detect the Form content wholly. If we proceed to JetFormBuilder > Forms and press the “+” icon to add a secondary-language translation, the plugin will simply let us translate the Form’s title. Obviously, this is not enough.

form title translation in the advanced WPML editor

To translate the appointment booking form into the second site language, you’ll have to duplicate it and add it to the secondary site version. Go to JetFormBuilder > Forms and press “Duplicate” to create a copy of the form.  

duplicate the service booking form

Open the duplicated form version, give it a title, and start adding translations by changing only the field Labels and Placeholders, if any. If you modify any other form components, chances are the form will not work correctly on the front end.

appointment booking form fields translationBesides that, you can translate the Post-Submit Actions and General Messages Settings sections. The method is the same; enter the translations into the allowed text areas without changing the core field values. 

Once you finish, press the “Update” button and go to the page where the form is placed. Switch the page to the necessary language and substitute the form in Elementor. Right-click the Form area and select the second-language form in the Select form drop-down list.

appointment booking form in Elementor

Update the changes and check the result on the front end. As you can see, the availability calendar labels did not change.

availability calendar on the front end

To fix that, follow the WPML > Theme and plugin localization pathway. In the Strings in the plugins section, find the JetAppointment plugin, tick it and press the “Scan selected plugins for strings” button. Once the scanning ends, you will see all the plugin’s strings.

jetappointment booking strings

Now, open the WPML > String translation directory and select the “admin_texts_jet-apb-settings (44)” domain from the In domain drop-down list. The plugin will show you all strings from that particular domain. Click the “Display all results” link and add the missing string translations one by one. 

translating jetappointment strings

To make the availability calendar work, you need to input translations for every admin text string. Once done, see how the calendar looks on the front end now.

translated calendar labels in the front

Sometimes, the availability calendar labels can still be shown in the primary language on the secondary-language page even after submitting the string translations in the dedicated WPML module. To fix it, go to Crocoblock > JetPlugins Settings > JetAppointments and click on the Labels tab. Enable the Use custom labels toggle if inactive. Then refresh the page that contains the service booking form – that should do it.  

active use custom labels toggle
Things to know

If some content is still not translated in the form, type the exact term in the Search for field and provide the translation for it..

string search by the exact term

Please remember that JetAppointment content sections can embrace elements from other Crocoblock plugins like JetEngine and JetElements. To make WPML modules detect and make them translatable, you will have to do the additional setup. Please refer to the following Knowledge base tutorials:

For instance, the untranslated service duration and price format in the service booking form relate to the Listing item. To translate it, go to JetEngine > Listings, click the “+” icon next to the corresponding listing item, and submit its translation. 

listing item translation

That’s all. Now you know how to use WPML functionality to translate the JetAppointment plugin content into a secondary language you choose and create a multi-language appointment site.   

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.