How to import products to WooCommerce site from almost any online store

I developed a WordPress plugin called Cherry Picker which allows you to import products from a number of websites to your WooCommerce. Today I’m going to show you how to import products virtually from any eCommerce website out of there.

Cherry Picker brief overview

Cherry Picker uses a bookmarklet that sits in the browser’s bookmarks bar and executed every time when you click on it while on a product page. It takes the product content (title, description, images, etc) and creates a new product out of the imported data on your website. Unlike browser extensions, bookmarklets do not have (and can not have) any background activity, which is why I like them. That’s basically it. Instead of you manually downloading images, creating categories, copy-pasting and cleaning up descriptions, Cherry Picker does it for you. The plugin supports, in its current version (1.1.0), only simple products and doesn’t import attributes. I know that it’s essential to many sellers and it will surely be added in one of the next versions.

Adding a new website support

As of today (November 2020), Cherry Picker does only support the following websites: Amazon, iHerb, AliExpress, and Xiaomi-Mi.com. But luckily for us, it’s relatively easily extendible. It all starts with adding a so-called “adapter”.
The adapter is a class that produces a JSON object with the product data. This is what the most basic adapter would look like:

The example above will not do much, so let’s make something more useful. I’ll build an adapter for gearbest.com.

We always want to start with the unique distinguisher that will tell our script that we are on a product page. Bear in mind, that our adapter code will be executed in the context of the webpage, which means we can hugely benefit if there are relevant global variables available, like this one:

window.dataLayer = [];   
 dataLayer.push({"PAGE":"goods","PIPELINE":"GB","LANG":"en","google_tag_params":{"prodid":"474585301US","pagetype":"product","totalvalue":33.99,"currency":"USD","pcat":"Consumer Electronics > Smart Electronics > Smart Watches","legal":1},"CODE":"US","goods":{"websku":"009400447480","sku":"474585301","cat_id":"11330","nav_title_2":"Consumer Electronics","nav_title_3":"Smart Electronics","pic":"","price":33.99,"shopPrice":51.09,"sn":"474585301US","title":"...","url":"https:\/\/www.gearbest.com\/goods\/pp_009400447480.html","brand_code":""}});

This piece of code will help us with a number of things, but first, we’ll use it in isProductPage function:

The function analyzes the first object in dataLayer and returns true if the page type is “goods”.

Now we’ll proceed to get a product price, title, and category. The dataLayer will be useful for that as well:

Getting a description can be quite difficult, as it may contain excessive HTML, inline styles, and other unwanted elements. Another complication is that some products may have a custom description layout. This is exactly the case here. Fortunately, I found only two variants of description markup (although I suppose there are actually more). And luckily enough, they are fairly similar. I managed to write a unified parser, compatible with them both. In these two functions we take the text description as well as the specs table:

The final function of the adapter will return an array of product images. As you can see, I added 600_600 at the end. First and foremost, this way you are getting images without a watermark. Also, as far as I can tell, this is the biggest size available.

Here you can find the full adapter code.

At this point, you only have to register your newly added adapter in your WordPress theme. Create a folder called “adapters” in your theme directory, insert the adapter file, and jump straight to the end of the functions.php and add the following:

add_filter("cherry_picker_adapters", function($adapters) {
  $adapters['gearbest.com'] = get_template_directory_uri() . '/adapters/gearbest.js';
  return $adapters;
})

Now update the bookmarklet and you are ready to go importing products from the website you just added.

P.S. Got problems with creating an adapter? Reach me out on Twitter (@m0squid) and I’ll try to help.