AI-Powered One-Click Virtual Fitting Room for WooCommerce, Shopify, Prestashop

This low-code automation enables all eCommerce store visitors to upload a photo of themselves and virtually “try on” a garment in just a few clicks.

With this workflow, WooCommerce, Prestashop, Shopify and more merchants can offer a cutting-edge “virtual try-on” feature with minimal development effort, enhancing customer engagement and reducing product returns.

Key Advantages

Zero-Coding, Visual Setup** Build end-to-end e-commerce features with drag-and-drop nodes instead of custom backend code.

Asynchronous, Scalable Processing** Non-blocking “Wait” + “If” loop handles multi-second AI jobs gracefully, freeing up the workflow for other tasks.

Dynamic Inputs & URLs** Query strings (e.g. ?Product=IMAGE_URL) allow you to embed the form on any product page and pass the garment image on the fly.

Seamless User Experience** Instant pop-up within your storefront and automatic redirect to the generated mock-up keeps shoppers engaged without page reloads.

Easy Credential Management** API keys, FTP credentials, and webhook IDs are all stored securely in n8n’s credential manager.

How It Works
Form Submission:
A user submits a form with their name, an image of themselves ("Me"), and a hidden product image URL ("Product").
The form is triggered via the On form submission node, which collects the input data.

Image Upload:
The uploaded image ("Me") is sent to an FTP server for temporary storage using the FTP node. The filename includes a timestamp to ensure uniqueness.

Virtual Try-on Request:
The Create Image node sends a POST request to the Fal.run API, providing:
The uploaded human image URL (from FTP).
The product image URL (from the hidden form field).
This generates a virtual try-on result.

Result Processing:
The workflow checks the status of the image generation (Get status node) in a loop (with a 10-second wait between checks) until it is marked as "COMPLETED."
Once ready, the final image URL is fetched (Get Url image node) and displayed to the user via a redirect (Form node).

User Experience:
The user is redirected to the generated try-on image, completing the process.

Set Up Steps
API Key Setup:
Create an account and obtain an API key.
Configure the Create Image node with HTTP Header Authentication:
Name: Authorization
Value: Key YOURAPIKEY

FTP/S3 Configuration:
Set up an FTP server or S3 bucket to temporarily store uploaded user images.
Configure the FTP node with your FTP credentials and storage path.

Ecommerce Integration:
On your WooCommerce site, add a "Try On" button that opens the form in a pop-up.
Dynamically pass the product image URL as a query parameter:
Example: https://URL_N8N/form/ca1c314d-46c6-4eeb-b6a5-359XXXXXX?Product=IMAGE_URL

Testing:
Verify the workflow by submitting a test form and ensuring the virtual try-on image is generated and displayed correctly.

Need help customizing?
Contact me for consulting and support or add me on Linkedin.