How to Embed an Instagram Feed on WooCommerce (Step-by-Step)

Choose your placement route

WooCommerce's documentation is clear on the split: with a block theme you edit templates, including the Single Product template, visually in the Site Editor; with a classic theme you can use blocks in posts and pages but you don't get the Site Editor for shop templates. To create a template for one product, WooCommerce's steps are Appearance › Editor, Templates, add new, then "Single Item: Product" and choose the product.

Step by step with Idukki

WooCommerce's REST API keys come in Read, Write or Read/Write permission levels. Give any integration the least access it needs, and revoke keys you no longer use from the same screen. Tag one to three products per post, the ones actually visible; AI tagging can suggest matches, but check them before publishing. If you run several collections on one page (a homepage gallery and a reels strip, say), the embed code checks whether the Idukki loader is already present before adding it, so the script loads once.

The WordPress catch: who can save a script

WordPress's documentation for the Custom HTML block explains that for users without the unfiltered_html capability (for example, a Contributor), WordPress sanitises the block's content and strips disallowed tags such as <script> and <iframe> when the post is saved. On a single-site install, Administrators and Editors have it by default and Authors and Contributors don't; WordPress's roles documentation notes that on multisite only Super Admins have it. The practical risk: an Administrator adds the feed, someone with a lower role later fixes a typo on the same page, and the script is quietly removed on save.

The Instagram side

Meta switched off the Instagram Basic Display API on 4 December 2024 and directed developers to the Instagram API with Facebook Login or the Instagram API with Instagram Login, which Meta describes as for "Instagram professionals: businesses and creators". Many WordPress Instagram plugins were built on the retired API, so if yours froze that month, convert to a business or creator account and reconnect through a tool on the current API. Showing a customer's post also needs their permission; see collecting UGC legally from Instagram and TikTok and Instagram rights request templates.

Performance on WordPress

Add data-ugc-lazy="1" to the placeholder element in the embed code for feeds below the fold; the widget then waits until the placeholder is near the viewport before mounting. Wrap the embed in a div with a min-height so the page doesn't jump when images load (Google's good threshold for Cumulative Layout Shift is 0.1 or less). Then check your caching or optimisation plugin: settings that delay, defer or combine JavaScript can hold the widget back until the visitor interacts, or break its loader. Exclude it, clear the cache, and test logged out. Core Web Vitals and UGC widgets covers the before-and-after measurement.

Troubleshooting