Add the beyondRegular Widget to WooCommerce
Install the beyondRegular shoppable video widget on WooCommerce with one script tag and a preset div. Works with any theme, any gateway.
Paste one script tag into your WooCommerce theme, then drop a preset div wherever you want the widget to appear. The script is `https://www.itsbeyondregular.com/embed.js` and the div uses `data-bn-preset="YOUR_PRESET_ID"`. Checkout stays on your existing gateway (Razorpay, PayU, Cashfree, Stripe, whatever you already run).
Step 1: Load embed.js once, site-wide
Open your WordPress admin and go to Appearance, then Theme File Editor, and open your active theme's `header.php`. Just before the closing `</head>` tag, paste this line:
`<script async src="https://www.itsbeyondregular.com/embed.js"></script>`
One tag covers every page. It is async, weighs about 26 KB gzipped, and does not block your LCP. If you prefer not to touch theme files, use a plugin like WPCode or Insert Headers and Footers and drop the same tag into the header slot. Child themes are fine. Do not add the script twice, once is enough for the whole site.
Step 2: Drop a preset div where the widget should render
Grab your preset ID from the beyondRegular dashboard (Presets, then Copy embed). It looks like `pr_9f2ab1`. Wherever you want the widget, paste:
`<div data-bn-preset="pr_9f2ab1"></div>`
On a product page, edit `single-product.php` or use a WooCommerce hook such as `woocommerce_after_single_product_summary`. On a landing page, use a Custom HTML block in Gutenberg and paste the div straight in. Elementor and Bricks users pick the HTML widget and paste the same line. The format (horizontal carousel, vertical carousel, floating bubble, reel feed) is set on the preset, not in the markup, so you can switch layouts without editing the theme.
Step 3: Tag products so the frames become shoppable
Import a clip in the dashboard by pasting an Instagram or TikTok URL, or upload the file directly on Starter and above. Open the clip, scrub to the frame, and tag the WooCommerce product. The widget pulls the title, image, and price straight from your WooCommerce catalogue over the REST API, so you never re-enter prices. Indian shoppers see INR automatically based on IP. When a shopper clicks Buy, they land on your normal WooCommerce cart with the product added, and checkout runs on whichever gateway you already have (Razorpay, PayU, CCAvenue, Cashfree, Stripe). No gateway swap, no new checkout page.
Troubleshooting: widget does not appear
Common causes, most frequent first. One: the preset ID is wrong or the preset is unpublished. Open the dashboard, confirm the preset is live, and copy the ID again. Two: a caching plugin (WP Rocket, W3 Total Cache, LiteSpeed) is stripping or deferring the script. Add `embed.js` to the JS exclusion list and purge the cache. Three: your CSP header blocks `itsbeyondregular.com`. Allow it under `script-src` and `connect-src`. Four: the div sits inside a shortcode wrapper that escapes HTML. Use a Custom HTML block instead of a text block. Five: ad blockers on your test browser. Try incognito with extensions off before assuming the widget is broken.
Common questions
Do I need a WooCommerce plugin to install beyondRegular?
No. beyondRegular is theme-agnostic and works with plain WooCommerce, no plugin required. You add one script tag to your header and paste a preset div where you want the widget. The widget reads product data through the standard WooCommerce REST API, so as long as your products are published and have prices, they show up correctly. If you want to avoid editing theme files, any header-injection plugin (WPCode, Insert Headers and Footers, Header Footer Code Manager) works. A dedicated WooCommerce plugin is on the roadmap but not required today.
Where do I put the div on a WooCommerce product page?
Two options. Editing the theme: open `woocommerce/single-product.php` in your child theme and drop `<div data-bn-preset="YOUR_ID"></div>` where you want it, or hook into `woocommerce_after_single_product_summary` from your `functions.php`. No theme editing: install a plugin like Code Snippets, add a snippet that hooks into `woocommerce_after_single_product_summary`, and echo the div. For the same widget across every product, one hook covers all products. For per-product widgets, use conditional logic on the product ID inside the hook.
Will beyondRegular replace my WooCommerce checkout?
No. beyondRegular never touches your checkout. When a shopper clicks Buy inside the widget, the product is added to the normal WooCommerce cart and the shopper continues through your existing checkout on your existing gateway. Razorpay, PayU, CCAvenue, Cashfree, and Stripe all keep working exactly as configured. Prices, taxes, shipping rules, and discount codes come from WooCommerce, not from us. This also means your existing analytics (GA4, Meta Pixel, server-side tracking) keep firing on the checkout page as they always have.