How multilingual WooCommerce sites work
WooCommerce products are custom WordPress “posts” with custom fields. They are arranged using the “product categories” and “product tags” custom taxonomies.
When the site uses WPML, every content element gets a language. This means that each product, category, and tag will have a language attribute. Translations are saved in the database as separate products, linked together using WPML’s language table. Translated products share the same images, and have their separate fields, with texts in the right language.
Site administrators can translate conveniently using WPML’s product translation table. This way, they can focus on translating the required texts, without having to worry about how translations are stored in the database.
Because translations are separated in the database, it’s also easy to display multilingual WooCommerce sites. In fact, if you use the WordPress and WooCommerce APIs, your theme may already be multilingual-ready. With a little testing and possibly small edits, you can achieve complete multilingual compatibility and enjoy new markets.
Required plugins for multilingual WooCommerce
To run multilingual WooCommerce sites, the following plugins are needed:
- WPML String Translation
- WPML Translation Management
- WPML Media Translation
- WooCommerce Multilingual
WPML and all related plugins are available with the Multilingual CMS package.
Hard-coded texts in templates
Your template files display a mix of product information and hard coded texts. For example, most templates will include the product name and a “buy” link. The product name comes from the database, so you don’t need to worry about translating it.
You should make sure that all hard-coded texts are translatable, using GetText.
“Similar products” and “Buy now!” are not wrapped in GetText calls.
Make sure that you use your theme’s textdomain for all GetText calls.
Hard-coded WooCommerce pages
Many e-commerce themes include special pages, like the ‘cart’ or ‘account’. The theme often includes links to these pages, appearing on every page on the site.
If you use a WordPress menu for these links, you should be all set. WPML displays a different WordPress menu for each language, so the links to these ‘special page’ will be different, per language. However, if you hard-code these links in template files, you need to allow WPML to replace the links, with links to these pages in the right language.
The right way to link to the special WooCommerce pages is by using the WordPress API functions and the WooCommerce page IDs. WooCommerce Multilingual filters calls to get_option() with the WooCommerce page IDs. It will return the ID of the page in the current language.
The “shop page” ID is hard coded. It will be different for different sites and for different languages.
The “shop page” URL is hard coded. It will be different for different languages.
Multilingual-ready product listings
If you use the WooCommerce shortcodes to display the product listing, you are all set. WooCommerce will load the products in the correct language and display them.
If you prefer to load products manually, using your own code, make sure that you are using the WordPress API, or WooCommerce API calls. If you access the database directly, WPML will not filter your call and you will get a mix of all products in all languages.
suppress_filters will be set to true by default, preventing language filtering.
WPML doesn’t filter low-level SQL queries. All products in all languages will be returned.
Once you’ve loaded the right products, you don’t need to worry about languages when displaying them. Each product will come with its own custom fields, with information in the correct language.
Multilingual-ready product templates
Since translations are stored in separate products, displaying a single product, in a multilingual WooCommerce site shouldn’t require special effort.
Multi-currency payment options
Your multilingual WooCommerce site may also include multiple currencies. For many non-American sites, supporting multiple currencies is a very important feature. For example, many European sites will need to charge in Euros, British Pounds and US Dollars. Eastern European sites often require Russian ruble and Asian sites need a variety of different other currencies.
Multi-currency support is included in WooCommerce Multilingual. To allow visitors to switch between currencies, your theme should include an optional currency switcher.
You can display a currency switcher, either using a PHP call or by inserting a shortcode.
<?php do_action('currency_switcher', array('format' => '%name (%symbol)')); ?>
For more information, visit the tutorial on multi-currency for WooCommerce. Please note that the currency switcher will only display if the site uses multiple currencies.
Making your WooCommerce site RTL compatible
WooCommerce themes need to follow the same RTL themes support guidelines as any other WordPress themes. You should create an rtl.css file, with the CSS rules for RTL display.
Handling different text lengths, in different languages, using fluid design
When you create your multilingual-ready WooCommerce theme, remember that some texts will be longer in certain languages and shorter in others. Sometimes, you will not even be able to test, because your end-users will translate.
For example, look at these two product blocks.
As a rule of thumb, test your theme with texts that are x2 longer and ½ shorter. This will cover you in most cases. The best way to handle texts of different size is by allowing for fluid layouts. Fluid layouts will allow elements to resize and capture the area that they need. Creating an elegant template with fluid sizes isn’t trivial, but doing so helps avoid visual glitches
Ready to get started?
If you are a developer, building WooCommerce themes or extensions, you should definitely join our Go Global program. You will receive a complementary WPML developer account and get priority support from our compatibility team. The WooCommerce shop is only one (big) section of your theme. You should definitely read our guide on achieving WPML compatibility for your themes.
Building sites for clients? Buy WPML and get started with multilingual sites for WooCommerce and beyond.