Import images from Airtable to Woocommerce products

Marc_Meunier · May 31, 2023, 2:36pm

Hi community,

I’m having some trouble importing data from Airtable (list of products) to Woocommerce (create a product)

1/ Tags & categories
I created a column in Airtable with the ID of the Tag (created before in Woocommerce), with 1 ID, it works… But I would like to be able to put several TAGS, and there I can’t

I tried to separate the IDs with a comma in the Airtable field (error), I tried to create 2 columns with each an ID and map them (it doesn’t work)…

The concern is the same for the categories where I want to be able to classify the product in a category + subcategory

it must probably be a detail to be settled on the Airtable or Woocommerce side in the scenario, but I can’t find it.

2/ Featured Product Images and Gallery Images

I have a column in Airtable (Attachment format) and a column with the image gallery (under attachment format)

When I map, I do like this:

Unfortunately, I also get an error message…

I hope some have already done this and can share their experience and/or configuration on Airtable, the scenario and how to map correctly…

Thanks in advance,

Mark

myprojectsolution · June 1, 2023, 12:16pm

Hello Mark,

I ran into a few issues with Airtable as well. But we have a rather robust integration running now. Our workflow may be different as we often have products we can create before all the information, such as images or price, is available. We create the products as drafts or not visible until all data is ready.

We do not use Tags, but we do have products in many categories. To set those on the products, we first build the string of categories into a comma delimited list. Then in the Update a Product module, I’m splitting the string using the split function. When we didn’t spit it, the API evaluated the data as one long ID vs. many different ID’s.

{{split([string you created]; ",")}}

For the product images, we are first downloading the image using the Get A File HTTP call using the image URL. Then use the WordPress Create a Media Item module to upload it to WordPress. We then use the media item ID to set the image on the variation or featured image on the variable product post.

I hope that is helpful.

Marc_Meunier · June 1, 2023, 3:46pm

Hello,

thank you very much for your feedback.
I actually managed to put several categories with the “split” function and the same for the tags.

On the other hand, I’m still rowing for the images…
I managed to fix the error mentioned in my post so that Wordpress accepts all image formats, which obviously stuck… but in fact it didn’t…

When an image is loaded in an Airtable column (attachment), I point this part with MAKE (url) and the response is a url with a name that does not have an extension (.jpeg or .png), I have the impression that the file is protected in Airtable…

like this :
https://v5.airtableusercontent.com/v1/17/17/1685635200000/GIvNsPRdHU5MMCeq6yL8Mw/9jgDWChRNrQ-wuiD7UudfmNbA2KC6FzXUKZxSeUeH9CapN5ypoL6-7OZZ_rmaMJSuDxZjXeetWiUazXbaqC _iaKv-wNqaz_j_1oFd7_PvuQRaVq35KFGTwz9lym1Gmt1sgwY-5A5S2xP0-PrpDm84VSvC9zFKlkKnz39qOnxxXMyDcuUW4GOVVmfpisO_7jUI8RO_W1hEuGqz9-B8JJXPQ/vFAuGZKlM8Ve waXAANZ8bjogYArea_nu1mmH

I did a test loading an image in WP, I placed the url in an airtable field and there it works with a url response that seems normal to me

example :

https://domainename.be/wp-content/uploads/2023/05/140422_205_d_vase-scaled.jpg

Unfortunately my client has already loaded +1500 images in airtable so I don’t know how to ask him to change the procedure…
Here is where I am

myprojectsolution · June 1, 2023, 4:50pm

Ah yes, when I’m uploading the images to WordPress, I do create the new image file name. Airtable doesn’t retain the original file name when they save the file.

I’m using SKU file name. All of our images are .jpeg, so in the file name, I’m using:
{{30.SKU}}.png

You can use name, or some other schema to rename the file.

Marc_Meunier · June 2, 2023, 11:11am

Good morning,
The problem is not really the name of the image…

When I map the column where the image is located in Airtable, I get this response:

“images” mapping

//
Main image (featured)Array

1Collection
- ID
  attIFakDybNBw0BNe
- width
  900
- height
  900
  *** URL**

https://v5.airtableusercontent.com/v1/17/17/1685635200000/GIvNsPRdHU5MMCeq6yL8Mw/9jgDWChRNrQ-wuiD7UudfmNbA2KC6FzXUKZxSeUeH9CapN5ypoL6-7OZZ_rmaMJSuDxZjXeetWiUazXbaqC_iaKv-wNqaz_j_1oFd7_PvuQRaVq35KFGTwz9lym1Gmt1sgwY-5A5S2xP0-PrpDm84VSvC9zFKlkKnz39qOnxxXMyDcuUW4GOVVmfpisO_7jUI8RO_W1hEuGqz9-B8JJXPQ/vFAuGZKlM8VewaXAANZ8bjogYArea_nu1mmHhIBkomQ

File name
png-clipart-project-team-project-manager-business-outsourcing-business-service-people.png
Size
31992
MIME type
image/png
///

You notice that the URL (in bold) contains the link of the image but without the final extension??

Then when I run the scenario in MAKE to create a woocommerce product, I have an error in the

//
HANDLED ERROR

type
DataError
message
[400] #942 is an invalid image ID. (woocommerce_product_invalid_image_id)

Marc_Meunier · June 2, 2023, 11:12am

My mapping Pictures…

Marc_Meunier · June 5, 2023, 1:03pm

Do you understand my problem ?
It’s a problem from url airtable ?

Marc_Meunier · June 6, 2023, 9:01am

Can you explain to me in more detail your procedure for featured images and image gallery?
I can’t figure it all out…

myprojectsolution · June 12, 2023, 11:43am

Hello, apologies for the delayed response. We were on a family vacation last week.

I also tried to upload the images using the Airtable URL, mapping it to the Create a Product module in Make. But I never got that working. There were a few different issues with the WooCommerce modules I had to find creative solutions for.

The solution I settled on was to

Download the image from Airtable using the HTTP module and Airtable image URL
Uploading the image to WordPress to create a media item
Use the local website URL (wp-content/uploads/…) to set the image on the products

For Variable and Simple products, I ran into issues with the WooCommerce module not working at all to set the image. So I used the WordPress Update a Post module to set the featured image on the post.

For Variations, the “Update a Product Variation” module worked.

I was surprised at the number of issues I ran into with the WooCommerce modules.

In our use case, the products only have 1 image each. We are not using a gallery for the Variable or Simple products.

I hope this helps.

CharlieCortial · July 13, 2023, 5:41pm

Hello Chris @myprojectsolution,

Right now, I’m wrestling with a similar difficulty as @Marc_Meunier, trying to sync images from an Airtable database to the WordPress media library and ultimately WooCommerce products.

Would you be so kind as to explain in more detail the workflow you made?

I understand the nodes in your last picture, but I can’t get the HTTP module to work. Would that be possible for you to share screenshots of the parameters you used to make it work?

Thank you in advance for your time, and for your answer!

Best regards,

Charlie

myprojectsolution · July 13, 2023, 7:15pm

Hello @CharlieCortial,

I have added the JSON for that module below. The scenario receives a webhook from Airtable that has the ImageURL from Airtable.

The setup in the HTTP module is just the ImageURL since it’s a Get a File HTTP module.

From there, it’s mostly a hack working around issues I had with the WooCommerce module updating Simple or Variable products. That’s the router on the end that sends variations to a WooCommerce Update a Product Variation, or to the WordPress update a post to update the Variable/Simple product.

The Airtable call before the update is logging the MediaID of the newly uploaded image, so we have it as a reference in Airtable. We use it to know which images have been sent to WooCommerce.

Please let me know if you have any other questions about this scenario.

{
    "subflows": [
        {
            "flow": [
                {
                    "id": 3,
                    "module": "http:ActionGetFile",
                    "version": 3,
                    "parameters": {
                        "handleErrors": false
                    },
                    "filter": {
                        "name": "Has Image URL",
                        "conditions": [
                            [
                                {
                                    "a": "{{30.ImageURL[]}}",
                                    "o": "exist"
                                }
                            ]
                        ]
                    },
                    "mapper": {
                        "url": "{{30.ImageURL[]}}",
                        "method": "get",
                        "serializeUrl": false,
                        "shareCookies": false
                    },
                    "metadata": {
                        "designer": {
                            "x": 300,
                            "y": 150
                        },
                        "restore": {},
                        "parameters": [
                            {
                                "name": "handleErrors",
                                "type": "boolean",
                                "label": "Evaluate all states as errors (except for 2xx and 3xx )",
                                "required": true
                            }
                        ],
                        "expect": [
                            {
                                "name": "url",
                                "type": "url",
                                "label": "URL",
                                "required": true
                            },
                            {
                                "name": "serializeUrl",
                                "type": "boolean",
                                "label": "Serialize URL",
                                "required": true
                            },
                            {
                                "name": "method",
                                "type": "hidden",
                                "label": "Method"
                            },
                            {
                                "name": "shareCookies",
                                "type": "boolean",
                                "label": "Share cookies with other HTTP modules",
                                "required": true
                            }
                        ]
                    }
                }
            ]
        }
    ],
    "metadata": {
        "version": 1
    }
}

CharlieCortial · July 16, 2023, 4:49pm

Hello Chris @myprojectsolution ,

thank you very much for taking the time to give me this detailed answer.
I’m afraid I still don’t get some of the steps I need to do to get the whole scenario working. Make and the knowledge around it is very new to me so I’m quite lost about many things. I’m sorry that I don’t get it faster …

Could you give me some information or example of how you made the webhook on the Airtable side ? Because I’ve checked a lot of ressources about it, I tried, but couldn’t get the webhook to work in the intended way (I think).

As for the JSON you shared, I’d like to be sure I’m not mistaken as to where I should add it. If I understood, I should add it to Custom webhook → Show advanced settings → Add a Data structure → Specification → Generate and add the JSON there, in the Sample data field, is it correct ?
I don’t have the added complexity of Variable products, but many products have a gallery, not just one picture. Would your method work with multiple pictures ?

Thank you very much in advance for your help and answer!

Best regards,
Charlie

myprojectsolution · July 18, 2023, 9:08pm

Hi @CharlieCortial

In Airtable, I created an Automation that triggers when records are added or edited in Airtable. The Automation sends data to a Make.com Webhook.

In the Automation, I’m using the “When a record matches conditions” trigger, and the Action is “Run a script”.

In the script, you configure your input variables and use code like the following to pass them to the webhook URL.

The method would work with galleries, you just need to understand how the data needs to be passed and figure out if you can do it with the WordPress or WooCommerce modules, or if a custom API call must be made to do it.

I do these regularly for clients and am happy to book a consulting engagement with you. We can hop on a call to review your WordPress site and scenario.

Sample Code:

// Replace this with your webhook URL 
const webhookURL = 'https://hook.us1.make.com/abcdefgh123456789';

// Get the trigger record 
const triggerRecord = input.config(); 

// Convert record data to JSON 
const jsonRecordData = JSON.stringify(triggerRecord); 

// Send an HTTP POST request to the webhook 
await fetch(webhookURL, { 
  method: 'POST', 
  headers: { 
    'Content-Type': 'application/json', 
  }, 
  body: jsonRecordData, 
});t

Topic		Replies	Views
Woocommerce product, multiple categories Questions & Answers airtable , woocommerce	4	834	June 15, 2023
What are the criteria for Airtable fields to sync to Woocommerce? Questions & Answers airtable , woocommerce	2	288	January 15, 2024
Problem Pulling data from Airtable as text, as opposed to ID Questions & Answers airtable , woocommerce	3	262	July 19, 2023
Woocommerce - Create a product - Categories Questions & Answers	5	349	December 7, 2023
Assign more than 1 category to woocommerce product ("update product" module) Questions & Answers woocommerce	4	575	October 10, 2023

Import images from Airtable to Woocommerce products

Related Topics