A Challenging job

Making a webshop, without being a real shop at the start, in a multiple language environment and products to be imported from a CSV is a ‘not everyday’s’ challenge. This is how we did it.

Creative and Functional design

The creative and functional design was delivered in a kind of ‘work in progress’ roadmap, with some changes during the ‘road’. The clients perspective was very creative on one part (she is a partime jewelry designer/maker) and very technical on the other part (she is a software proces engineer in heavy industries).

The creative design was pre-delivered

However it still remains important to keep a tracklist of ‘all things done’ in an overview. Especially to ‘come back later’ if things need to be changed. With a missing functional design you are ‘left on your own’, at the moment the customer requests for something new…… At any random times, even years after the first delivery……

Themer to ‘prevent’ WooCommerce functions

From a plug-ins perspective, making a WooCommerce webshop without being a shop at first, means that Beaver Themer comes in to make to right templates for the shops products overview, the category views and the individual product views. Themer is there to ‘filter out’ all the basket and payment functionality out of WooCommerce, but keeping the possibilities open to add them later, onze online shopping will be requested. It is therefore we made the decission to use WooCommerce from the very first beginning.

Importing a csv file for the products catalogue

With about a little less than 80 products the ‘shop’ in rather small, but the client requested to be able to import all products everytime at one, after she would decide to make some changes in a Microsoft Access database enad export that database to a CSV file, to be able to overwrite existing products (if needed) with new data and add new products as soon as they become available.

Translating with WPML

The next challenge was to do the import for three languages, Dutch, English and Spanish. As you might know, WPML is a ‘monster’, but still the best tool to make an overall translation of all content ‘elements’ in a WordPress website, including WooCommerce. WPML is not friendly at all from a back-end developing perspective. It became a tool where all kinds of ‘modules’ have been ‘glued to’ the base of WPML. Translating is not as straighforward as you might think. Translating a menu has a different approach compared to translating a Gravity Form, or translating Themer templates.

All plug-ins worked pretty well together

We started the whole project without using WPML, so initally ‘just’ in Dutch, especially to test the ‘products import’. We made the decision to import all records everytime after changing were being applied in the Access database. So untouched records were -re-imported, changed records were updates and new records were added to the products catalogue within WooCommerce.

Beaver Themer, WooCommerce and WPML (and needed add-ons) all worked very well together for all tasks needed now and to be expected tasks, once a real multilingual webshop will be needed.

Also the CSV import of three language based product catalogues worked well. Only disadvantage was that all three language versions could not be imported at one. We had to do separate badges.

WooCommerce more structured

The latest version of WooCommerce (starting at 4.0) was improved a lot after Automattic took the plug-in in their portfolio. The community was not very satisfied after Automattic took over, since they changed a lot about their paid add-on policy, just to make more money. But still, WooCommerce is the ‘unwritten’ standard for a webshop in WordPress environments.

The workflow

We did setup the following worklow. We will limit describing the workflow from the moment we started the project from the ‘building phase’.

Part of Technical design

The plug-ins we needed:

• Beaver Builder (obviously……)
• Beaver Themer (to create WooCommerce based templates for archive pages, category pages and products pages)
• PowerPack add-on (especially for WooCommerce category based slider)
• Gravity Forms
• WooCommerce
• WPML and the 4 free add-ons Woocommerce Multilingual, Gravity Forms Multilingual, WPML String Translation and WPML Translation Management
• The rest of the most obvious plug-ins for any site like SEO and (internal) Search optimization (we will not discuss them here in detail)

The pages we created

• Homepage (also the base for the WooCommerce shop)
• 3 ‘just pages’ for background information purposes and contact (not connected to a Beaver Themer template)

We left the pages created by WooCommerce in the pages list, but for the current requested functionallity, those pages are not used. So, for example, the account page, the shopping basket page and the payment page are left untouched for the moment.

The 9 templates we created:

• Homepage template with the category slider from PowerPack
• 6 individual category templates
• Header template
• An archive template for all products view

The menu:

• Homepage
• The collections, with 3 of the 6 categories
• Extra pieces, with 3 of the 6 categories
• Info, with 3 pages

The functional templates set-up overview

The header template is a global template for the whole site and makes logo and menu fit on desktop, tablets and mobiles. Setup is straight forward. The menu items shown for each language, have been translated within WPML. A ‘country flag’ area has been added to the right of th emenu to chosse the requested language’. WPML takes care of that, so no action required in the menu setup itself.

Importing data

The Whole setup with all data was created in Access, whcih exports a CSV that can be imported in WooCommerce. A fiel/column connection setup is required to make the import work as needed. The best way was to export a set of manually insterted products form WooCommerce to see what data details will be supplied and can be used to do the import from a well formatted CSV from Access.

The basis WooCommerce fields setup:

• ID
• Product name
• Short desciption
• Description (text area with HTML markup for SEO (h3) and lists etc.)
• Category
• Images (first is featured image URL , all other (comma separated URL’s get into the gallery) (*)

In this case no (extra) custom fields were required to add more specific functionality. WooCommerce offers for the kind of products in this case, enought possibilities to get the job done.

(*) to overwrite existing images, we switched off the ‘month/week’ upload hierarchy for uploading media, so all images will be uploaded in the root of ‘uploads’ in the wp-content folder.

Some little scripts added to functions.php

Around images, there were some little extra requirements:

• The removal of the ‘olympus’ name during import of images comning from an olympus camera. Alt, title, caption and subscription, were filled with ‘olympus digital camera’.
• The insertion of a ‘made clean’ filename for the same fields as mentioned above. For exampke ‘LindaMar_nl__Oorbellen_Vin01_OZ.jpg’, shoudl become ‘Lindamar Nl Oorbellen Vin01 Oz’.

For the first one, we found a little plug-in called ‘Remove ‘OLYMPUS DIGITAL CAMERA’ from caption and title by image upload’. We used just some of the code and inserted this in the code from Francisco Ruis from Brütal Business. So importing images result in a consistent combination of filename, Alt, title, caption and subscription. Although no captions were used in the project.

Translations needed

After the inititial test setup in Dutch, including a working import, the next step was to make the site multilingual.

Translations were needed for:

• All ‘static’ pages
• All products and the connected fields
• All categories (names and description)
• All Themer templates
• All menu items

We made translations for all content templates to be used in another languages to be as flexible as possible. For example for specific language dependend content later (localized offers might be a valid reason).

Conclusions

The workflow defined above describes the process for a future perspective of reading back the way things were done and how things could evolve in the near future. Have a look at the website, which is still in progress.