How To Make WordPress Theme Multilingual and WooCommerce Compatible

Woocommerce + WPML + Anandmahalakshmi

In this article you can learn about how to create a wordpress theme which is perfectly suitable for Woocommerce and WPML.

Before starting i would like to mention some points.

In order to have a multilingual woocommerce website you need to install the following plugins.

Woocommerce By Woothemes – https://wordpress.org/plugins/woocommerce/

WPML By OnTheGoSystems,Inc. – (http://wpml.org/)

Woocommerce Multilingual – (https://wordpress.org/plugins/woocommerce-multilingual/)

WPML allows you to translate all the standard WordPress elements. This includes:

  • Menus
  • Standard widgets
  • Navigation elements
  • All texts wrapped in `gettext` calls
  • Post content including custom fields and taxonomy
  • Products
  • Theme options
  • Images and strings related to them

In order to have a WPML supported theme, you must follow the below conditions.

Add GetText Functions to Texts

For plugins or themes, be sure to wrap your hard-coded text in `gettext` functions. This includes the header, footer, and widget text. Your template files display an assortment of product information and hard coded text. 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` functions.

Below is the correct format for using gettext functions.

<?php _e(‘Similar products:’, ‘my-textdomain’); ?>
<input type=”button” name=”buy-button” value=”<?php esc_attr_e(‘Buy now!’,‘my-textdomain’) ?>” />

Become RTL Compatible

WooCommerce themes must follow the RTL guidelines, just like WordPress themes. You should create an `rtl.css` file, with the CSS rules for RTL display.

Create a new `rtl.css` file and put it in your theme’s root directory. The ‘dir’ direction in CSS will do most of the work and you only need to pat”>

”>ch a few places. For RTL languages, set the ‘direction’ attribute in CSS to ‘rtl’.  Additionally add the ‘unicode-bidi- attribute.

Good RTL display added to .body selector:

{
direction:rtl;
unicode-bidi:embed;
}

Use API Functions to Link to WooCommerce Pages

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.

Below is the correct format for using Woocommerce API functions.

<a href=”<?php echo get_permalink(get_option(‘woocommerce_shop_page_id’)) ?>”><?php _e(‘Shop page’, ‘my-textdomain’) ?></a>

<a href=”<?php echo get_permalink(wc_get_page_id(‘shop’)) ?>”><?php _e(‘Shop page’, ‘my-textdomain’) ?></a>

Add Multilingual-Ready Product Listings

if you are using woocommerce short code for theme development, there will be no issue in case of WPML compatibility issue. Rather than that if you are going to have a custom query in most case there will be limitation of support with WPML.

So consider the usage of proper short codes.

Like

[woocommerce_products per_page=”12″ columns=”4″]
[woocommerce_product id=”99″]

or any other woocommerce based shortcodes.

and in the case of query,

<?php $products = get_posts(array('post_type' => 'product', 'suppress_filters' => 0)); ?>

$args = array(

'post_type' => 'product',

'posts_per_page' => 10,

);

$products = new WP_Query( $args );

?>

Try to avoid the below query types:

<?php $products = get_posts(array('post_type' => 'product')); ?>

suppress_filters will be set to true by default, preventing language filtering.

$products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type=’product’ ORDER BY ID DESC LIMIT %d”, 10));

WPML doesn’t filter low-level SQL queries. All products in all languages will be returned.

Add Multi-Currency Payment Options

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)’)); ?>

or you can use the below shortcode to display the currency switcher.

[currency_switcher]

Create a Language Configuration File

To make your theme fully WPML compatible, you should make it simple for others to run multilingual sites with the theme by creating a language configuration file.

WPML can read a configuration file that details what should be translated in the theme or plugin.  Create and name the file `wpml-config.xml`.  Save the file in the theme’s root directory.  Use the structure and section layout in the example in this wpml-config.zip sample file and edit it with your own custom content.

The content in the `wpml-config.xml` file must be wrapped in the following <wpml-config> opening and closing tags:

<wpml-config>

</wpml-config>

In the `wpml-config` file you set which features need to be translated by WPML, your custom post types, custom taxonomies, custom fields, and admin text (string coming from wp_options), and you can also set the way your theme’s language switcher will look just follow this short tutorial for full examples and details on structuring your language configuration file visit our Language Configuration File Tutorial.

Hope this will help you to make WPML compatible woocommerce theme.