UGC widget for WooCommerce and WordPress: install, tag, measure

Three ways to place the gallery

1. A header-and-footer plugin (most teams)

Plugins such as WPCode or Insert Headers and Footers let you add a script to every page without touching the theme. Paste the loader into the footer slot. Then, on any page, add a Custom HTML block containing the placeholder div. Theme updates never touch it.

2. functions.php (developer-maintained sites)

add_action( 'wp_footer', function () {
  echo '<script async src="https://widget.idukki.io/idukki.js"></script>';
} );

Use a child theme so the hook survives updates. The placeholder div still goes in the page content or template where the gallery belongs.

3. A shortcode you write once

add_shortcode( 'idukki', function ( $atts ) {
  $a = shortcode_atts( [ 'guid' => '', 'pid' => '' ], $atts );
  $pid = $a['pid'] ? ' data-filter-pid="' . esc_attr( $a['pid'] ) . '"' : '';
  return '<div data-ugc="idukki" data-guid="' . esc_attr( $a['guid'] ) . '"' . $pid . '></div>';
} );

With the shortcode in place, editors drop [idukki guid="…"] into any post or product description. On a WooCommerce single product template, pass the product id so the gallery filters to that product: [idukki guid="…" pid="{product id}"], or in a template file use get_the_ID() to fill it.

Getting WooCommerce products into the tagger

WooCommerce ships a product exporter (Products, then Export) that writes a CSV with SKU, name, price, image and permalink. Import that file in the Idukki dashboard and map the columns once. Stores that already run a Google Shopping feed plugin can paste the feed URL instead and schedule a re-sync, which keeps prices honest when a sale starts.

Variable products are the one wrinkle: tag the parent product, not each variation. The gallery links to the parent page, where WooCommerce handles variation selection the way it always does.

Add to cart and measurement on Woo, honestly

On a stock WooCommerce theme the gallery can add to cart in place, because WooCommerce exposes its cart parameters and fragments on the page and the widget uses them. Some themes and optimisation plugins strip or defer those globals; when they are missing, the gallery falls back to opening the product page rather than failing silently. If you see the fallback and want in-place cart writes, the usual culprit is a script-defer plugin excluding jQuery from the page.

Measurement follows the same shape as the BigCommerce guide: impressions, post clicks, product clicks and add-to-cart intent are tracked on every platform; attributing an order to a post needs the platform's order webhook, which is live for Shopify and scheduled for WooCommerce. Until then, the WooCommerce numbers stop at intent.

The plugin you should remove

Most WordPress stores that come to us already have a social-feed plugin. The typical one injects its own copy of jQuery, loads every image at full size, and fetches the feed on the client on every page view. Replacing it with a single deferred loader is usually the largest Largest Contentful Paint improvement available on the site, before any UGC benefit is counted. Measure before and after with PageSpeed Insights; the widget speed programme post shows what to look for.