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:
- Open the WPML pricing page and purchase the Multilingual CMS.
- Follow the Plugins > Add New pathway, upload the .zip file, and activate it afterward.
- Start the WPML Setup process.
- Choose the secondary site languages and set the URL format.
- Register WPML.
- Pick the translation method.
- 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.
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.
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.
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.
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.
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.
Translate them into the second language and press “Save” when editing each item.
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.
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.”Repeat 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.
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.
Navigate to the Crocoblock > Theme Builder directory and press the “+” icon next to the desired page template. We’ll translate the Single Barber template.Add 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.
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.
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.
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.Besides 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.
Update the changes and check the result on the front end. As you can see, the availability calendar labels did not change.
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.
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.
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.
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.
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:
- JetEngine: How to Make a JetEngine-Built Website Multilingual
- JetElements: How to Translate Widget-Added Content into Any Language
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.
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.