By Mohamed Khafaja

Create the shop page

Introduction

Neighborhood is a responsive multi-purpose shop theme that provides a drag-and-drop page builder and an unlimited number of layouts and colors that will enable your eCommerce site to stand out. Neighborhood theme is fully compatible with WPML, which makes building your next multilingual eCommerce website an enjoyable experience.

What you need

  • A recent version of WPML (version 3.3.6 or above), including the String Translation, Translation Management, Media Translation add-ons, and WooCommerce multilingual
  • Neighborhood Theme (version 3.2.5 or above)
  • WooCommerce (version 2.5.5 or above)

Essential resources

  • WPML’s Getting Started Guide will help you to set up WPML in only a few minutes. You will want to refer later to some of its subtopics, such as Theme and Plugin Localization and String Translation. In addition, we suggest you refer to the WooCommerce Multilingual We recommend that these guides remain open while you follow this tutorial.

Content

  • Translating the Home page (Shop page).
  • Translating products and product categories.
  • Translating pages, posts, custom post types, and custom taxonomies
  • Translating menus.
  • Translating theme text and other strings.

Getting started

  • Install and activate Neighborhood.
  • 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. Refer to our WPML Getting Started Guide for complete reference.

Translating the Home page (Shop page)

Neighborhood theme comes with “Swift Page Builder,” which we will use in this tutorial to create our shop page.

Note the following:

The “Swift Page Builder” is a page layout builder that allows you to design and modify the layout as well as add functionality inside a single page and view from within the admin of that page.

In addition, please note that the WooCommerce plugin creates its own shop page.

You can perform the following steps to translate any page created with the “Swift Page Builder.”

  • Navigate to WordPress dashboard.
  • Click on Pages, Add new.
  • Name the page “Shop.”
  • Click the “Swift Page Builder” button.
  • Click “Choose Elements.”
  • Click “Products.” This will show all the products that you have created. See the image that follows.
  • To translate the shop page elements, navigate to “Pages” in WordPress dashboard, which shows columns for each active language and a   icon (to add a translation) or a Pencil  icon (to edit a translation) next to each page.

  • Add the translation for your “Shop” page by clicking on the  icon.
  • On the right, you will see the language metabox. Click on “copy content from English” to copy the content created using the “Swift Page Builder.”
  • Now add the translation to your secondary language shop page and click the “Publish” button. See the image that follows.
  • Translate shop page-2

    Translating products and product categories

    You can translate products by following these steps:

  • Navigate to WPML >> WooCommerce Multilingual.
  • Navigate to the “Products” tab.
  • Click on the “Edit translation” link. See the image that follows.
  • Translate products

  • Add the translated content to the product and click the “Save” button, as shown in the image that follows.
  • translate products 2

    Product categories can be translated by following these steps:

  • Navigate to WPML >> WooCommerce Multilingual.
  • Navigate to the “Product Categories” tab.
  • Click on the “translate” link, add the translated content, and click the “Save” button. See the image that follows.
  • translate product categories

    Translating pages, posts, custom post types, and custom taxonomies

    Translating pages and posts can be accomplished by navigating to Pages or Posts on the WordPress dashboard and clicking on the Plus icon icon to add the translated content to the secondary language.

    Neighborhood theme comes with many custom post types (Portfolio, Team, Clients, Testimonials, Jobs, and FAQs). As an example, we will translate the custom post type “Portfolio” and the custom taxonomy “Portfolio Categories. These are preset to be translated by the language configuration file that we have created for the Neighborhood theme.

    Translate portfolio

  • Navigate to “Portfolio” in your WordPress dashboard and click the “Add New” button, Ensure that the main admin bar language switcher is set to be your default language, then click “Publish.” You can then click on the Plus icon icon in the language metabox.
  • translate portfolio item

  • You can next add the translated text and click the “Publish” button. You will notice that the admin bar language switcher shows the secondary language. See the image that follows.
  • translate portfolio item 2

    Translate portfolio categories

    To translate custom taxonomies, follow these steps:

  • Navigate to WPML >> Taxonomy Translation.
  • Select “Portfolio Categories” from the “Select the taxonomy to translate” drop-down menu.
  • Click on “translate,” complete the required fields, and click “OK” to add the custom taxonomy translation, as illustrated in the following.
  • translate product categories

    Translating menus

    Using WPML, you can easily synchronize your language menus. For more information, please refer to the full translating menus tutorial.

    Translating theme text and other strings

    Theme strings can be scanned and registered for translation on the string translation screen. Read more about Theme and Plugin Localization.

    This can be done by following these steps:

  • Go to WPML >> Theme and plugin localization
  • Click the “Scan the theme for strings” button. This will register the theme texts for translation on the string translation screen. See the image that follows.
  • scan the theme for strings

  • Navigate to WPML >> String translation. You can filter the strings by means of “translation needed” to identify those strings that are missing translations or select a specific text domain. You also can search for a specific string by typing it in the “Search for” field, then clicking the “Search” button. Click on “translations” and add your translated text. Select the “Translation is complete” option and click “Save.” See the image that follows.
  • string translation

    Note that translating the theme options can be accomplished by navigating to WPML >> String translation and searching for the strings within the domain “admin_texts_sf_neighborhood_options.”

    Getting help

    If you need help using WPML with Neighborhood theme, please head over to our technical forum.

    Before posting your concerns, we recommend that you review the following:

  • Ensure you have the latest versions of the theme and WPML plugins, and that they are all activated. These include WPML Multilingual CMS, WPML String Translation, and WPML Translation Management.
  • Confirm that your issue does not arise when the WPML plugins are deactivated, but does arise when only the core WPML plugins are activated. In other words, ensure that it is an issue of compatibility of Neighborhood with WPML. Otherwise, Bridge support can offer better assistance.
  • Conclusion

    Neighborhood theme includes many features that will allow you to build a clean and professional eCommerce website. Its integration with WPML provides an easy interface to make your online store multilingual.

    Read more here:: Translate Neighborhood Theme Using WPML