Adding AI Try-On to your WooCommerce store

You’ll add one code snippet to WordPress. It loads the try-on script on your site and puts a Try on button next to Add to cart on every product page, filled in with that product’s name, image, price, and link.

Before you start

• In your AI Try-On dashboard, create a widget for the type of product you sell and add your store’s domain.

• In the Your widgets block, open the install window of that widget. In the button code, copy two values:

  • data-neurodyn-ai-try-on-product-type — the widget type, like full-body or upper-body;
  • data-neurodyn-ai-try-on-api-key — the widget’s key.

  Each widget type has its own key, and they work only as a pair.

Adding an AI Try-On widget to your website

Adding the snippet

1. In your WordPress admin, go to Plugins → Add New Plugin, search for Code Snippets, then click Install Now and Activate. You get a Snippets item in the admin menu.

2. Go to Snippets → Add New and name the snippet, for example Vizbl AI Try-On.

3. Choose the Functions (PHP) snippet type and paste this code:

// ===== Settings: change these =====
// Copy both from the same widget's install window in your AI Try-On dashboard
$product_type = 'full-body';             // value of data-neurodyn-ai-try-on-product-type
$api_key      = 'PASTE_WIDGET_KEY_HERE'; // value of data-neurodyn-ai-try-on-api-key
$button_text  = 'Try on';
// Product name, image, price, and link are filled in automatically from each product
// ===== Don't change anything below this line =====

add_action( 'wp_head', function () {
    echo '<script defer src="https://cdn.neurodyn.ai/@neurodyn/ai-try-on/dist/ai-try-on.embed.min.js"></script>';
} );

add_action( 'woocommerce_after_add_to_cart_button', function () use ( $product_type, $api_key, $button_text ) {
    global $product;
    $image = wp_get_attachment_url( $product->get_image_id() );
    $price = html_entity_decode( wp_strip_all_tags( wc_price( $product->get_price() ) ) );
    ?>
    <button type="button" class="button"
        data-neurodyn-ai-try-on-dialog
        data-neurodyn-ai-try-on-product-type="<?php echo esc_attr( $product_type ); ?>"
        data-neurodyn-ai-try-on-api-key="<?php echo esc_attr( $api_key ); ?>"
        data-neurodyn-ai-try-on-product-name="<?php echo esc_attr( $product->get_name() ); ?>"
        data-neurodyn-ai-try-on-product-image-src="<?php echo esc_url( $image ); ?>"
        data-neurodyn-ai-try-on-product-price="<?php echo esc_attr( $price ); ?>"
        data-neurodyn-ai-try-on-product-url="<?php echo esc_url( $product->get_permalink() ); ?>">
        <?php echo esc_html( $button_text ); ?>
    </button>
    <?php
} );

4. In the settings at the top of the code, paste the two values you copied from the install window:

• replace full-body with the value of data-neurodyn-ai-try-on-product-type;
• replace PASTE_WIDGET_KEY_HERE with the value of data-neurodyn-ai-try-on-api-key.

You can also change the button text there.

The product name, image, price, and link — data-neurodyn-ai-try-on-product-name, -product-image-src, -product-price, and -product-url — you don’t fill in. The code takes them from each WooCommerce product automatically, including the product’s main image that the AI uses for the try-on.

5. Under the code, select Only run on site front-end, then click Save Changes and Activate. The button appears on your product pages.

If you edit your child theme instead, the same code goes at the end of its functions.php file.

Checking that it works

1. Open any product page in your store. The Try on button is next to Add to cart.
2. Click Try on. The try-on window opens with your product’s image.

If there’s no button on the page, your theme may build product pages from blocks, where this code doesn’t add it. Pass this guide to your developer.

If the button is there but the window doesn’t open:

• Check that the widget type and key come from the same widget’s install window.
• Check that the domain in your dashboard matches your store’s address.
• Check that your token balance isn’t zero. At zero, try-ons pause and the widget turns off for shoppers.
• Check that the snippet is active in Snippets.

If the window asks for the wrong photo, like a full-length shot for a T-shirt, the widget type in the code doesn’t match your products. Take the widget type and key from the widget of the right type.

The snippet puts the same button with the same widget type on every product page. If you sell several types of products, or want the button only on some of them, pass this guide to your developer.

Get help in our Discord

Join our Discord to ask questions about these instructions or get technical support. If something isn’t working, open a ticket and our team will investigate.