How to Embed a TikTok Feed on WooCommerce (Step-by-Step)

Single video or shoppable feed?

If you're building your own integration, TikTok's Display API lets an app list and display a user's public videos after that user logs in with Login Kit and grants the user.info.basic and video.list scopes. It's designed around the authorising account's own content, which is why feeds of customer videos rely on permission workflows rather than the API alone.

Step by step with Idukki

Product pages on a block theme. WooCommerce's documentation describes the Single Product template, which every product uses unless a product has its own. Open Appearance › Editor, Templates, Single Product, add a Custom HTML block below the product summary and paste the code. To show a feed on one hero product only, create a "Single Item: Product" template for it. Classic themes don't give you the Site Editor for shop templates, so use your page builder's product template, or ask a developer to print the embed from a WooCommerce single-product hook in a child theme.

Who saves it matters. WordPress's Custom HTML documentation says content saved by users without unfiltered_html is sanitised with disallowed tags such as <script> stripped. On a single site that capability belongs to Administrators and Editors; on multisite, only Super Admins. Add the embed with the right account, and keep it in a template rather than page content other people edit.

Tagging video

Tag the products actually on screen, one to three per video. For try-ons and hauls, tagging at the moment an item appears reads better than a list at the start; where your plan includes Video Hotspot Tagging, you can pin a product to a point in the video. TikTok UGC strategy for ecommerce covers which videos are worth featuring, and shoppable video on WooCommerce and WordPress covers layouts.

Performance: the WordPress-specific checks

Video weight is the risk. The HTML preload attribute tells the browser whether to fetch video in advance (none means don't; MDN notes it's a hint). Idukki's widget sets it by layout: only the active slide and its neighbours in a carousel or reel get preload="auto", grid tiles get none, and a video opened full-screen loads fully. For a feed below the fold, add data-ugc-lazy="1" to the placeholder element in the embed code so it mounts only when close to the viewport.

WordPress adds a variable most hosted platforms don't: optimisation plugins. Features that delay, defer or combine JavaScript can hold the widget back until the visitor interacts, and video or iframe lazy-load features can rewrite elements the widget expects to manage. If the feed behaves differently logged in and logged out, exclude its script from those features and purge the cache.

1. 1Record PageSpeed Insights for three product pages before installing.
2. 2After install, open a product page logged out, open DevTools and run document.querySelectorAll('video[preload="auto"]').length in the Console. A handful at most is healthy.
3. 3Filter the Network panel to Media and reload: no downloads for videos you can't see.
4. 4Wrap the embed in a div with a min-height so the page doesn't jump when the carousel appears (Google's good CLS threshold is 0.1 or less).
5. 5Re-run PageSpeed Insights and compare Largest Contentful Paint and CLS with the baseline.

Core Web Vitals and UGC widgets explains how to interpret the reports.

Troubleshooting