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

# WooCommerce

> Add Wearo virtual try-on to your WooCommerce store.

# Install on WooCommerce

## Prerequisites

* A Wearo account ([sign up](https://wearo.io/signup))
* Your Wearo API key ([get yours](/getting-started/api-key))
* Admin access to your WordPress installation

<Steps>
  <Step title="Choose your insertion method">
    Pick one of these two options:

    **Option A — Plugin (recommended, no code):**
    Install a free plugin like [Insert Headers and Footers](https://wordpress.org/plugins/insert-headers-and-footers/).
    Go to **Settings → Insert Headers and Footers** and paste the snippet in the **Footer** section.

    **Option B — Edit functions.php:**
    In your theme's `functions.php`, add:

    ```php theme={"dark"}
    function wearo_widget_script() {
        if ( is_product() ) {
            echo '<script src="https://wearo.io/widget/tryon-widget.js"></script>';
            echo '<script>TryOnWidget.init({ apiKey: "wearo_xxx", productSelector: ".woocommerce-product-gallery__image img" });</script>';
        }
    }
    add_action( 'wp_footer', 'wearo_widget_script' );
    ```
  </Step>

  <Step title="Add the snippet">
    ```html theme={"dark"}
    <script src="https://wearo.io/widget/tryon-widget.js"></script>
    <script>
      TryOnWidget.init({
        apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
        productSelector: '.woocommerce-product-gallery__image img',
        brandColor: '#000000'
      });
    </script>
    ```

    Replace `wearo_xxx...` with your API key.
  </Step>

  <Step title="Verify it works">
    Visit a product page. You should see the "Try it on" button on your
    main product gallery image.
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="The button doesn't appear">
    WooCommerce gallery plugins (like WooGallery or Variation Swatches) sometimes
    replace the default selector. Try:

    ```js theme={"dark"}
    productSelector: '.woocommerce-product-gallery__wrapper img:first-child'
    ```
  </Accordion>
</AccordionGroup>

## Need help?

<Card title="Book a 30-min integration call" icon="calendar" href="https://calendly.com/wearo/integration">
  We'll review your store and set up Wearo live with you.
</Card>