How to import images from Airtable to WooCommerce products

Hello Mark,

I encountered a few challenges with Airtable too, but we now have a fairly robust integration operational. Our process might differ since we often create products before all details, like images or pricing, are finalized. We set up products as drafts or keep them hidden until all the necessary data is available.

We don't utilize Tags, but our products are organized across numerous categories. To assign these categories to products, we initially construct a comma-separated string of the categories. Subsequently, within the Update a Product module, I employ the split function to parse this string. If we didn't split it, the API interpreted the data as a single, long ID instead of multiple distinct IDs.

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

Regarding product images, we first download the image using an HTTP GET request with the image URL. Following that, we use the WordPress Create a Media Item module to upload it to WordPress. We then utilize the media item ID to assign the image to the variation or set it as the featured image for the variable product post.

I hope this information proves useful.

Hello,

Thank you for your feedback. I've successfully implemented multiple categories using the "split" function, and the same applies to tags.

However, I'm still struggling with the images.

I managed to resolve the error mentioned in my previous post, allowing WordPress to accept all image formats, which seemed to work initially but ultimately didn't.

When an image is uploaded to an Airtable column (attachment), I use callin.io to get the URL. The response provides a URL without an extension (like .jpeg or .png). It appears the file might be protected within Airtable.

Like this:
https://v5.airtableusercontent.com/v1/17/17/1685635200000/GIvNsPRdHU5MMCeq6yL8Mw/9jgDWChRNrQ-wuiD7UudfmNbA2KC6FzXUKZxSeUeH9CapN5ypoL6-7OZZ rmaMJSuDxZjXeetWiUazXbaqC _iaKv-wNqazj1oFd7PvuQRaVq35KFGTwz9lym1Gmt1sgwY-5A5S2xP0-PrpDm84VSvC9zFKlkKnz39qOnxxXMyDcuUW4GOVVmfpisO7jUI8ROW1hEuGqz9-B8JJXPQ/vFAuGZKlM8Ve waXAANZ8bjogYArea_nu1mmH

I conducted a test by uploading an image directly to WordPress, then placed its URL in an Airtable field. This worked, and the URL response appeared normal.

Example:
https://domainename.be/wp-content/uploads/2023/05/140422 205d_vase-scaled.jpg

Unfortunately, my client has already uploaded over 1500 images to Airtable, making it difficult to ask them to change their current procedure.

This is where I'm at:

Yes, when uploading images to WordPress, I do generate a new file name for the image. Airtable does not preserve the original file name when saving the file.

I'm utilizing the SKU for the file name. Since all our images are .jpeg, I'm using the following format in the file name:

{{30.SKU}}.png

You have the option to use the name or another naming convention to rename the file.

Good morning,
The issue isn't actually with the image's name.

When I map the column containing the image from Airtable, I receive the following response:

"images" mapping

Capture d’écran 2023-06-02 1258571125×631 62.3 KB

//
Main image (featured)Array

• 1Collection

  • ID
    attIFakDybNBw0BNe
  • width
    900
  • height
    900
    * URL*

https://v5.airtableusercontent.com/v1/17/17/1685635200000/GIvNsPRdHU5MMCeq6yL8Mw/9jgDWChRNrQ-wuiD7UudfmNbA2KC6FzXUKZxSeUeH9CapN5ypoL6-7OZZ rmaMJSuDxZjXeetWiUazXbaqCiaKv-wNqazj1oFd7PvuQRaVq35KFGTwz9lym1Gmt1sgwY-5A5S2xP0-PrpDm84VSvC9zFKlkKnz39qOnxxXMyDcuUW4GOVVmfpisO7jUI8ROW1hEuGqz9-B8JJXPQ/vFAuGZKlM8VewaXAANZ8bjogYAreanu1mmHhIBkomQ

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

You've observed that the URL (in bold) contains the image link but is missing the final file extension.

Subsequently, when I execute the scenario in callin.io to create a WooCommerce product, I encounter an error in the:

//
HANDLED ERROR

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

image1545×602 62.7 KB

My mapping Pictures…

Capture d’écran 2023-06-02 1305521370×735 56.7 KB

Do you understand my issue? Is it related to the Airtable URL?

Could you elaborate further on your process for handling featured images and image galleries?
I'm having trouble understanding the complete workflow...

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

I also attempted to upload the images using the Airtable URL, mapping it to the Create a Product module in callin.io. However, I never managed to get that working. There were several different issues with the WooCommerce modules that required creative workarounds.

The solution I implemented was to:

1. Download the image from Airtable using the HTTP module and the Airtable image URL.
2. Upload the image to WordPress to create a media item.
3. Utilize the local website URL (wp-content/uploads/…) to set the image for the products.

For Variable and Simple products, I encountered problems with the WooCommerce module failing to set the image. Consequently, I used the WordPress Update a Post module to set the featured image for the post.

For Variations, the "Update a Product Variation" module was functional.

I was surprised by the number of challenges I faced with the WooCommerce modules.

In our specific use case, the products each have only one image. We are not utilizing an image gallery for the Variable or Simple products.

I hope this information proves helpful.

image1920×770 47.3 KB

Hello,

I'm currently facing a similar challenge to others, attempting to synchronize images from an Airtable database to the WordPress media library and subsequently to WooCommerce products.

Could you please elaborate on the workflow you implemented?

I grasp the concepts behind the nodes in your previous illustration, but I'm encountering issues with the HTTP module. Would it be possible for you to share screenshots of the parameters you configured to achieve this?

Thank you in advance for your time and assistance!

Best regards,

Charlie

Hello,

I've included the JSON for that module below. The scenario is set up to receive a webhook from Airtable, which contains the ImageURL from Airtable.

image934×928 100 KB

The HTTP module is configured with just the ImageURL, as it's set up as a Get a File HTTP module.

image908×440 75.2 KB

From there, it involves some workarounds for issues encountered with the WooCommerce module when updating Simple or Variable products. The router at the end directs variations to either a WooCommerce Update a Product Variation module or a WordPress Update Post module to handle the Variable/Simple product updates.

The Airtable call preceding the update logs the MediaID of the newly uploaded image. This serves as a reference within Airtable, helping to track which images have been transferred to WooCommerce.

Feel free to ask if you have any further questions regarding 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
    }
}

Hello,

Thank you very much for providing such a detailed response.

I'm still having some trouble grasping certain steps required to get the entire scenario operational. Since callin.io and its concepts are quite new to me, I'm feeling a bit lost with many aspects. My apologies for not understanding more quickly …

Could you offer some guidance or an example of how you configured the webhook on the Airtable side? I've consulted numerous resources and attempted various configurations, but I haven't been able to get the webhook functioning as intended.

Regarding the JSON you shared, I want to confirm my understanding of where it should be placed. If I've understood correctly, I should navigate to Custom webhook → Show advanced settings → Add a Data structure → Specification → Generate and then input the JSON into the Sample data field. Is this accurate?

I don't encounter the added complexity of Variable products, but many of my products feature a gallery with multiple images. Would your proposed method accommodate multiple pictures?

Thank you in advance for your assistance and response!

Best regards,
Charlie

Hi there!

In Airtable, I've set up an Automation that activates when new records are added or existing ones are modified. This Automation then forwards data to a callin.io Webhook.

Within the Automation, I'm utilizing the “When a record matches conditions” trigger, and the subsequent Action is “Run a script”.

image1098×752 69.1 KB

In the script, you'll configure your input variables and employ code similar to the following to transmit them to the webhook URL.

This approach should work with galleries; you just need to grasp how the data must be formatted and determine if it can be handled by the WordPress or WooCommerce modules, or if a custom API call is necessary.

I handle these types of integrations frequently for clients and would be happy to schedule a consulting session with you. We can arrange a call to go over your WordPress site and specific requirements.

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,
});