Ideal House
Skip to content

WooCommerce integration#

Add Room Visualizer buttons to WooCommerce product pages and keep the ideal.house product code synchronized with the selected variation SKU.

Verification status: Documentation and public WooCommerce behavior reviewed on September 7, 2026. This implementation has not been certified in a customer store. Classic templates, block themes, variation extensions, and quick-view plugins can render different DOM; test the exact stack on staging.

Before loading the SDK: Open Dashboard → Settings, add your storefront origin to Allowed Origins (CORS), and click Save. Include the published hostname and any preview or staging origins you use; separate multiple origins with commas. See configuration steps.

Scope and prerequisites#

This guide targets WooCommerce on WordPress. It uses a small site-specific plugin or child theme, the standard WordPress asset loader, and WooCommerce product hooks. It is not an installable ideal.house WordPress plugin.

Prepare administrator and file access, Shop ID, Publishable Key, and imported ideal.house records for each visualizable SKU. Give every simple product and every supported variation a non-empty, unique SKU in WooCommerce.

Minimal SDK markup#

This is the public SDK contract used by the integration:

html
<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

The generated container code must match the imported catalog sku. Do not put WooCommerce database IDs in data-product-code unless you deliberately used those IDs as catalog SKUs.

Load the SDK once#

Add this code to a child theme functions.php or a site-specific plugin. Replace the placeholders.

php
add_action('wp_enqueue_scripts', function () {
    if (!is_product() && !is_shop() && !is_product_category()) {
        return;
    }

    wp_enqueue_script(
        'idealhouse-room-visualizer',
        'https://sdk.ideal.house/sdk.js',
        array(),
        null,
        array('strategy' => 'async', 'in_footer' => true)
    );
});

add_filter('script_loader_tag', function ($tag, $handle) {
    if ($handle !== 'idealhouse-room-visualizer') return $tag;

    return str_replace(
        '<script ',
        '<script data-shop-id="<SHOP_ID>" data-publishable-key="<PUBLISHABLE_KEY>" ',
        $tag
    );
}, 10, 2);

If you support WooCommerce versions on WordPress before 6.3, pass true as the last enqueue argument and add async in the filter.

Render the product-page host#

The following hook places a host after the add-to-cart form. Simple products receive their SKU immediately. Variable products start empty; the browser adapter fills them when a complete variation is selected.

php
add_action('woocommerce_after_add_to_cart_form', function () {
    global $product;
    if (!$product instanceof WC_Product) return;

    $sku = $product->is_type('variable') ? '' : $product->get_sku();
    printf(
        '<div class="idealhouse-host" data-initial-sku="%1$s">%2$s</div>',
        esc_attr($sku),
        $sku ? '<div data-idealhouse-button-container data-product-code="' . esc_attr($sku) . '"></div>' : ''
    );
});

Confirm the hook exists in your product template. A theme that replaces the WooCommerce template or Product Collection block may require a block integration or another documented WooCommerce hook.

Synchronize a selected variation#

WooCommerce's bundled variation form triggers jQuery variation lifecycle events. Add a local file, for example assets/js/idealhouse-woocommerce.js, enqueue it with jquery and wc-add-to-cart-variation dependencies, and use:

js
(function ($) {
  function render(host, sku) {
    host.replaceChildren();
    const code = typeof sku === 'string' ? sku.trim() : '';
    if (!code) return;

    const container = document.createElement('div');
    container.dataset.idealhouseButtonContainer = '';
    container.dataset.productCode = code;
    host.append(container);
  }

  $('.variations_form').each(function () {
    const form = $(this);
    const host = this.closest('.product')?.querySelector('.idealhouse-host');
    if (!host) return;

    form.on('found_variation', function (_event, variation) {
      render(host, variation && variation.sku);
    });
    form.on('reset_data hide_variation', function () {
      render(host, '');
    });
  });

  document.querySelectorAll('.idealhouse-host[data-initial-sku]').forEach(function (host) {
    render(host, host.dataset.initialSku);
  });
})(jQuery);

This file is a customer-owned WooCommerce adapter. If a variation plugin replaces the standard form script, use that plugin's documented selection callback instead of assuming these events still fire. Do not update only the attribute of a container already processed by the SDK; replace it with a clean container.

Product grids, quick view, and AJAX navigation#

For catalog cards, use a product-loop hook such as woocommerce_after_shop_loop_item and render the simple product SKU. Variable products on a grid usually do not have a resolved variation; link to the product page or build an explicit variation picker adapter.

Quick-view plugins and WooCommerce Blocks can inject products after initial page load. Put the host in the template they render and run your render() bridge from that tool's documented completion callback. If there is no stable callback, a scoped MutationObserver may detect new .idealhouse-host nodes, but the customer owns its performance and lifecycle.

Catalog mapping and import#

Map WC_Product::get_sku() and each WC_Product_Variation::get_sku() to ideal.house sku. Parent and child products should not share a code if they represent different visual assets.

WooCommerce does not automatically push catalog changes to ideal.house. Use Product upload and its guides for import, job status, listing, updates, deletion, and retry handling. Any scheduled export or webhook bridge is customer implementation.

Verify before launch#

  1. Test one simple product, one variable product, one missing SKU, and one SKU absent from ideal.house.
  2. Confirm the SDK is requested once and its script tag retains both credential attributes.
  3. Select every variation and verify data-product-code equals the variation SKU.
  4. Reset the variation form; the old container should disappear.
  5. Test a product grid, quick view, AJAX filters, cart fragments, mobile sticky add-to-cart, and browser Back/Forward where applicable.
  6. Test while logged out, with consent controls and production caching enabled.
  7. Check that no Client Secret appears in HTML, JavaScript, logs, or source maps.

Remove the integration#

Remove the PHP hooks/filter and the local variation adapter enqueue. Delete hosts from overridden templates or blocks, clear WooCommerce transients and page/CDN caches, then confirm no SDK request or data-idealhouse-* element remains.

Official platform references#