How to Add Virtual Try-On to WooCommerce (Without a Plugin) in 2026
WooCommerce powers around 28% of all online stores worldwide. Yet most virtual try-on tools are built Shopify-first, leaving WooCommerce merchants either with mediocre WordPress plugins or with nothing. This guide walks through the setup that the merchants we work with actually use: a script-tag integration that takes 10 minutes and survives every WooCommerce and theme update.
Why "no plugin" is the right answer
The reflex when you need new functionality on WordPress is to install a plugin. For virtual try-on it's the wrong reflex, for three reasons:
1. Plugins consume your PHP cycles. Every active plugin runs on every request, eating into the resources WooCommerce already needs for catalog queries and cart operations. A heavy try-on plugin can shave 200ms off your TTFB. 2. Plugins expand your attack surface. WordPress plugin vulnerabilities are the #1 source of WooCommerce store compromises. Adding one more plugin to maintain and audit is a real ongoing cost. 3. Plugins break on updates. WooCommerce ships major updates roughly every quarter. Themes update independently. Plugins frequently break against new combinations and need to be patched by their authors — usually after you've already noticed your try-on stopped working.
A pure script-tag integration sidesteps all three problems. It runs in the customer's browser only when they click "Try it on" — zero server cost, zero attack surface, zero update fragility.
Step 1: Get an API key
You need a domain-scoped key, which the customer's browser presents when calling the try-on service. The flow:
1. Go to agalaz.com/partners 2. Sign in with Google 3. Register the WordPress domain you'll use the script on (e.g. `yourstore.com`) 4. Copy the API key — it starts with `agz_live_`
The key is scoped to the domain you registered. Even if it leaks in browser code (it will, scripts are public), it cannot be reused by anyone else on a different domain.
Step 2: Add the script tag to your WordPress header
You have three options depending on how you manage your theme:
Option A — Theme File Editor (works on any theme)
1. WordPress admin → Appearance → Theme File Editor 2. Open `header.php` 3. Just before the closing `` tag, paste:
```html ```
4. Click Update File
This survives WooCommerce updates, but child-theme updates can revert it. Use Option B or C if you update your theme often.
Option B — Code Snippets / Insert Headers and Footers plugin
If you have either of these popular WP plugins installed:
• Code Snippets: Snippets → Add New → name "Agalaz", paste the script tag in the body, "Run snippet everywhere on the site" • Insert Headers and Footers: Settings → paste the script tag in the "Scripts in Header" field
This survives theme updates because it lives in the database, not the theme files.
Option C — Elementor / Divi / WPBakery global header
If you use a page builder with theme-builder support:
• Elementor Pro: Templates → Theme Builder → Header → edit your header → add an HTML widget at the top with the script tag • Divi: Theme Builder → Default Website Template → Header → add Code module • WPBakery: Templates → Header → add Raw HTML element
Same effect, integrated into your visual builder.
Step 3: Add the try-on container to product pages
You only need it on product pages, not on the entire site. Three options:
Option A — Single product template (cleanest)
If you have a custom or child theme:
1. Locate `single-product.php` or `templates/single-product.php` in your theme 2. After the product gallery markup, add:
```php
```The script auto-detects the product image from WooCommerce's standard `.woocommerce-product-gallery__image` class and shows a "Try it on with AI" button.
Option B — WooCommerce hook (no theme edits)
Drop this into your child theme's `functions.php`:
```php add_action('woocommerce_after_single_product_summary', function() { echo '
'; }, 5); ```This injects the div on every product page using WooCommerce's standard hook, no template edits needed. The script then activates it.
Option C — Page builder HTML block
If you use Elementor, Divi, or WPBakery to build your product template, just add an HTML widget on the single-product layout with `
`. Same result.Step 4: Test it
1. Open any product page in an incognito window 2. You should see a "Try it on with AI" button next to the product image 3. Click it, upload a photo, see the result in ~10 seconds
If the button doesn't appear, check the browser console:
• "401 Unauthorized" → wrong API key, or the domain you registered does not match the current host (e.g. you registered `yourstore.com` but the page is loading on `www.yourstore.com`) • "agalaz-tryon container not found" → the div is missing from this particular product template • No console output at all → the script tag isn't loading, check that it's in the `
` and not blocked by a security pluginCommon pitfalls
Caching plugins (WP Rocket, W3 Total Cache, LiteSpeed Cache). These can defer or block script execution. If you see weird behaviour, exclude `widget.js` from JS optimization in your cache plugin's settings.
Security plugins (Wordfence, Sucuri). Some block external script loads by default. Whitelist `agalaz.com` in the security plugin's "allowed external scripts" setting.
Cloudflare Rocket Loader. This rewrites scripts in a way that occasionally breaks third-party tags. Add a `data-cfasync="false"` attribute if you have it enabled:
```html ```
What about Lighthouse and Core Web Vitals?
The script is loaded with `defer`, so it does not block initial render. The "Try it on" button appears after page load (typically <500ms after the rest of the page is interactive). Your LCP and FID stay where they are.
In our internal testing on a Storefront-themed WooCommerce demo, adding the widget changed Lighthouse Performance score by 0-2 points (within measurement noise).
Pricing
The trial gets you 7 days and 50 free renders — enough to verify it works on your real product catalogue. After that:
• Starter — €150/mo for 200 renders • Growth — €499/mo for 1,000 renders
Renders mean actual try-on requests, not page views. A customer who clicks "Try it on" three times before buying counts as 3 renders.
What if I need a custom integration?
If you're building a marketplace, a B2B store, or anything where the standard widget doesn't fit, use the REST API directly. Same pricing, same renders, full control over UI. The widget is the easy path for the 90% case; the API is for the rest.
Why bother
Fashion e-commerce returns hover at 30-40% globally — about three times the rate for non-apparel categories. The single biggest driver is fit anxiety: customers buy two sizes, return one, sometimes return both. Cutting that anxiety with a believable try-on in front of the buy button is the highest-leverage thing you can ship to your product pages this quarter.
Read the deeper version in Reducing Fashion E-commerce Returns: A Complete 2026 Guide, or just start the free trial and let real customers tell you whether it works on your store.