Skip to content

WooCommerce plugin

Ziex Try-On for WooCommerce adds a "Try it on" button to product pages. The shopper uploads a photo of themselves and sees the garment on themselves. You set it up in WordPress, without code: upload the archive, paste the key, choose the categories.

The current version is 1.4.0.

What the plugin does

  • Prints a "Try it on" button on the product page and starts the widget when the shopper presses it. The widget is loaded through the service's loader, added asynchronously: on the first click, or at once on a page where a try-on of this shop is still pending in the tab.
  • Connects the shop to the service with your secret key. The key is stored in the WordPress database and is sent only from your server to the service.
  • Puts only the publishable key (pk_…) on product pages. It is fetched from the service by the plugin itself and works only in a browser, only on the website the key is bound to, and only for try-ons. See Keys.
  • Decides for each product, by its categories, whether the button is shown and what kind of garment it is.
  • For a variable product, tries on the photo of the variation the shopper has selected.
  • Does not touch orders. It declares compatibility with WooCommerce High-Performance Order Storage.

The shopper's photo goes from their browser straight to the service, not through your server.

Requirements

WordPress 6.5 or newer (tested up to 7.1)
WooCommerce 8.0 or newer (tested up to 11.1)
PHP 8.0 or newer
The site Served over https
A key A live secret key (tryon_…) bound to your shop's domain

The key is issued by us. Ask your account manager if you do not have one. It is shown once, when it is created, so keep it. A domain bound to the key also covers its www. form and its subdomains.

Get the plugin

Download the archive: https://app.ziex-tryon.com/downloads/ziex-tryon-woocommerce.zip. The same address is the download_url of the WooCommerce entry in the integrations block of GET /api/v1/tryon/integration (see Building a plugin). The archive has one folder, ziex-tryon/.

Install and connect

  1. In WordPress open Plugins → Add Plugin → Upload Plugin, choose the archive, press Install Now, then Activate.
  2. Open WooCommerce → Virtual try-on. A Russian WordPress shows Примерка онлайн.
  3. On the Connection tab paste the secret key into API key and press Save and check. The plugin asks the service whether the key fits this site. The card turns to Connected and shows the account, the bound website, the plan and the generations left.
  4. Open the Categories tab, press Suggest from category names, review the choices and press Save categories.
  5. Open a product page. The button sits under Add to cart.
  6. Add the paragraph about the service to your privacy policy. See Privacy, CSP and test keys.

Settings

The settings page has three tabs.

Connection

Setting What it does
API key The secret key. The field is always empty after saving; the stored key is shown masked. Leave it empty on save to keep the stored key. A pk_… key or a key of a wrong shape is refused before any request.
Show the try-on button on product pages (in the group Show on the website) On by default. Off hides the button on every page.
Visitor cabinet On by default. The widget keeps the shopper's results ("My looks") in their browser for up to 30 days, and their photo only if they tick "Remember this photo on this device". Turning it off also erases what visitors already stored, on their next visit. Turn it off if you run scripts on your pages that you do not trust.
Advanced → Service address Leave it as it is. Change it only if our support asks you to.
Disconnect Removes the key and hides the buttons.

Save and check asks the service about the key and stores the answer. The plugin repeats the check every hour.

  • A refused key (revoked, suspended, bound to another website) hides the buttons. They disappear at the next check or at once on Save and check. The card shows the reason.
  • A network error or an outage of the service never hides the buttons. The last good status stays, and the card shows the error of the last check.
  • If the card says the key is bound to another website, the key's domain differs from your site's address. Ask us to bind the key to your domain.
  • If we rotate the publishable key of your key, the widget on your pages fails until the plugin checks again, within an hour. Press Save and check right after the rotation.

Categories

The service cannot try on every kind of item. The tab lists what can be tried on today (tops, outerwear, bottoms, dresses and jumpsuits) and what cannot (for example shoes and bags). The list comes from the service and can grow.

For each category of your shop choose one value:

Value Meaning
A category name All products of the shop category are tried on as that kind of garment.
Cannot be tried on The products get no button. Shoes, bags, hats, jewellery.
Detect automatically (mixed category) The service works out the kind of item. For mixed categories such as Sport.
— does not decide The category decides nothing. For collections such as New or Sale. A child category takes the value of its parent.

A product with several categories is resolved in this order:

  1. The choice on the product itself (below).
  2. Any category set to Cannot be tried on: no button.
  3. Exactly one concrete category among the product's categories: that one.
  4. Several different concrete categories, or only Detect automatically: automatic detection.
  5. No category sets a value: no button.

Suggest from category names fills the obvious categories from their names, in English and in Russian. It saves nothing by itself. Refresh list fetches the list of categories from the service at once. Without it the plugin re-checks every hour, and the list itself is cached for 12 hours.

  • When the service adds a category, a notice that you can dismiss asks you to check the mapping.
  • When the service drops a category that you had chosen, the category stays selected and is marked "(unavailable)". Products in it show no button until you choose another value.
  • When the service cannot be reached, the tab shows the list from the last successful check.

Result for your catalogue at the bottom counts the products that get the button, those that cannot be tried on, those switched off on the product, and those that no category decides, with links to the last ones.

Button

Setting What it does
Button text Empty means "Try it on" (or its translation by the site language).
Position After the "Add to cart" button (default), Before the "Add to cart" button, Below the product summary, or Only where I place the [ziex_tryon_button] shortcode.

The button is shown on the product page only.

Per-product override

Open a product for editing. Product data → General → Virtual try-on has four choices: By the product categories (default), a category, Detect automatically, and Off for this product. The field also says what the product gets now, for example "Now: no try-on button". Use it for a product in a mixed category, such as a sweater dress among knitwear.

Check that it works

  1. Connection shows the green card Connected, with your account and your website.
  2. On Categories, Result for your catalogue counts a non-zero number of "Products with the try-on button".
  3. Open a product whose category can be tried on. The button is there.
  4. Press it, upload a photo and wait for the result. The widget window opens on your page.
  5. Sign in to the client portal at https://app.ziex-tryon.com. The try-on is in the list of jobs with the product's name and link, and the API Keys page shows woocommerce/1.4.0 as the last label the key was used with.

If a product has no button, its edit screen says why. For the products that no category decides, the Categories tab lists them. The product also needs a photo.

Update

When a newer version exists, the Connection tab shows "Version X of the plugin is available (installed: Y)" with a Download link. The plugin learns the latest version from the answer of the service, from the plugin block of GET /api/v1/tryon/integration.

To update, download the new archive and upload it as described in Install and connect.

Integration label

The plugin names itself to the service: woocommerce/<version>, for example woocommerce/1.4.0. The widget sends the label with every try-on, and the plugin sends it with its two server calls, in the X-Ziex-Integration header. You do not need to set anything. See Identification.

Privacy, CSP and test keys

  • Privacy. The shopper's photo is sent to the service. The service keeps the photo and the result for 180 days, and your shop's privacy policy must say so. A ready paragraph, in English and in Russian, is on Privacy text for shops; the plugin's readme carries the same text. Consent and the transfer of data abroad are questions for your own counsel.
  • CSP. If your shop sends a Content-Security-Policy header, allow the hosts listed on CSP. The plugin hands its settings to the page in a small inline script, so under a strict script-src that script needs a nonce or a hash. See Two things that are blocked under a strict policy.
  • Test keys. The API key field accepts only a live key: tryon_ followed by 32 letters and digits. A test key (tryon_test_…) is refused by the form. Test keys are for building an integration; see Test keys.

If something is off

Symptom What to check
The card says the key is bound to another website The key's domain differs from your site's address. Ask us to bind the key to the right domain.
"The key is not bound to any website yet" The key was issued without a domain. Ask us to bind it.
No button on a product The product's edit screen says why. Check the Categories summary, the switch Show the try-on button on product pages, and that the product has a photo.
The button disappeared on all products The key was revoked or the account suspended. The Connection tab shows the error of the last check.
The widget fails after we rotated the key Press Save and check.
The button says the service is not available The widget script did not load. Check your CSP and that https://api.ziex-tryon.com is reachable from the shopper's network.

Errors the widget shows to the shopper are listed on Errors. To ask for help, quote the label woocommerce/<version> and the request id described on Identification.

See also