24

In this is guest post, Michael Wassmer explains how to build a multilingual product catalog using WordPress.

The idea for this post came from a discussion in the forum about sharing custom fields and media between translations.

The goal –  a multilingual product catalog with WordPress

To set up my small bilingual shop I didn’t want to use a complex e-commerce CMS, WordPress was just the right thing for what I needed. Also I was looking forward to testing the WPML plugin on a slightly more complex project than the usual classical blog or website.

So, in my English/French online catalog, the products are each described in a dedicated post. To add a product I simply add a post in the back-end of WordPress, giving it the name of my product as title, typing the description in the content text-area, uploading the products photos to the images gallery of the post, and using the custom fields for values like price, reference and size.

Here’s how a product post in English (the default language) would look :

post_example

Now, after creating the original post for a product, how do I create the translated (French) version of it? Following WPML’s instruction, I simply click on the Language box under the post content window, click on “show” next to “Translations” and then click on “add”. It opens up a new post page where I can type in all the translated informations of my product : French title, French description, etc.

Problem – translations duplicate product information

But wait! Here is the annoying thing. I also have to type in again the custom fields values: reference, price and size. In my case those values are the same in any language so it makes no sense having to enter them twice. This is an obvious problem that would make me lose a lot of time if I had to type in the same information multiple times for each product post translation.

It’s the same issue with the product images, I don’t want to upload all the product photos a second time for the same product in it’s translated version. Logically, product photos are the same in any language, so I should be able to upload them only once.

So, let’s save the translated post just like this, without typing in a translation for the custom fields and without uploading the product images.

Ok, now let’s have a look at some code. Here’s a very basic example of a product listing page for a category (usually the archive.php file of your WP theme) :

<?php while (have_posts()) : the_post(); ?>
  <ul class = "product">
    <li class = "title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <li class = "ref"><?php echo get_post_meta($post->ID, 'Reference', true); ?></li>
    <li class = "price"><?php echo get_post_meta($post->ID, 'Price', true); ?></li>
  </ul>
<?php endwhile; ?>

That’s the classical loop. It shows a list of my products and the associated custom field values – Price and Reference.

Now if I click on another language in the language selector on the front-end of my website (French in my case), it shows the translation of the articles title, but it doesn’t show the reference and the price value. That’s normal, remember we didn’t enter them in the translated post..

So, how do I get WordPress to show the custom values I entered in the original English post ?

Solution – sharing custom fields between translations

Well, WPML is a powerful plugin that provides us with a very useful function to fetch those values from the original post, even on the translated pages.

We are going to use the icl_object_id() function and replace the previous code by the following :

<?php while (have_posts()) : the_post(); ?>
<?php
  // Get the original post ID (in my case the english one)
  $o_ID = icl_object_id($post->ID, 'post', false, 'en'); ?>
  <ul class= "product">
    <li class = "title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <li class = "ref"><?php echo get_post_meta($o_ID, 'Reference', true); ?></li>
    <li class = "price"><?php echo get_post_meta($o_ID, 'Price', true); ?></li>
  </ul>
<?php endwhile; ?>

Basically what we did was to retrieve the ID of the original post corresponding to any translated post, and using this ID to get the custom values. Depending on the original language of your posts, you can change the last parameter of icl_object_id (‘de’ for German, ‘fr’ for French, etc.). You can get more information about the other parameters of this function here and a list of other functions in the coding API page.

That was for the custom fields, now how do I do the same with the image gallery?

Let’s take our first example and also show three thumbnails images for each post in the list:

<?php while (have_posts()) : the_post(); ?>

<?php
  // Get the original post ID (in my case the english one)
  $o_ID = icl_object_id($post->ID, 'post', false, 'en'); ?>

  <ul class= "product">
    <li class = "title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <li class = "ref"><?php echo get_post_meta($o_ID, 'Reference', true); ?></li>
    <li class = "price"><?php echo get_post_meta($o_ID, 'Price', true); ?></li>

<?php

  // Get 3 thumbnails from the original post
  $args = array('post_type' => 'attachment','numberposts' => 3,'post_status' => null,'post_parent' => $o_ID);
  $attachments = get_posts($args);
  if ($attachments) {
    foreach ($attachments as $attachment) {
      echo '<li class="thumbnail">'.wp_get_attachment_image($attachment->ID).'</li>';
    }
  }
?>
</ul>

<?php endwhile; ?>

Summary

You can easily customize this little script to fit your needs, showing more (or less) images or different sizes.

That’s it. Now we can show our product list in any language, and it will always contain all the product custom fields and images, even if technically these are only stored in the original post.

This gets really interesting for bigger catalogs with more languages. Imagine you have to change the price of a product in five languages. With the normal method you would have to edit all five posts. With this easy method you always have one “master” language with its posts containing the complete information about your products and translations reusing it.

Michael Wassmer is a freelance web designer based in Barcelona, Spain. You can contact him at mike@michaelwassmer.net