Storefront & WPML - create a multilingual shop

Introduction

Storefront, by WooThemes, is a free e-commerce theme. It is designed to be simple and clean from the ground up. It can serve either as a base theme or can be used standalone. Storefront is built using WooCommerce API and is available for use with all WooCommerce extensions.

In this tutorial, we demonstrate how to translate every part of Storefront using WPML’s Translation Management and String Translation.

To run a multilingual Storefront site with WPML, you will need the following:

Getting started

Follow these initial steps to get started:

Install and activate Storefront
Install and activate the WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management and WPML media)
Install and activate WooCommerce Multilingual
Set up WPML from WPML->Languages. See our WPML Getting Started Guide for complete reference

Creating products and product categories in the site’s default language

Before you can start translating, you need to create products and product categories in the site’s default language.

Navigate to “Products” and add your products and categories (as you would without WPML).

Add Product with WooCommerce

Add Categories to Products

Translating products and product categories

Now that your site includes product categories and products, you can translate them using WPML.

Navigate to “WPML” –> “WooCommerce Multilingual interface.”
You will see the tabs for translating the categories and products.
You can also enable multiple currencies.

For more information on how to translate products please see the WooCommerce Multilingual documentation.

Translating Products WooCommerce Multilingual

Creating and translating the homepage

Storefront contains a special page template for an e-commerce homepage. This homepage template shows lists of product categories: recent, featured, top-rated, and on-sale products. The page template also has a widgetized area in the header section.

Storefront Homepage

Create a WordPress page and select the “Homepage” template for the page:

Storefront – Choose the homepage Template

Remember to configure the above page as the site’s homepage. Go to “WordPress Setting” –> “Reading” and choose the page as the homepage static page:

Storefront Static Homepage

Now that you have the homepage configured in the site’s main language, you can translate the page either by using WPML’s “Add Translation” button or by using WPML Translation Management.

Translate your Page

Once you have translated the products and product categories, your homepage will display the product categories and products in the language of your choice.

Homepage strings we need to translate

Storefront Homepage Tranaslated

Controlling the order and content of the homepage

In any WooCommerce theme that has a homepage action on the homepage, you can use the Homepage Control Plugin to re-order the different elements on your store’s homepage as well as decide which elements to display or hide, as shown in the following screenshot:

Homepage Content Order

After you have added products, translated them, activated the WooCommerce Multilingual and multi-currency function, and modified the homepage, you should see a similar result as shown below.

English — note that the new top-rated layout, language switcher, and currency are set to Pounds

English Homepage – Top Rated Products

Spanish — note that the text is translated correctly and that the new top-rated layout, language switcher, and currency are set to Euros

Spanish Homepage – Productos destacados

Translating Storefront menus

Two menu locations are available in Storefront and both can be translated and synchronized with WPML Nav. In order to do so, you should have already created a menu in the original language and should have added items to the menu, as shown in this example:

Storefront Menu

In this example, the pages are already translated into Spanish and so you just need to click the “Synchronize menus between languages” link to synchronize the menu items.

Storefront sync Nav

Storefront Sync Main Nav

Adding the currency switcher to the header Widget

Storefront has a header widget, making it very simple to place a currency switcher.

Storefront – adding currency switcher to header widget

This was achieved by adding the “Currency Switcher” widget in the Appearance → Widgets menu as shown here:

Add Currency Switcher to Header

Polishing the language switcher

WPML can add a language switcher to any location in the Storefront theme. When you add the language switcher to one of the available theme menus, I recommend that you add a simple CSS rule to have the switcher appear perfectly and this can be added in the WPML à Languages à Additional CSS (optional) section.

img {
display: inline-block;
}

The language switcher on the navigation menu without this simple CSS fix:

Language Switcher before fix

The language switcher on the navigation menu with this simple CSS fix:

Storefront Langauge Switcher Fixed

Conclusion

Storefront can be fully transformed into a multilingual e-commerce theme using WPML. You can expect to have all your posts, pages, products and their taxonomies (Categories and Tags) Translated, as well as having the language switcher and currency switcher added just from within the WordPress admin. All of Storefront features will work as well in the multilingual web site.