How to Embed a Widget on WooCommerce

Prerequisites

Before you start, have the following ready:

• Your Embeddy embed code. Log in at https://embeddy.ai/dashboard, open your widget, and copy the iframe embed code:

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

• WordPress admin access. You need an Administrator or Editor role to add Custom HTML blocks and edit pages.
• WooCommerce installed and active. These instructions work with WooCommerce 5.0+ and WordPress 5.9+ with the Block Editor (Gutenberg) enabled.

Method 1: Custom HTML Block

Easiest — no code required

The WordPress Block Editor (Gutenberg) includes a built-in Custom HTML block that renders raw HTML exactly as entered. This is the simplest way to embed an Embeddy widget on any WooCommerce page or post.

1. 1

   Open the page or post editor

   In your WordPress admin, go to Pages or Posts and edit the page where you want the widget to appear. You can also create a new page.

2. 2

   Add a Custom HTML block

   Click the + button to add a new block. Search for "Custom HTML" and select it. A text area will appear in the editor.

3. 3

   Paste your embed code

   Paste your Embeddy iframe embed code into the Custom HTML block. You can click the "Preview" tab in the block toolbar to see a live preview.

<div style="max-width: 800px; margin: 2rem auto;">
  <iframe
    src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
    width="100%"
    height="500"
    frameborder="0"
    style="border: none; border-radius: 8px;"
    loading="lazy"
    title="Interactive Widget"
  ></iframe>
</div>

4. 4

   Update or publish

   Click "Update" (for existing pages) or "Publish" (for new pages). Visit the live page to confirm the widget appears.

Method 2: Reusable Shortcode

Intermediate — requires functions.php edit

For a reusable solution, create a WordPress shortcode that outputs your Embeddy widget. You can then use the shortcode on any page, post, or even in WooCommerce product descriptions — without pasting the full iframe code each time.

1. 1

   Add the shortcode to functions.php

   In your WordPress admin, go to Appearance > Theme File Editor and open functions.php. Add the following code at the end of the file:

// Embeddy Widget Shortcode
function embeddy_widget_shortcode( $atts ) {
  $atts = shortcode_atts( array(
    'widget_id' => '',
    'props_id'  => '',
    'height'    => '500',
  ), $atts, 'embeddy' );

  if ( empty( $atts['widget_id'] ) || empty( $atts['props_id'] ) ) {
    return '<!-- Embeddy: missing widget_id or props_id -->';
  }

  $src = esc_url( 'https://embeddy.ai/webhost/' . $atts['widget_id'] . '?widget_props_id=' . $atts['props_id'] );
  $h   = intval( $atts['height'] );

  return '<div style="max-width:800px;margin:2rem auto;">'
    . '<iframe src="' . $src . '" width="100%" height="' . $h . '" frameborder="0" style="border:none;border-radius:8px;" loading="lazy" title="Interactive Widget"></iframe>'
    . '</div>';
}
add_shortcode( 'embeddy', 'embeddy_widget_shortcode' );

2. 2

   Use the shortcode anywhere

   Now you can embed your widget on any page or post using a simple shortcode:

[embeddy widget_id="YOUR_WIDGET_ID" props_id="YOUR_PROPS_ID" height="500"]

Method 3: Edit WooCommerce PHP Templates

Advanced — requires PHP knowledge

For automatic embedding on every product page (or other WooCommerce templates), you can use WooCommerce's template override system or action hooks. This is the most powerful approach for developers who want widgets to appear automatically on specific templates.

1. 1

   Use a WooCommerce action hook

   Add the following to your child theme's functions.php to inject a widget after the product summary on every product page:

// Add Embeddy widget after WooCommerce product summary
add_action( 'woocommerce_after_single_product_summary', 'embeddy_product_widget', 15 );
function embeddy_product_widget() {
  echo '<div class="embeddy-widget-wrapper" style="max-width:800px;margin:2rem auto;">
    <iframe
      src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
      width="100%"
      height="500"
      frameborder="0"
      style="border:none;border-radius:8px;"
      loading="lazy"
      title="Interactive Widget"
    ></iframe>
  </div>';
}

2. 2

   Save and verify

   Save the file and visit any product page on your store. The widget will appear below the product summary section.

Embedding on Product Pages

WooCommerce product pages are ideal for embedding interactive widgets. Common use cases:

• Size guides — interactive size calculators for clothing and footwear
• Product configurators — visual customization for engraving, colors, etc.
• Compatibility checkers — verify parts fit together before purchase
• Savings calculators — show ROI for high-value products

For all product pages, use Method 3 with WooCommerce action hooks. For specific products only, use Method 2 (shortcode) and paste the shortcode into the product's long description field.

Troubleshooting

Frequently Asked Questions