> ## Documentation Index
> Fetch the complete documentation index at: https://docs.selektable.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WooCommerce

> Integrate Selektable with your WooCommerce store

# 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.

## Option A: WordPress plugin (recommended)

The easiest way to integrate Selektable with WooCommerce is the official plugin.

### Installation

<Steps>
  <Step title="Download the plugin">
    In the Selektable dashboard, open your widget and click **Embed Instructions**. Select the **WooCommerce** tab and download the plugin zip file.
  </Step>

  <Step title="Upload to WordPress">
    In your WordPress admin, go to **Plugins → Add New → Upload Plugin**. Select the downloaded zip file and click **Install Now**.
  </Step>

  <Step title="Activate the plugin">
    After installation, click **Activate Plugin**.
  </Step>

  <Step title="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**.
  </Step>
</Steps>

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

<Note>
  Requires WordPress 6.9+ and WooCommerce 8.8.6+.
</Note>

## 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

```php theme={null}
// 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

```php theme={null}
// 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)

```html theme={null}
<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)

```javascript theme={null}
// 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