Skip to main content

​
WooCommerce integration

Selektable provides an official WordPress plugin for WooCommerce that handles embed script injection, product detection, variant image updates, and cart integration out of the box. The easiest way to integrate Selektable with WooCommerce is the official plugin.

​
Installation

1

Download the plugin

In the Selektable dashboard, open your widget and click Embed Instructions. Select the WooCommerce tab and download the plugin zip file.
2

Upload to WordPress

In your WordPress admin, go to Plugins → Add New → Upload Plugin. Select the downloaded zip file and click Install Now.
3

Activate the plugin

After installation, click Activate Plugin.
4

Configure

Go to Settings → Selektable, enter your Store ID from the dashboard under General Settings, then click Add New to add an integration with your Widget ID.
The plugin automatically:
  • Adds the embed script to your site’s footer
  • Injects a widget button after the “Add to Cart” button on product pages
  • Detects the current product and its images
  • Updates the product image when a customer selects a different variation
  • Handles cart integration via the WooCommerce Cart API
Requires WordPress 6.9+ and WooCommerce 8.8.6+.

​
Option B: manual integration

If you prefer not to use the plugin, you can add the integration manually via your theme’s functions.php.

​
1. Add the embed script

// Set your store ID, widget ID and app URL
define('SELEKTABLE_STORE_ID', 'store_xxx');
define('SELEKTABLE_WIDGET_ID', 'widget_abc123');
define('SELEKTABLE_APP_URL', 'https://app.selektable.com');

// Add embed script to footer
add_action('wp_footer', function() {
    printf(
        '<script src="%s/widgets/embed.js" data-store-id="%s" async></script>',
        esc_url(SELEKTABLE_APP_URL),
        esc_attr(SELEKTABLE_STORE_ID)
    );
});

​
2. Add the widget button

// Add button after Add to Cart
add_action('woocommerce_after_add_to_cart_button', function() {
    global $product;
    if (!$product) return;

    $image_id = $product->get_image_id();
    $selected_image = $image_id ? wp_get_attachment_url($image_id) : '';

    $product_data = [
        'productId' => $product->get_id(),
        'productTitle' => $product->get_name(),
        'productImage' => $selected_image,
        'productUrl' => get_permalink($product->get_id()),
        'productImages' => []
    ];

    // Add product images
    if ($image_id) {
        $product_data['productImages'][] = [
            'id' => (int) $image_id,
            'src' => $selected_image,
            'alt' => get_post_meta($image_id, '_wp_attachment_image_alt', true) ?: '',
            'name' => get_the_title($image_id)
        ];
    }

    printf(
        '<button type="button" class="button selektable-try-on" onclick="Selektable.open(\'%s\', %s)">View in your room</button>',
        esc_attr(SELEKTABLE_WIDGET_ID),
        wp_json_encode($product_data)
    );
});

​
3. Handle variation changes (optional)

<script>
jQuery(function($) {
    $('form.variations_form').on('found_variation', function(e, variation) {
        // Update the product image when the customer selects a variation
        window.selektableProductImage = variation.image?.src || '';
    });
});
</script>

​
4. Cart integration (optional)

// Example custom add-to-cart handler for WooCommerce
Selektable.open('widget_abc123', {
    productId: 123,
    productImage: window.selektableProductImage,
    onAddToCart: async function(product, qty, variation) {
        const formData = new FormData();
        formData.append('product_id', product.id);
        formData.append('quantity', qty);

        if (variation) {
            variation.forEach(function(v) {
                formData.append('attribute_' + v.attribute, v.value);
            });
        }

        const response = await fetch('/?wc-ajax=add_to_cart', {
            method: 'POST',
            body: formData
        });
        return { success: response.ok };
    }
});

​
Auto-Detection

The SDK automatically detects WooCommerce product data from the page DOM, including:
  • Product ID from postid-* body class
  • Product ID from form.variations_form[data-product_id]
  • Product ID from button[name="add-to-cart"] value
  • Product ID from input[name="product_id"] value
This means even without explicit productId in the open() call, the widget can often find the right product on WooCommerce pages.

​
Order webhooks

To enable conversion tracking, configure a webhook in WooCommerce:
  1. Go to WooCommerce → Settings → Advanced → Webhooks
  2. Add a new webhook:
    • Topic: Order created
    • Delivery URL: https://app.selektable.com/api/webhooks/woocommerce/orders
    • Status: Active