Virtual try-on for WooCommerce stores

Use a staging WordPress site or a controlled unpublished product page and keep a backup of the theme. You need permission to export products, a Closku merchant workspace, and someone who can add a script to the storefront template. Configure both the staging origin and the eventual live storefront domain in Closku.

Use a child theme or a managed script insertion mechanism rather than editing a parent theme that updates will overwrite. WordPress's child theme guide describes that arrangement. Block themes and page builders may need a different insertion point; verify their actual rendered markup.

In WordPress admin, open Products → All Products and choose Export. Start with one garment. WooCommerce's official CSV exporter documentation explains the native export and variation fields.

Review the Closku import preview instead of assuming the native file's numbered attribute columns, image lists, and Published field map unchanged. If the preview does not show the correct variants or active status, normalize a copy to these generic columns before importing:

name,sku,color,size,image_url,status
Blue tee,TEE-BLUE-M,Blue,M,https://YOUR-STORE.example/blue-tee.jpg,active

Replace the example image URL with a reachable garment image. Use status set to active for products intended for the widget, and use explicit color and size columns for the combinations you want to import. Preserve SKU text as text in your spreadsheet.

The current WooCommerce-specific reader expects semicolon-separated image URLs and an explicit status field. The generic format above avoids relying on those native export differences. Closku imports up to four images per product; inspect the import results and active garment image before proceeding. See catalog management.

Copy the exact install line from Your Widget in the Closku workspace. Place it before the closing body tag through your child theme's footer or your team's managed footer script insertion. Do not paste PHP code into a product description or install an unrelated marketplace extension to follow this guide.

<script src="https://closku.com/widget/YOUR-STORE-SLUG.js" defer></script>

The example slug is a placeholder. Use the complete line from your workspace, include it once, and confirm any script optimization or consent mechanism permits it to run at the appropriate time.

In your single-product template or builder's product context, render the actual Closku catalog product ID on an element near the purchase form:

<div data-product-id="YOUR-CLOSKU-CATALOG-PRODUCT-ID"></div>

Replace the placeholder with that garment's Closku product ID. Have your developer store the mapping in a product custom field or controlled template configuration so each product page renders the correct value. WooCommerce's numeric product/variation ID and the SKU are not the Closku API identifier.

The loader looks for data-product-id elements, then falls back to product forms. Native WooCommerce forms or a page builder may not provide the right Closku context. Inspect existing attributes to avoid duplicate or incorrectly bound buttons. Variable products need separate verification; automatic variation synchronization is not established by this example.

1. Open the staged product page in desktop and mobile browsers.
2. Confirm the storefront script and configuration load for the configured origin.
3. Check the button appears once and the intended active Closku garment is selected.
4. Open and close the widget, change the WooCommerce variation, and confirm Add to cart still works.
5. Use an approved isolated test merchant and a permitted photo for any full render.
6. Test page builders, quick views, cached pages, and dynamically loaded product sections separately.

Full try-on requests can consume plan usage. The simulated walkthrough shows the interface without proving production generation or sizing accuracy. Publish only the product contexts you have verified on your store.

• No widget: inspect the script URL, configuration request, and allowed storefront origin.
• Duplicate buttons: check whether the theme, builder, and footer mechanism each include the script.
• Wrong garment: correct the Closku catalog ID mapping; a WooCommerce ID alone will not resolve it.
• Missing product: review active status, import errors, and the expected garment image.
• Works on staging only: check the live domain and any live-only caching or script delay configuration.

Keep a known product URL and import example when contacting support. See Closku troubleshooting and the documentation for the current service workflow.

Closku's current experience provides visual try-on, not an automated size recommendation. Read how sizing differsand retain the size chart alongside the preview. To evaluate outcomes, follow the returns measurement guide.

There is no live WooCommerce catalog sync. Review changes in the Closku workspace, and confirm how existing products should be updated before repeating an import. Starter costs $49/month for 145 try-ons. Compare all plans and allowances or create an account. Ask the team about your theme at hello@closku.com.