Labelling AI images in WooCommerce

Add the script tag

<script src="https://www.ai-label.app/widget.js" defer></script>

• No code: the WPCode plugin (formerly “Insert Headers and Footers”). In the “Code Snippets” menu, paste the script tag into the header field (“Scripts in Header”) and save.
• Child theme: in functions.php with wp_enqueue_script(). There, theme updates do not overwrite your change.

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script( 'ai-label', 'https://www.ai-label.app/widget.js', array(), null, array( 'strategy' => 'defer' ) );
} );

Then open a product page and a category page with a marked image. The label appears in the top right corner of the image, on product cards as well.

Mark images

Which images need a label is your decision, for example with the labelling check. The widget only labels marked images, in three ways that can be combined:

• Attribute on the image: data-ai-label="generated" for images created entirely with AI, data-ai-label="modified" for photos edited with AI.
• File name with a marker before the extension: vase--ai.jpg or vase--ai-mod.jpg.
• Alt text ending in “(AI-generated)” or “(AI-modified)”.

In WooCommerce, mark images through the alt text in the media library, found under Media in the image details. You set the product image and gallery in the right-hand column of the product editor; both point to files in the media library.

The file name does not work in WordPress. On upload, sanitize_file_name() collapses several hyphens into one. vase--ai.jpg becomes vase-ai.jpg, and the widget no longer sees the marker. Use the data-ai-label attribute only in child theme templates.

Pitfalls

• Delayed JavaScript: optimisation plugins sometimes hold scripts back until the visitor scrolls, taps or moves the mouse, for example “Delay JavaScript execution” in WP Rocket. Then the label is missing at first view. Add widget.js to “Excluded JavaScript Files” or to your plugin's exclusion list.
• Page cache: after adding the script, clear the cache of your caching plugin and, if you use one, your CDN.
• Zoom and full screen: the product gallery zooms on hover and opens images full screen on click. Check that the label appears there too.
• Empty alt text: where alt text is missing, some themes insert the product name instead. Then the suffix is missing and the image stays unlabelled.

Limits of the widget

• The widget only reaches <img> elements on pages with the script. Background images from the stylesheet and images under 48 pixels (adjustable with data-min) stay unlabelled.
• Cart and checkout often show only small thumbnails. Check both pages.
• It cannot reach emails such as order confirmations. For images outside your website, create a copy with the label burned in using Label an AI image.
• Privacy: when the script loads from ai-label.app, our host sees the IP address, as with any request. The script sets no cookies. Mention it in your privacy policy.

Native app

A dedicated WooCommerce app is planned. There is no date yet.