AI Virtual Try-On for WooCommerce — Documentation
Install and configure AI virtual try-on on your WooCommerce product pages, using the Google Vertex AI API.
What the plugin does
DF Google Try-On adds a virtual try-on button to your WooCommerce product pages. The shopper uploads a photo or uses their webcam, and AI generates an image of them wearing the garment. The preview appears in a modal, without ever leaving the product page.
Important: this plugin uses Google Cloud’s developer Vertex AI Virtual Try-On API. It is not the consumer try-on found in Google Search and Google Shopping, which cannot be embedded on a third-party site. Every image generation is billed by Google.
Requirements
- WordPress 6.2 or later, WooCommerce 7.0 or later
- PHP 7.4 or later, with the OpenSSL extension enabled
- A Google Cloud project with billing active
- The Vertex AI API enabled on that project
- A service account holding the Vertex AI User role
Step 1 — Prepare Google Cloud
Enable the Vertex AI API
In the Google Cloud console, select your project, open the API library and enable Vertex AI API. Make sure billing is active on the project: without it, every call will fail.
Create the service account
- Open IAM and admin, then Service accounts.
- Create a service account (the name does not matter, for example woocommerce-tryon).
- Grant it the Vertex AI User role. Do not grant a broader role than needed.
- In the Keys tab, create a JSON key and download the file.
This JSON file contains a private key. Treat it like a password: do not commit it to version control, do not share it, and keep your WordPress admin access restricted.
Pick a region
The model must be available in the region you enter. The default us-central1 is the safest choice. If you want a European region, check the regional availability of the Virtual Try-On model in Google’s documentation first, as coverage changes over time.
Step 2 — Install the plugin
- In WordPress, go to Plugins, Add New, Upload Plugin.
- Select the supplied ZIP file, then install and activate.
- A new menu appears: WooCommerce, Google Try-On.
Step 3 — Configure
All settings live under WooCommerce, Google Try-On.
Google connection
- GCP project ID: the project ID, not its display name.
- Region: for example us-central1.
- Service account JSON: paste the full contents of the downloaded file. The plugin validates the JSON on save and rejects a malformed key.
On save, the access token cache is cleared automatically, so a credential change takes effect immediately.
Display
- Enable try-on: the master switch. While it is unchecked, nothing shows on the storefront.
- Button label: the text shown on the product page.
- Eligible categories: restricts the widget to certain categories. Leave empty to allow all products.
Safety and cost
- Safety filter: the filtering level Google applies to images. The strictest setting is recommended on a public storefront.
- Watermark: adds Google’s SynthID watermark to generated images. Recommended, to signal that the image is synthetic.
- Monthly cap: the maximum number of successful try-ons per calendar month. Set 0 for no cap, but bear in mind every generation is billed.
- Consent notice: the message shown next to the mandatory checkbox.
The current month’s counter is displayed at the top of the settings page.
Step 4 — Control display per product
On a product, in the General tab of the product data panel, a Virtual try-on setting offers three values:
- Auto: follows the globally configured categories.
- Always show: forces display, even outside eligible categories.
- Never show: hides the widget regardless of the global configuration.
The garment sent to the AI is the product’s main image, fetched server-side. A clean shot of the garment alone, well cut out and on a light background, gives far better results than a worn photo or a busy styled scene.
How it works under the hood
A try-on follows this path:
- The shopper opens the modal and provides a photo, by upload or webcam capture. The image is resized in the browser, on its longest side, before anything is sent.
- They tick the mandatory consent checkbox: without it, the server rejects the request.
- The server verifies the security nonce, the product, the per-IP throttle and the monthly cap.
- The plugin signs an RS256 JWT with the service account’s private key, exchanges it for an OAuth2 access token, then caches it until shortly before expiry.
- The photo and the product image are sent to the Vertex AI model, which returns the generated image.
- The image is returned to the browser and displayed in the modal.
The garment image is never supplied by the browser: it is always read server-side from the product. This prevents a visitor from hijacking the service to try on an arbitrary image.
Personal data and GDPR
A shopper’s photo is personal data. The plugin is designed accordingly:
- The photo is never saved on your server, neither in the media library nor in the database. It passes through memory for the duration of the call.
- The generated image is returned straight to the browser and is not stored either.
- An explicit consent checkbox, whose text you write, must be ticked before any processing.
- The photo is transmitted to Google, acting as a processor. Mention this transfer in your privacy policy, stating the purpose and the recipient.
The plugin keeps no images, but documenting this processing in your records and privacy policy, and checking the Google Cloud terms applicable to your project, remains your responsibility.
Keeping costs under control
Each successful try-on is an image generation billed by Google. Three safeguards are built in:
- The monthly cap, which blocks new generations once reached.
- A per-IP throttle, which prevents burst calls.
- Exclusive use of the server-side product image, which rules out misuse of the service.
The counter resets automatically at the start of each calendar month. Alongside it, watch your budget in the Google Cloud console, where you can set billing alerts.
Troubleshooting
The button does not appear
Check, in order: the master switch is on, the project ID and JSON are filled in, the product belongs to an eligible category or is forced to Always show, and the product actually has a main image.
Authentication error message
The JSON key is invalid or incomplete, or the service account lacks the Vertex AI User role. Paste the full file again and check the role in the Google Cloud console. Also confirm the OpenSSL extension is available on your hosting.
No image generated
The model may reject a photo that is too dark, blurry, cropped to the face, or containing several people. Ask for a sharp, well-lit photo, ideally full-body and facing the camera. A very strict safety filter can also block some images.
Region or model not found error
The model is not available in the region you entered. Revert to us-central1 and check the model’s regional availability in Google’s documentation.
The service reports being at capacity
The monthly cap has been reached. Raise it in the settings, or wait for the next month. The current month’s counter is visible at the top of the settings page.
Frequently asked questions
Do I need Composer?
No. The plugin uses a native autoloader and signs Google authentication in pure PHP, via OpenSSL.
Is the plugin HPOS-compatible?
Yes, compatibility with High-Performance Order Storage is declared.
Does it work on mobile?
Yes. Capture uses the front camera where the browser allows it, and photo upload always remains available.
Can shoppers try on things other than clothing?
The model is trained for worn garments. Results on accessories, shoes or objects are far less reliable. Restrict the widget to your clothing categories.
What happens if I uninstall the plugin?
Uninstalling removes the settings, the cached token and the monthly counters. The per-product setting is kept, so nothing is lost if you reinstall.