WooCommerce Shoppable Video: A 5-Minute Setup Guide (2026)

You don’t need a developer to add shoppable video to WooCommerce. You need a working store, a vertical product video, and about five minutes.

This is the short version. The long version (with all the strategy and gotchas) is in the complete guide.

Prerequisites

You’ll need:

• A live WooCommerce store on a recent version (5.x+).
• One vertical product video, under 100 MB and under 2 minutes long. Phone footage is fine.
• Admin access to WooCommerce (you’ll generate a REST API key).
• Theme access to drop in one <script> tag.

Step 1 — Sign up

Create a free Contextfully account: contextfully.co/signup. No card. Three videos free, forever.

Step 2 — Connect your WooCommerce store

In the Contextfully dashboard:

1. Click Stores → Connect store.
2. Pick “WooCommerce” and paste your store URL.
3. Click “Generate API key”. Contextfully gives you a one-click link that opens your WooCommerce admin already pre-filled — review the permissions and confirm.

The credentials are encrypted at rest with AES-GCM. We never see your password.

Step 3 — Upload your video

From the dashboard:

1. Click Videos → Upload.
2. Drag in your .mp4 (or .mov — we transcode either way).
3. Wait ~30 seconds for the container to transcode it to optimized 1080p.

While it’s processing you can pick a cover frame — or upload a custom JPG/PNG/WebP up to 5 MB.

Step 4 — Tag products

This is where the magic happens.

1. Open the video. The product picker shows your live WooCommerce catalog.
2. Pick the products that appear in the video. Multiple is fine.
3. Optional: set timing. If you want product A to show during 0–5s and product B during 5–12s, drag the timeline markers. Otherwise the products show together.

Save.

Step 5 — Customize the widget

Pick the layout (single video, carousel, or grid), the brand colors (we default to your primary brand color), and the cart behavior (open product page, add to cart, or both).

Live preview updates as you change settings. When it looks right, click Publish.

Step 6 — Embed on your store

Contextfully gives you one <script> tag. Paste it where you want the widget to appear. The easiest place:

1. WooCommerce → Appearance → Customize → “Additional scripts” (or any plugin like Insert Headers and Footers).
2. Or directly into your theme — Appearance → Theme File Editor → single-product.php.

That’s it. The widget loads from Cloudflare’s edge and shows on every device.

Step 7 — Test before launching

• Open the page on a phone. Tap the widget. Make sure the cart actually fills.
• Check the cart on desktop. Confirm the right product, right variant, right price.
• Open Lighthouse on the page. Performance shouldn’t drop more than 2–3 points.

Step 8 — Launch

Make the page public. Tell your audience. Watch the cart events come in via the dashboard analytics.

Pre-launch checklist

• Video plays on iOS Safari, muted by default.
• Tap-to-cart works on mobile.
• Out-of-stock items hide automatically.
• Page Lighthouse score is still 90+.
• Privacy policy mentions the widget (we provide template language).

What’s next

If your first widget works, ship a second one. Many stores see the biggest lift on the second widget — once the team understands the format and the customers know what to expect.

When you’re ready to dig into the strategy side, the complete guide is next.

Want stats to back it to your team? See our video commerce statistics 2026 breakdown.