WCMultiPro Documentation

The complete guide to installing, configuring, and using WCMultiPro — your React WC Multi-Store Manager.

💡

What is WCMultiPro?
WCMultiPro is a premium React dashboard that lets you manage unlimited WooCommerce stores from a single, beautiful interface. Powered by Supabase (a modern cloud database), it requires no PHP server, no MySQL — just copy and paste your API keys and you're ready!

🌐

Live Demo: https://wcmultipro.sonhar.cloud
Email: demo@demo.com | Password: 123456
Demo mode: AI Chat limited to 3 messages/session, destructive actions disabled.

Tech Stack

⚛️ React 18 — Latest version with concurrent features

📘 TypeScript — Full type safety across the codebase

🎨 Tailwind CSS — Utility-first styling with dark/light themes

🗄️ Supabase — Cloud database + auth (free tier available!)

⚡ Vite — Lightning-fast build tool

🧩 shadcn/ui — Beautiful accessible UI components

📊 Recharts — Professional charts and analytics

🔔 Sonner — Beautiful toast notifications

📋 Requirements

Requirement	Minimum	Notes
Node.js	18.0+	Download from nodejs.org
npm	9.0+	Comes with Node.js
Supabase Account	Free tier	No credit card required
WooCommerce Store	5.0+	REST API must be enabled
Hosting (optional)	Any static host	Firebase, Vercel, Netlify, etc.

🚀 Installation

Extract Files

Extract the downloaded .zip file to your desired location.

Install Dependencies

Open a terminal in the project folder and run:

npm install

Configure Environment

Rename the .env.example file to .env and insert your API Keys:

.env

VITE_SUPABASE_URL=https://YOUR-PROJECT-ID.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-public-key-here
VITE_DEMO_MODE=false

Start Development Server

npm run dev

Your app will be running at http://localhost:5173 🎉

✅

That's it! After setting up Supabase (next section), you can log in, connect your WooCommerce stores, and start managing everything from one dashboard.

🗄️ Supabase Setup

Supabase is a modern cloud database platform. Setup takes about 5 minutes — just copy and paste!

Step 1: Create a Supabase Project

Go to supabase.com and create a free account.

Click "New Project", choose a name and a strong database password.

Wait 1-2 minutes for the project to be provisioned.

Step 2: Get Your API Keys

In your Supabase project, go to Settings → API.

Copy the Project URL → paste into VITE_SUPABASE_URL

Copy the anon / public key → paste into VITE_SUPABASE_ANON_KEY

⚠️

Important: Use the anon/public key, NOT the service_role key. The service_role key bypasses security and should never be exposed in frontend code.

Step 3: Run the Database Schema

This is the most important step. The schema creates all tables, security policies, triggers, and functions.

In your Supabase dashboard, go to SQL Editor (left sidebar).

Open the file supabase/schema.sql from the package in any text editor.

Copy ALL the content and paste it into the Supabase SQL Editor.

Click "Run" (or press Ctrl+Enter). You should see "Success. No rows returned."

Do not ignore errors. If you see an error, check if the table already exists. Running the schema twice may cause "already exists" errors — those are safe to ignore. Any other error (e.g., syntax or permission) must be resolved before proceeding.

🔄

What does the schema create?

profiles — User profiles (auto-created on signup via trigger)
stores — Connected WooCommerce stores
products_cache — Synced products from WooCommerce
orders_cache — Synced orders from WooCommerce
customers_cache — Synced customers
categories_cache — Synced categories
notifications — In-app notifications
team_members — Team management
team_invitations — Team invitations
store_access — Per-store permissions
activity_log — Audit trail

👤

Users are created automatically!
The schema includes a trigger (on_auth_user_created) that automatically creates a profile entry whenever a new user signs up through Supabase Auth. You do not need to manually insert users into the profiles table — just use the Sign Up form or create users via the Supabase Authentication dashboard.

Step 4: Create Your First User

You have two options:

Option A: Sign up through the app

Simply go to your app's login page and click "Sign Up". The profile is created automatically.

Option B: Create via Supabase Dashboard

Go to Authentication → Users in Supabase.

Click "Add User" → "Create New User".

Enter email and password. Check "Auto Confirm User".

The trigger will automatically create the profile. The first user gets the admin role by default.

💸 Supabase Free Plan — More Than Enough!

🎉

The Supabase Free Plan is incredibly generous! It's more than enough for most WCMultiPro users:

Resource	Free Tier Limit	What This Means
Database Storage	500 MB	That's enough to store data from 50+ stores with thousands of products/orders each
Monthly Active Users	50,000	More than enough for any team size
File Storage	1 GB	For avatars, uploads, etc.
API Requests	Unlimited	No limits on reading/writing data
Real-time	Included	Live updates included at no cost
Auth	Included	Email/password + social login
Edge Functions	500K/month	Serverless functions if needed

📊

To put it in perspective: 500 MB of database storage is enough to store approximately 500,000+ orders or 1,000,000+ products in the cache. You'll likely never hit the limit unless you're managing hundreds of very large stores. And even then, upgrading to the Pro plan ($25/month) gives you 8 GB.

No credit card required to sign up. No hidden fees. No surprises.

⚙️ Configuration

Environment Variables

Variable	Required	Description
`VITE_SUPABASE_URL`	✅ Yes	Your Supabase project URL (e.g., https://xxxxx.supabase.co)
`VITE_SUPABASE_ANON_KEY`	✅ Yes	Your Supabase anon/public API key
`VITE_DEMO_MODE`	❌ No	Set to `true` for demo mode (disables destructive actions)

🛒 Connecting WooCommerce Stores

Step 1: Generate API Keys in WooCommerce

In your WordPress admin, go to WooCommerce → Settings → Advanced → REST API.

Click "Add Key".

Set:
• Description: WCMultiPro
• User: Select an admin user
• Permissions: Read/Write

Click "Generate API key" and copy both keys immediately (they won't be shown again).

Step 2: Add Store in WCMultiPro

In WCMultiPro, go to Dashboard → Stores → Add Store.

Fill in:
• Store Name: Any friendly name
• Store URL: Your store URL (e.g., https://mystore.com)
• Consumer Key: Paste from WooCommerce
• Consumer Secret: Paste from WooCommerce

Click "Connect Store". Data will start syncing automatically!

🔒

HTTPS Required: WooCommerce REST API requires HTTPS on your store. Make sure your store has a valid SSL certificate.

✨ Features

🏪 Multi-Store Management
Connect unlimited WooCommerce stores

📦 Product Management
View, edit, create, sync products with photos

🛒 Order Management
Track, update status, tracking codes, shipping labels, PDF/Excel export

👥 Customer Database
Unified customers from all stores + guest merging

📁 Category Management
Sync and manage categories bidirectionally

📊 Analytics Dashboard
Revenue charts, top products, order stats, PDF/CSV/Excel export

💰 Profit Dashboard
Standalone COGS tracking, profit charts, margin analysis, PDF export

🔄 Inventory Sync
Cross-store stock sync by SKU with auto-sync via webhooks

👨‍👩‍👧‍👦 Team Management
Invite members with Admin/Manager/Viewer roles

🔍 Global Search
Ctrl+K command palette — search orders, products, customers, tracking codes

🧮 Quick Calculator
Built-in calculator with keyboard support

🔔 Notifications
Real-time alerts for orders, stock, system events

🌙 Dark / Light Theme
Beautiful design in both modes

📱 Fully Responsive
Works perfectly on mobile, tablet, desktop

🏷️ Shipping Labels
Print professional shipping labels with items list

📤 Export CSV / Excel / PDF
Export orders, products, customers to CSV, Excel, and PDF

📊 Bulk Operations
Update multiple order statuses at once

🎯 Advanced Product Filters
Filter by stock status, product status, sale/regular price

✨ Store Selection Animation
Elegant transition effect when switching between stores

⚡ Code Splitting
React.lazy for fast page loads

📄 19+ Pages Included

Page	Description
Landing Page	Beautiful marketing page with pricing, features, green neon accent
Login Page	Authentication with email/password and demo mode
Setup Wizard	Guided first-time configuration
Dashboard	Overview with revenue charts, stats, recent orders, top products
Stores	Manage and connect WooCommerce stores
Store Detail	Individual store view with stats
Products	Product list with advanced filters (stock, status, sales), search, pagination
Product Detail	Full product view with images
Product Edit	Create/edit products with AI description generator
Orders (Table)	Order management with status, tracking, shipping labels, PDF/Excel export, clickable rows
Orders (Kanban)	Visual drag-and-drop order board with 4 columns
Customers	Customer list with merged guest data
Categories	Category management with sync
Analytics	Charts, PDF reports, CSV/Excel exports
Profit Dashboard	Standalone COGS tracking with profit charts, margin analysis, PDF export
Inventory Sync	Cross-store stock sync by SKU with auto-sync and conflict resolution
Settings	Profile, password, appearance, sender address
User Management	Team invitations and role management
Documentation	In-app documentation page

👥 User Roles & Permissions

Permission	Admin	Manager	Viewer
View Dashboard	✅	✅	✅
Manage Stores	✅	Assigned only	❌
Manage Products	✅	✅	View only
Manage Orders	✅	✅	View only
View Analytics	✅	✅	✅
Manage Team	✅	❌	❌
Change Settings	✅	❌	❌

🔍 Global Search (Ctrl+K)

Press Ctrl+K (or Cmd+K on Mac) anywhere in the app to open the command palette. You can search for:

Orders — by order number, customer name, or email
Products — by product name or SKU
Customers — by name or email
Pages — quickly navigate to any page

Clicking an order result will take you directly to that order's detail view.

🚀 Deployment

Build for Production

npm run build

This creates an optimized dist/ folder ready for deployment. The build uses code splitting — each page loads independently for fast performance.

Option 1: Firebase Hosting

# Install Firebase CLI
npm install -g firebase-tools

# Login
firebase login

# Deploy
npm run build
firebase deploy

Your app will be live at https://your-project.web.app

Option 2: Vercel / Netlify

Simply connect your Git repository and both platforms will auto-detect Vite and deploy.

💡

For any static hosting, make sure to configure SPA redirects — all routes should redirect to index.html since this is a Single Page Application.

🤖 WCMULTIAI — AI Assistant

WCMULTIAI is an AI-powered assistant built into WCMultiPro. It reads your real store data from Supabase and provides intelligent insights, reports, and analytics.

💡

What can WCMULTIAI do?

Analyze sales data by period (7 days, 30 days, 90 days, year)
Identify top-selling products and underperformers
Customer analysis with CLV (Customer Lifetime Value)
Inventory alerts and stock optimization
Generate markdown reports (copy, print, or save as PDF)
Revenue forecasting and trend analysis
Category performance breakdown

⚡ AI Providers

WCMULTIAI supports two AI providers — choose the one that fits your needs:

Feature	Groq (Recommended)	OpenAI
Speed	⚡ Ultra-fast (LPU inference)	🧠 Standard
Free Tier	✅ Yes — generous free tier	❌ Pay-per-use
Models	LLaMA 3.3 70B, LLaMA 3.1 8B, Mixtral 8x7B, Gemma 2	GPT-4o Mini, GPT-3.5, GPT-4o, GPT-4 Turbo
Best For	Fast answers, free usage, quick analytics	Complex analysis, advanced reasoning
API Key	console.groq.com	platform.openai.com

🆓

We recommend Groq! It offers a generous free tier with ultra-fast inference. Perfect for getting started without any cost. Get your free API key at console.groq.com.

🔧 AI Setup

Get an API Key

Open WCMULTIAI

Click the floating AI button (bottom-right corner of any dashboard page), then click the ⚙️ Settings icon in the chat header.

Configure Provider

Select your provider (Groq or OpenAI), paste your API key, choose a model, adjust temperature and max tokens, then click "Save Settings".

Start Chatting!

The AI has access to your real store data. Ask about products, sales, customers, or generate reports.

💰

API Cost Notice: WCMULTIAI calls external AI APIs. Groq offers a generous free plan. OpenAI charges per token. The API key is stored encrypted per user in Supabase — it is not shared with other users or stored in the browser.

✨ AI Features

📊 Sales by Period
7-day, 30-day, 90-day, yearly sales analysis with trends

📦 Product Intelligence
Top sellers, slow movers, pricing anomalies, stock alerts

👥 Customer Insights
VIP customers, CLV, purchase patterns, geographic data

📈 Revenue Analytics
Average order value, conversion metrics, growth trends

📄 Report Generation
Markdown reports ready to print as PDF (Ctrl+P)

🏷️ Category Analysis
Category performance, optimization recommendations

💬 Chat History
Conversations saved to Supabase — accessible from any device

⚡ Quick Prompts
6 pre-built prompts for common store analytics tasks

📄

About PDF Generation: WCMULTIAI generates beautifully formatted markdown reports. To save as PDF:

Ask the AI to generate a report
Copy the formatted response
Paste into any document editor, or press Ctrl+P → Save as PDF from the browser

🗄️ AI Database Tables

WCMULTIAI requires 4 additional database tables. Run the supabase/ai_chat_tables.sql file in your Supabase SQL Editor:

Table	Purpose
`ai_settings`	Per-user AI configuration (provider, API keys, model, temperature)
`ai_chat_sessions`	Chat session tracking (per user, timestamps)
`ai_chat_messages`	All chat messages with role, content, provider, model
`ai_usage_log`	Token usage tracking for cost monitoring

🔒

Row Level Security (RLS) is enabled on all AI tables. Each user can only see their own settings, sessions, and messages. API keys are never exposed to other users.

🔧 Troubleshooting

"Connection Error" when adding store

Verify the store URL is correct and includes https://
Ensure REST API is enabled in WooCommerce settings
Check Consumer Key and Secret are correct (they can't be retrieved again, generate new ones if unsure)
Verify HTTPS/SSL is working on your WooCommerce store

"Authentication Failed"

Double-check VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in your .env
Make sure you're using the anon key, not the service role key
Ensure your Supabase project is active (not paused)

"Products/Orders not syncing"

Check WooCommerce API permissions are set to Read/Write
Verify the store status is "active" in WCMultiPro
Check browser developer console (F12) for specific error messages

Build Errors

# Clear everything and reinstall
rm -rf node_modules
npm install

# Clear Vite cache
rm -rf node_modules/.vite
npm run dev

📝 Changelog

Version 1.0.0 Initial Release

🤖 WCMULTIAI — AI-powered store assistant with real data analysis
⚡ Groq + OpenAI dual provider support (free Groq tier available)
📊 Advanced Sales Analytics — sales by period (7D, 30D, 90D), trends, growth rates
💬 Chat History — conversations saved to Supabase, accessible from any device
⚙️ AI Settings — per-user provider, model, temperature, max tokens config
📄 Report Generation — markdown reports, inventory tables, customer summaries
🎨 8 Accent Colors — Neon Green (default), Blue, Violet, Pink, Orange, Red, Cyan, Amber
🔔 Sound Effects — audio feedback for clicks, notifications, success/error
📖 First-Visit Guides — interactive page guides for new users (10 pages)
🌗 Dark Theme Default — beautiful dark mode with accent color effects
🎯 Demo Mode — rate-limited AI (3 msgs), demo credentials, read-only restrictions
💎 Frosted Glass UI — glassmorphism Ctrl+K modal and AI chat panel
📌 Orders Kanban Board — drag-and-drop order workflow (Pending, Processing, Shipped, Completed)
🔄 Inventory Sync — cross-store stock synchronization by SKU
Multi-store management with unlimited stores
Full product management with image URL support, sync, and advanced filters (stock, status, sale)
Order management with status updates, tracking codes, shipping labels with items list, PDF/Excel/CSV export
Clickable order rows in list view for quick details
Global search (Ctrl+K) with tracking code search
Elegant store selection animation when switching stores
Customer database with guest order merging
Category management with bidirectional sync
Analytics dashboard with CSV/Excel/PDF export
Team management with role-based access
Global search command palette (Ctrl+K)
Built-in quick calculator
Notification system
Dark/Light theme
Fully responsive design
PWA support
Code splitting and performance optimization
Complete documentation

💬 Support

⚠️

Important Notice:
This documentation is for WCMultiPro sold exclusively on CodeCanyon by Envato.
For support or purchase, visit our official page at https://codecanyon.net/user/sonharcloud.

📧

Developer: Elias Alves — Sonhar Cloud
Response Time: Within 24-48 hours (business days)
Support Period: 6 months included with purchase

Need Support?

Please open a ticket via our CodeCanyon Support Tab or email us at support@sonhar.cloud with your Purchase Code. Support requests without a Purchase Code will be ignored.

Custom Implementations & Customizations

We offer custom development services including:

Custom integrations with third-party services
Tailored features for your specific business needs
White-label solutions
Priority support packages

When contacting support, please include:

Your purchase code from CodeCanyon
Browser and version
Steps to reproduce the issue
Screenshots or console errors if applicable

Thank you for purchasing WCMultiPro! 🎉

We hope you love it. If you do, please leave a ⭐⭐⭐⭐⭐ rating on CodeCanyon!