WPML (WordPress Multilingual Plugin) is a powerful tool that allows you to create and manage multilingual websites.
With WPML, you can easily translate your website’s content, including posts, pages, custom types, taxonomies, menus, and even the theme’s texts. It supports over 40 languages and provides an intuitive interface for translating content, making it accessible to a global audience.
Use Case: Creating a bilingual website (English and Spanish)
Imagine you want to build an eCommerce website that caters to both English and Spanish-speaking customers. WPML can help you achieve this by translating your website’s content and ensuring a seamless experience for users in both languages.
To begin with, let’s focus on translating basic strings in Shoptimizer and CommerceKit. These include text elements such as buttons, labels, and headings.
1. Install and Activate WPML
Ensure that the core plugin (WPML Multilingual CMS) and its addons (String Translation and WooCommerce Multilingual & Multicurrency) are installed and activated.
Note: It is very important that all of these WPML plugins are installed and active!
2. Setup WPML
Configure the plugin by selecting your default language (English) and the secondary language (Spanish). Follow the setup wizard to complete the initial configuration.
3. Translating Strings
WPML can translate any strings in Shoptimizer. For example, consider the “Add to wishlist” string from CommerceKit’s wishlist module.
To translate this string with WPML:
- Go to WPML → Translation Management.
- Scroll down to the Other texts (Strings) section.
- Search for the string you want to translate.
- Select the item and send it for translation.
The string will now appear translated on your website.
The string translation was successful and now we see it correctly displayed in Spanish.
4. Can’t Find Strings?
If you can’t find some strings in WPML’s Other texts (Strings) section, follow the steps below:
- Visit your website on the front-end.
- Go to the page with the strings you can’t find.
- Switch to the language you want to translate the strings to.
- View the page for a few moments.
As you view the page, WPML will automatically detect the texts you can’t find and populate them in the Other texts (Strings) section.
At this point, you can proceed to translate the string from the Other texts (Strings) section.
Once done, it will appear translated on your website.
5. Translating CommerceKit’s Attribute Swatches
When dealing with variable products, you may encounter issues with translating attribute swatches. These swatches are essential for displaying product variations such as colors and sizes. Currently, CommerceKit Attribute Swatches and Attribute Galleries do not support the direct translation method.
Instead, we use the duplicate method to ensure that attribute swatches and galleries are displayed correctly in the translated product.
Problem: The translated product does not show the attribute swatches, but the original language version does.
This is the original product page in English with image swatches correctly displayed:
However if we use the translate method in WPML, we can see that the swatches do not carry over to the Spanish version.
Here is how to solve it.
Go to WPML > Settings and ensure that the Product and Variations (product_variation) post types are set to translatable.
Next, delete the incorrectly translated product. Navigate to the translated language (Spanish) > Products.
Find the incorrectly translated product, move it to the trash, and delete it permanently.
Duplicate the Original Product
Go to the original language (English) product edit page. Look for the Duplicate option instead and duplicate the product.
Now, you’ll be able to edit the Spanish version. Click the pencil icon to do so.
Click on the text you wish to translate, enter the correct phrase, and then click the check icon. When you are finished translating each string, click the Complete Translation button at the bottom of the screen.
Now, we can see the finished result. The Spanish version has swatches, just like the original English.
By following these steps, you can successfully use WPML to translate your Shoptimizer store’s strings as well as more complex elements such as attribute swatches and provide a multilingual experience for your customers.
