WooCommerce Integration: Complete Example

Embed the Wedding Band Builder on a WooCommerce (WordPress) product page using a shortcode and custom template.

Back to iframe Embedding guide

Option 1: Shortcode (Simplest)

Add this to your theme's functions.php:

// functions.php
function wbb_shortcode($atts) {
    $atts = shortcode_atts(array(
        'height' => '70vh',
        'src'    => 'https://your-cdn.com/wbb-viewer.html',
    ), $atts);

    ob_start();
    ?>
    <div class="wbb-wrapper">
        <iframe
            id="wbb-iframe"
            src="<?php echo esc_url($atts['src']); ?>"
            style="width: 100%; height: <?php echo esc_attr($atts['height']); ?>; border: none;"
            allow="camera; xr-spatial-tracking"
        ></iframe>

        <div class="wbb-price-bar" style="margin-top: 16px; font-size: 24px; font-weight: 600;">
            <span id="wbb-price">Loading...</span>
        </div>

        <button id="wbb-add-to-cart" class="button alt" style="margin-top: 12px; width: 100%;">
            Add to Cart
        </button>
    </div>

    <script>
        (function() {
            const iframe = document.getElementById('wbb-iframe');
            let reqId = 0;

            function query(method, args) {
                return new Promise(function(resolve) {
                    const id = 'req-' + (++reqId);
                    const handler = function(e) {
                        if (e.data && e.data.id === id) {
                            window.removeEventListener('message', handler);
                            resolve(e.data.result);
                        }
                    };
                    window.addEventListener('message', handler);
                    iframe.contentWindow.postMessage({ id: id, method: method, args: args || [] }, '*');
                });
            }

            // Update price display
            window.addEventListener('message', function(e) {
                if (e.data && e.data.event === 'price:updated' && e.data.data && e.data.data.pricing) {
                    document.getElementById('wbb-price').textContent =
                        '$' + e.data.data.pricing.totalUsd.toFixed(2);
                }
            });

            // Add to cart via WooCommerce AJAX
            document.getElementById('wbb-add-to-cart').addEventListener('click', async function() {
                const config = await query('exportConfig');
                const price = await query('getPrice');

                // Send to WooCommerce cart via AJAX
                const formData = new FormData();
                formData.append('action', 'wbb_add_to_cart');
                formData.append('nonce', wbb_vars.nonce);
                formData.append('config', JSON.stringify(config));
                formData.append('price', JSON.stringify(price));

                const response = await fetch(wbb_vars.ajax_url, {
                    method: 'POST',
                    body: formData,
                });
                const result = await response.json();

                if (result.success) {
                    // Redirect to cart or show confirmation
                    window.location.href = wbb_vars.cart_url;
                }
            });
        })();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wedding_band_builder', 'wbb_shortcode');

// Localize script variables
function wbb_enqueue_scripts() {
    wp_localize_script('jquery', 'wbb_vars', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wbb_nonce'),
        'cart_url' => wc_get_cart_url(),
    ));
}
add_action('wp_enqueue_scripts', 'wbb_enqueue_scripts');

Then use the shortcode on any page or product:

[wedding_band_builder height="70vh" src="https://your-cdn.com/wbb-viewer.html"]

Option 2: Custom Product Template

Create a WooCommerce product template for the configurator:

<?php
// woocommerce/single-product-wedding-band.php
get_header('shop'); ?>

<div class="wbb-product-page">
    <h1><?php the_title(); ?></h1>

    <iframe
        id="wbb-iframe"
        src="https://your-cdn.com/wbb-viewer.html"
        style="width: 100%; height: 70vh; border: none; border-radius: 12px;"
        allow="camera; xr-spatial-tracking"
    ></iframe>

    <div class="wbb-actions" style="margin-top: 24px; display: flex; align-items: center; gap: 16px;">
        <span id="wbb-price" style="font-size: 28px; font-weight: 600;">Loading...</span>

        <?php if ($product->is_in_stock()) : ?>
            <button id="wbb-add-to-cart" class="single_add_to_cart_button button alt">
                Add to Cart
            </button>
        <?php endif; ?>
    </div>
</div>

<script>
    // Same postMessage code as the shortcode example above
    window.addEventListener('message', function(e) {
        if (e.data && e.data.event === 'price:updated' && e.data.data && e.data.data.pricing) {
            document.getElementById('wbb-price').textContent =
                '$' + e.data.data.pricing.totalUsd.toFixed(2);
        }
    });
</script>

<?php get_footer('shop'); ?>

AJAX Handler for Add to Cart

// functions.php
add_action('wp_ajax_wbb_add_to_cart', 'wbb_handle_add_to_cart');
add_action('wp_ajax_nopriv_wbb_add_to_cart', 'wbb_handle_add_to_cart');

function wbb_handle_add_to_cart() {
    check_ajax_referer('wbb_nonce', 'nonce');

    $config = sanitize_text_field($_POST['config']);
    $product_id = intval($_POST['product_id'] ?? 0);

    // Add to cart with ring configuration as meta data
    $cart_item_data = array(
        'wbb_config' => $config,
    );

    $cart_item_key = WC()->cart->add_to_cart($product_id, 1, 0, array(), $cart_item_data);

    if ($cart_item_key) {
        wp_send_json_success(array('cart_item_key' => $cart_item_key));
    } else {
        wp_send_json_error(array('message' => 'Could not add to cart'));
    }
}