How to Add Virtual Try-On to WooCommerce (No Plugin Needed)

Adding virtual try-on to WooCommerce doesn't require a plugin, a developer, or any changes to your theme code. All it takes is one script tag — and you can add it through the WordPress admin panel in about five minutes.

This guide covers exactly how to do it, which method to use for your setup, and what to check once it's live.

Why Script Tag Instead of a Plugin

WooCommerce plugins are powerful, but they come with trade-offs: plugin conflicts, WordPress update dependencies, and the need to vet every plugin for security and performance. A script tag avoids all of this.

Drape's integration is a single JavaScript snippet. It reads the product information directly from the page (specifically the og:image meta tag, which WooCommerce sets automatically via Yoast or RankMath), adds a Try On button, and handles the full try-on flow in a modal. Nothing to install, nothing to maintain.

Prerequisites

Before you start:

• A WooCommerce store with products that have a featured image set
• Yoast SEO or RankMath installed (both set og:image automatically — if neither is installed, you may need to set the meta tag manually)
• A Drape account (free, no credit card required) — sign up at drapetryon.com/signup

Step-by-Step Installation

Step 1: Get Your Script Tag

Sign up at drapetryon.com/signup. After your account is created, go to the Dashboard → Integration tab. Your personalised script tag (with your API key pre-filled) is shown there. Copy it.

The snippet looks like this:

<script src="https://cdn.drapetryon.com/widget.js" data-api-key="YOUR_API_KEY" async></script>

Step 2: Add the Script to WooCommerce

There are three ways to add the script tag, in order of simplicity:

Method A — Insert Headers and Footers plugin (recommended)

Install the free "Insert Headers and Footers" plugin by WPBeginner. In WordPress admin, go to Settings → Insert Headers and Footers. Paste the script in the Footer Scripts section. Save. Done.

This method works without touching any theme files and survives theme updates.

Method B — WooCommerce Additional Scripts

Some WooCommerce themes have a built-in "Additional Scripts" or "Custom Code" field in the customiser. Check Appearance → Customize for a code injection section and paste the script in the footer code field.

Method C — functions.php / theme editor

If you're comfortable with WordPress theme files, open Appearance → Theme Editor → functions.php and add:

function drape_widget_script() {
    echo '<script src="https://cdn.drapetryon.com/widget.js" data-api-key="YOUR_API_KEY" async></script>';
}
add_action('wp_footer', 'drape_widget_script');

Use a child theme if your theme is a premium theme that updates automatically.

Step 3: Verify It's Working

Open any product page on your store. You should see a "Try on Me" button appear near the product images. Click it, upload a test photo, and confirm the try-on generates.

If the button doesn't appear, check:

1. Is the script tag in the page source? (View Page Source → search for drapetryon)
2. Is an og:image meta tag present on the product page? (View Page Source → search for og:image)
3. Is there a JavaScript console error? (Open browser developer tools → Console tab)

Customising the Button

You can customise the button colour by adding a data-button-color attribute to the script tag:

<script src="https://cdn.drapetryon.com/widget.js" data-api-key="YOUR_API_KEY" data-button-color="#e63946" async></script>

The text colour (black or white) adjusts automatically based on your colour's luminance.

To use a specific product image instead of the auto-detected one, add data-garment-image="https://your-image-url.jpg" to the script tag.

Pricing for WooCommerce

WooCommerce merchants use prepaid credit packs — no monthly subscription:

• 100–499 credits: $0.10 per try-on
• 500–1,999 credits: $0.08 per try-on
• 2,000+ credits: $0.06 per try-on

Credits never expire. Indian merchants can pay via UPI or bank transfer — contact support after payment to top up.

Every account starts with 10 free try-ons, no credit card required.

Get started free at drapetryon.com/signup or read the full WooCommerce setup guide →.