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 WPML Multilingual CMS and its associated plugins (String Translation, Translation Management, 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
To start with we need to translate some text strings. Let’s start with “Add to wishlist” which is text from CommerceKit’s wishlist module.
The above screenshot shows what it looks like before we begin. You can see that we are on the Spanish version of the site (denoted by the /es in the URL), but the text is still displayed in English.
Next, we’re going to translate it.
- Navigate to
WPML > String Translation - Search for the string you want to translate (e.g., “Browse wishlist”).
- Click on the translation icon next to the string and enter the translated text in Spanish (e.g., “Explorar la lista de deseos”).
- Save the translation.
The string translation was successful and now we see it correctly displayed in Spanish.
4. Translating strings not found in WPML
Next, we’d like to translate the “Shipping and Checkout” string in Shoptimizer. However this string was not immediately visible within WPML.
Go to WPML > Theme and plugins localization and select the theme and plugins related to your product and click on the Scan selected themes/plugins for strings button.
Now you should be able to see the strings for Shoptimizer and CommerceKit and start the translation, by clicking on the Translate button.
Now, we can go to WPML > Translations and select what we want to translate, i.e. the ‘Shipping and Checkout’ string.
We do this by entering the correct phrase within the Translation (Spanish) field.
Now, we can see the string translated into Spanish on the frontend.
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.
