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

# WooCommerce

> Add AI shopping assistant to your WooCommerce store

## Overview

### About WooCommerce

**WooCommerce** powers over 28% of all online stores worldwide, making it the most popular e-commerce platform. As a WordPress plugin, WooCommerce gives you complete control and flexibility to build exactly the online store you envision - from selling physical products to digital downloads and subscriptions.

### Supercharge Your WooCommerce Store with AI

The **Lua Shopping Assistant** transforms your WooCommerce store from a passive catalog into an active sales assistant. Give every visitor their own AI-powered personal shopper that helps them find products, answers questions, and guides them to checkout.

**Why This Matters for Your Business:**

* 💰 **Increase Sales** - AI actively helps customers buy, not just browse
* 🎯 **Reduce Cart Abandonment** - AI assists through entire purchase journey
* ⏰ **24/7 Customer Service** - Answer product questions anytime, automatically
* 📈 **Higher Engagement** - Conversations keep customers on your site longer
* 🛒 **Smart Upselling** - AI recommends complementary products naturally
* 📱 **Mobile Optimized** - Perfect chat experience on any device
* 💬 **Reduce Support Tickets** - AI handles common questions instantly

<CardGroup cols={2}>
  <Card title="WordPress Plugin" icon="wordpress">
    Native WooCommerce integration
  </Card>

  <Card title="Zero Code" icon="wand-magic-sparkles">
    No developers needed
  </Card>

  <Card title="Full Customization" icon="palette">
    Match your brand perfectly
  </Card>

  <Card title="Product Catalog" icon="boxes-stacked">
    Instant access to all products
  </Card>
</CardGroup>

## Installation

<Steps>
  <Step title="Download Plugin">
    Download the latest WooCommerce plugin:

    <Card title="Download lua-shopping-assistant.zip" icon="download" href="https://drive.google.com/file/d/16JQu-MYA05eoTFqV2SPFLk4f9IE7-GC-/view?usp=sharing" horizontal>
      Latest version of the Lua Shopping Assistant plugin for WooCommerce
    </Card>

    <Note>
      Click the link to download from [Google Drive](https://drive.google.com/file/d/16JQu-MYA05eoTFqV2SPFLk4f9IE7-GC-/view?usp=sharing). Save the `lua-shopping-assistant.zip` file to your computer.
    </Note>
  </Step>

  <Step title="Access WordPress Admin">
    Log into your WordPress admin panel

    Navigate to: **Plugins** → **Add Plugin**

    <Frame>
      <img src="https://mintcdn.com/luaglobal/EARtt-L80n6UOMXQ/images/integrations/wordpress-plugins-menu.png?fit=max&auto=format&n=EARtt-L80n6UOMXQ&q=85&s=09c7ab8c62cc93f39c82522e84e8c05a" alt="WordPress Plugins menu" width="177" height="164" data-path="images/integrations/wordpress-plugins-menu.png" />
    </Frame>

    *Screenshot: WordPress sidebar showing Plugins menu option*
  </Step>

  <Step title="Upload Plugin">
    Click "Upload Plugin" button at the top

    <Frame>
      <img src="https://mintcdn.com/luaglobal/EARtt-L80n6UOMXQ/images/integrations/wordpress-upload-plugin.png?fit=max&auto=format&n=EARtt-L80n6UOMXQ&q=85&s=66afcd29dfc12fd959e6155c681b08ae" alt="Upload plugin" width="599" height="278" data-path="images/integrations/wordpress-upload-plugin.png" />
    </Frame>

    *Screenshot: "Upload Plugin" button and file chooser*
  </Step>

  <Step title="Choose File">
    Click "Choose File" and select `lua-shopping-assistant.zip`

    <Frame>
      <img src="https://mintcdn.com/luaglobal/EARtt-L80n6UOMXQ/images/integrations/woocommerce-choose-file.png?fit=max&auto=format&n=EARtt-L80n6UOMXQ&q=85&s=5bc199a440140c3af2775dd4735cd1d6" alt="Choose plugin file" width="1227" height="323" data-path="images/integrations/woocommerce-choose-file.png" />
    </Frame>

    *Screenshot: File chooser showing lua-shopping-assistant.zip selected*
  </Step>

  <Step title="Install Now">
    Click "Install Now" button

    <Frame>
      <img src="https://mintcdn.com/luaglobal/EARtt-L80n6UOMXQ/images/integrations/woocommerce-installing.png?fit=max&auto=format&n=EARtt-L80n6UOMXQ&q=85&s=1accc3e351a0dc3779c4fa86efac9a88" alt="Installing plugin" width="704" height="251" data-path="images/integrations/woocommerce-installing.png" />
    </Frame>

    *Screenshot: Installation progress showing:*

    * "Installing plugin from uploaded file: lua-shopping-assistant.zip"
    * "Unpacking the package..."
    * "Updating the plugin..."
    * "Removing the current plugin..."
  </Step>

  <Step title="Activation Success">
    Plugin installs successfully

    <Frame>
      <img src="https://mintcdn.com/luaglobal/EARtt-L80n6UOMXQ/images/integrations/woocommerce-plugin-updated.png?fit=max&auto=format&n=EARtt-L80n6UOMXQ&q=85&s=4a3fe951af8b8d03635c632a4e1b807c" alt="Plugin updated successfully" width="669" height="281" data-path="images/integrations/woocommerce-plugin-updated.png" />
    </Frame>

    *Screenshot: Success message showing:*

    * "Plugin updated successfully."
    * "Activate Plugin" button
    * "Go to Plugin Installer" link
  </Step>

  <Step title="Activate Plugin">
    Click "Activate Plugin" button

    Plugin is now active and ready to configure
  </Step>
</Steps>

## Configuration

<Steps>
  <Step title="Access WooCommerce Menu">
    After activation, find "Lua Shopping Assistant" in WooCommerce menu

    <Frame>
      <img src="https://mintcdn.com/luaglobal/EARtt-L80n6UOMXQ/images/integrations/woocommerce-menu-lua.png?fit=max&auto=format&n=EARtt-L80n6UOMXQ&q=85&s=dab976cf290122914f7347cc86f7df9c" alt="WooCommerce menu with Lua" width="331" height="291" data-path="images/integrations/woocommerce-menu-lua.png" />
    </Frame>

    *Screenshot: WooCommerce sidebar showing:*

    * Home
    * Orders
    * Customers
    * **Lua Shopping Assistant** ← New menu item
    * **Lua Widget Settings** ← Configuration page
    * Reports
    * Settings
  </Step>

  <Step title="Open Lua Widget Settings">
    Click "Lua Widget Settings"

    <Frame>
      <img src="https://mintcdn.com/luaglobal/EARtt-L80n6UOMXQ/images/integrations/lua-widget-settings-page.png?fit=max&auto=format&n=EARtt-L80n6UOMXQ&q=85&s=0c0c726a6c4658f3ac8aa5fe6f1a675a" alt="Lua Widget Settings" width="1103" height="1252" data-path="images/integrations/lua-widget-settings-page.png" />
    </Frame>

    *Screenshot: Lua Widget Settings page showing all configuration options*
  </Step>

  <Step title="Enable Widget">
    Check "Enable Lua Pop widget on storefront"

    <Frame>
      <img src="https://mintcdn.com/luaglobal/EARtt-L80n6UOMXQ/images/integrations/enable-widget-checkbox.png?fit=max&auto=format&n=EARtt-L80n6UOMXQ&q=85&s=b1a21598b302c65983702cfeeb7c5f1e" alt="Enable widget" width="577" height="129" data-path="images/integrations/enable-widget-checkbox.png" />
    </Frame>

    *Screenshot: Checkbox for enabling widget*
  </Step>

  <Step title="Configure Settings">
    The Lua Widget Settings page provides all configuration options:

    * Agent ID (auto-configured)
    * Position (Bottom Right, Bottom Left, etc.)
    * Theme (Light or Dark)
    * Button Text and Title
    * Custom styling options
  </Step>

  <Step title="Customize Appearance">
    For detailed styling and customization options, see our complete chat widget guide:

    <Card title="Chat Widget Styling Guide" icon="palette" href="/chat-widget/styling">
      Complete guide to colors, positioning, themes, and custom styles
    </Card>

    All LuaPop customization options work in the WooCommerce plugin!
  </Step>

  <Step title="Save Changes">
    Click "Save Changes" at the bottom of the page

    <Frame>
      <img src="https://mintcdn.com/luaglobal/EARtt-L80n6UOMXQ/images/integrations/save-settings-button.png?fit=max&auto=format&n=EARtt-L80n6UOMXQ&q=85&s=ef1de45cb3263dd9ae5910f66a023d64" alt="Save changes" width="657" height="310" data-path="images/integrations/save-settings-button.png" />
    </Frame>

    *Screenshot: "Save Changes" button*
  </Step>
</Steps>

## Widget Configuration

The WooCommerce plugin supports all LuaPop widget features:

<CardGroup cols={2}>
  <Card title="Basic Settings" icon="cog">
    * Position
    * Theme
    * Button text
    * Chat title
  </Card>

  <Card title="Advanced Styling" icon="palette">
    * Custom colors
    * Border styles
    * Shadows
    * Typography
  </Card>
</CardGroup>

<Card title="Complete Styling Guide" icon="book" href="/chat-widget/styling" horizontal>
  See the Chat Widget Styling documentation for all customization options →
</Card>

## Features

<CardGroup cols={2}>
  <Card title="Product Search" icon="magnifying-glass">
    Agent can search your WooCommerce catalog
  </Card>

  <Card title="Product Details" icon="info">
    Provide specs, pricing, availability
  </Card>

  <Card title="Cart Integration" icon="cart-shopping">
    Add products to cart
  </Card>

  <Card title="Order Status" icon="truck">
    Check order tracking
  </Card>
</CardGroup>

## What Your Agent Can Do

With WooCommerce integration, your agent can:

* 🔍 **Search Products** - Find items in your catalog
* 📦 **Product Details** - Provide specs, pricing, stock status
* 🛒 **Add to Cart** - Help customers add items to cart
* 💳 **Checkout Assistance** - Guide through checkout process
* 📍 **Order Tracking** - Check order status and shipping
* ❓ **Answer Questions** - Product info, shipping, returns
* 💡 **Recommendations** - Suggest relevant products

## Customization Examples

### Minimal Style

```
Position: Bottom Right
Theme: Light
Button Text: "💬 Chat"
Text Color: #000000
Background: #FFFFFF
Border Radius: 50% (circular button)
```

### Branded Style

```
Position: Bottom Right
Theme: Dark
Button Text: "Need Help?"
Text Color: #FFFFFF
Background: Your brand color
Border: 2px solid
Border Radius: 12px
Chat Header: Match brand colors
```

### Prominent Style

```
Position: Bottom Right
Theme: Light
Button Text: "🛍️ Shopping Assistant"
Background: Bright color
Border: None
Border Radius: 25px
Box Shadow: 0 4px 12px rgba(0,0,0,0.15)
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="Widget not appearing">
    **Check:**

    1. Plugin is activated
    2. "Enable Widget" is checked
    3. Agent ID is correct
    4. Save Changes clicked
    5. Clear browser cache
    6. Check browser console for errors
  </Accordion>

  <Accordion title="Widget shows but doesn't respond">
    **Check:**

    1. Agent ID is correct
    2. Agent is deployed (`lua production`)
    3. Skills are pushed (`lua push`)
    4. Internet connection working
    5. Check browser console for API errors
  </Accordion>

  <Accordion title="Styling not applying">
    **Try:**

    1. Save Changes after each modification
    2. Clear browser cache (Cmd+Shift+R / Ctrl+Shift+R)
    3. Check for CSS conflicts
    4. Use browser dev tools to inspect
  </Accordion>

  <Accordion title="Can't find settings page">
    **Location:**

    * WooCommerce → Lua Widget Settings

    **If missing:**

    * Verify plugin is activated
    * Check Plugins → Installed Plugins
    * Reactivate if needed
  </Accordion>
</AccordionGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="Position for Best Engagement">
    **Bottom Right** (recommended)

    * Standard placement
    * Familiar to users
    * Doesn't interfere with content

    **Bottom Left**

    * Alternative if right side is crowded
    * Good for RTL languages
  </Accordion>

  <Accordion title="Theme Selection">
    **Light Theme:**

    * Clean, professional
    * Good for bright store designs

    **Dark Theme:**

    * Modern, sleek
    * Good for dark mode stores
    * Less eye strain
  </Accordion>

  <Accordion title="Button Text">
    **Good examples:**

    * "Need Help?" - Friendly, inviting
    * "Shop Assistant" - Clear purpose
    * "💬 Chat with us" - Emoji adds personality

    **Avoid:**

    * Generic "Chat" - Too vague
    * Too long text - Keep it short
  </Accordion>

  <Accordion title="Match Your Brand">
    Use your brand colors:

    * Background: Your primary color
    * Text: Contrasting color
    * Border: Accent color
    * Ensure good contrast for readability
  </Accordion>
</AccordionGroup>

## Plugin Updates

### Updating to New Version

<Steps>
  <Step title="Download New Version">
    Get updated `lua-shopping-assistant.zip`
  </Step>

  <Step title="Upload Again">
    Plugins → Add New → Upload Plugin

    Select new zip file
  </Step>

  <Step title="Install Now">
    WordPress will update the existing plugin

    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/luaglobal/images/integrations/plugin-updating.png" alt="Plugin updating" />
    </Frame>

    *Screenshot: Update process screen*
  </Step>

  <Step title="Settings Preserved">
    Your configuration is automatically preserved

    No need to reconfigure!
  </Step>
</Steps>

## Features Coming Soon

<Note>
  **🚀 Upcoming WooCommerce Features:**

  * Direct "Add to Cart" from chat
  * Order status checking
  * Product recommendations
  * Abandoned cart recovery
  * Inventory notifications
  * Custom product filters
  * Multi-language support
</Note>

## Support

Need help with WooCommerce integration?

* **Documentation**: This page
* **Email**: [support@heylua.ai](mailto:support@heylua.ai)
* **Admin Dashboard**: `lua admin` for agent management
* **Test Chat**: `lua chat` to test agent behavior

## Next Steps

<CardGroup cols={2}>
  <Card title="Configure Your Agent" icon="robot" href="/cli/persona-command">
    Set up agent personality for shopping
  </Card>

  <Card title="Add Product Skills" icon="wrench" href="/getting-started/first-skill">
    Build custom shopping tools
  </Card>

  <Card title="Test Your Agent" icon="comments" href="/cli/chat-command">
    Test shopping conversations
  </Card>

  <Card title="E-commerce Demo" icon="cart-shopping" href="/demos/ecommerce-assistant">
    See complete shopping assistant
  </Card>
</CardGroup>