dwindown/woonoow-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Migrate documentation content, rebuild UI components, and update core architecture.

Browse Source
This commit is contained in:
gitfromwildan
2026-03-10 01:38:58 +07:00
parent aac81dff8a
commit ab755844a3
132 changed files with 3947 additions and 12862 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
docs/builder/header-footer.mdx Normal file
View File

@@ -0,0 +1,45 @@
---
title: Header & Footer
description: Customize your store's global navigation and footer area.
---
Your store's header and footer are crucial for navigation and branding. Use the built-in settings## Footer
Configure your footer layout and copyright text.
![Footer Preview](/images/docs/builder/footer-preview.png)
## Header Settings
Go to **Appearance > Header** to control the top of your site.
![Header Settings](/images/docs/builder/header-settings.png)
### Layout & Style
* **Style**: Choose between `Classic` (Logo left, nav right) or `Centered` layouts.
* **Sticky Header**: Toggle this to keep the header visible as users scroll down the page.
* **Logo Sizing**: Adjust the width and height of your logo to fit perfectly.
### Elements
Enable or disable specific icons:
* **Search**: Allow customers to search your catalog.
* **Account**: Link to the user profile/login page.
* **Cart**: Show the shopping bag icon.
## Footer Settings
Go to **Appearance > Footer** to manage the bottom of your site.
![Footer Settings](/images/docs/builder/footer-settings.png)
### Layout
* **Columns**: Choose a 3 or 4-column layout to organize your links.
* **Style**: Select `Simple` or `Detailed`.
### Newsletter Integration
You can easily collect emails directly from your footer.
1. Scroll down to the **Newsletter** section (or "Content & Contact").
2. Enable **Show in footer**.
3. This automatically adds a subscription input field to your footer, which connects directly to the [Newsletter Marketing](/docs/marketing/newsletter) system.
### Contact Info
Add your store address, email, and social media links. These helps build trust with your customers.

14
docs/builder/index.mdx Normal file
View File

@@ -0,0 +1,14 @@
---
title: Page Builder
description: Design your store visually.
---
The WooNooW Page Builder allows you to create stunning, responsive pages without writing code.
## Key Concepts
* **[Visual Editor](/docs/builder/visual-editor)**: Drag-and-drop interface explanation.
* **[Sections](/docs/builder/sections)**: Guide to all available blocks (Hero, Features, Content).
* **[Special Pages](/docs/builder/special-pages)**: How to customize the Shop, Cart, and Checkout pages.

28
docs/builder/sections.mdx Normal file
View File

@@ -0,0 +1,28 @@
---
title: Section Components
description: Building blocks of your pages.
---
WooNooW includes a library of pre-designed sections.
## Available Sections
### Hero Section
The impact statement of your page. Includes a large headline, subheadline, call-to-action buttons, and a background image or color.
### Feature Grid
Showcase your services or product highlights in a clean grid layout. Supports 2, 3, or 4 columns.
### Content Block
A versatile text block with optional image. Great for "About Us" sections or storytelling. You can position the image on the left or right.
### Image Text Section
A modern alternating layout combining media (images or video) on one side and structured content (headings, text, buttons) on the other. You can choose whether the image appears on the left or the right. These elements have independent styling options allowing for maximum layout creativity.
### Contact Form Section
A fully functional form allowing visitors to get in touch. Includes configurable fields for Name, Email, Subject, and Message, and automatically connects to your site's contact email setting.
### Call to Action (CTA) Banner
A high-converting strip designed to get clicks. Perfect for newsletter signups or limited-time offers.

17
docs/builder/special-pages.mdx Normal file
View File

@@ -0,0 +1,17 @@
---
title: Special Pages
description: Customizing Shop and Checkout pages.
---
Unlike standard pages, "Special Pages" like the Shop, Cart, and Checkout are dynamically generated by WooCommerce. WooNooW gives you control over their wrapper and styling.
## The Shop Page
You can set a specific page to be your "Shop" page in **WooCommerce > Settings > Products**.
Once set, WooNooW wraps this product grid in your global theme settings (Header, Footer, Container Width).
## Cart & Checkout
By enabling **SPA Mode** (Full or Checkout Only), WooNooW replaces the standard slow page loads with an instant, app-like transition.
* **Checkout Only Mode**: Users browse your normal site, but when they hit "Checkout", they enter the fast SPA data tunnel.
* **Full SPA Mode**: The entire shopping experience is instant.

26
docs/builder/visual-editor.mdx Normal file
View File

@@ -0,0 +1,26 @@
---
title: Visual Editor
description: Drag-and-drop your store into existence.
---
The Visual Editor is the heart of the WooNooW Page Builder. It looks exactly like your front-end store, but allows you to edit content in real-time.
## The Interface
### 1. The Canvas
The central area is your webpage. You can click on any element (Text, Image, Button) to edit it directly.
### 2. The Inspector Panel (Left Sidebar)
When you select a section or element, this panel shows all customizable options:
* **Content Tab**: Change text, links, and images.
* **Design Tab**: Adjust colors, padding, and alignment.
### 3. The Top Bar
* **Device Toggle**: Switch between Desktop and Mobile view to ensure your site looks great everywhere.
* **Save Button**: Publish your changes instantly.
## Adding Content
To add a new section, hover over the canvas and click the **(+) Add Section** button that appears between existing blocks.

36
docs/configuration/appearance.mdx Normal file
View File

@@ -0,0 +1,36 @@
---
title: Appearance Settings
description: Colors and Typography.
---
Customize your brand without coding.
## Colors
We use a smart palette system.
* **Primary**: Headlines and main buttons.
* **Secondary**: Subheadings and UI elements.
* **Accent**: Highlights and links.
## Typography
Choose from GDPR-compliant, locally hosted font pairings like:
* **Modern**: Inter
* **Editorial**: Playfair Display
## Advanced Appearance Settings
You can fine tune how WooNooW interacts with your standard WordPress site from the **General** settings panel.
### SPA Mode
The **Single Page Application Mode** ensures that customers stay inside the fast, React-based WooNooW app during their entire shopping journey.
* **Enabled (Default):** All WooNooW page links (like shop, cart, account) will intercept standard WordPress navigation and load instantly without page refreshes.
* **Disabled:** The store will behave like a traditional WordPress site, reloading the browser on every page change.
### WordPress Admin Bar Visibility
For a cleaner frontend experience, you can hide the default black WordPress Admin Bar that normally appears at the top of the screen for logged-in administrators and staff.
* Toggle **Hide Admin Bar on Frontend** to remove it from the Customer SPA. This ensures your sticky headers and floating elements display exactly as customers will see them.
### Layout Styles
Choose how your container behaves on larger desktop monitors:
* **Full Width:** Expands your headers, footers, and page sections to cover the entire width of the browser.
* **Boxed:** Constrains the main content area to a maximum width (typically 1200px) and centers it on the screen.

261
docs/configuration/email.mdx Normal file
View File

@@ -0,0 +1,261 @@
---
title: Email Notifications
description: Configure transactional emails and notification templates
---
WooNooW includes a modern notification system that replaces WooCommerce's default emails with beautiful, customizable templates.
Navigate to **Settings > Notifications** to manage all settings.
---
## Email System Mode
WooNooW can use its own email templates or fall back to WooCommerce defaults.
| Mode | Description |
|------|-------------|
| **WooNooW** (default) | Uses WooNooW's responsive templates with rich customization |
| **WooCommerce** | Disables WooNooW emails and uses native WC templates |
To change modes, go to **Settings > Notifications > Channels** and toggle the Email System setting.
> [!TIP]
> Use WooCommerce mode if you have heavily customized WC email templates or use a third-party email customization plugin.
---
## Notification Dashboard
The main Notifications page shows a card-based overview:
### Recipients
| Card | Description | Path |
|------|-------------|------|
| **Staff** | Notifications for admins (orders, low stock, new customers) | `/settings/notifications/staff` |
| **Customer** | Transactional emails (order updates, account, shipping) | `/settings/notifications/customer` |
### Channels
| Card | Description | Path |
|------|-------------|------|
| **Channel Configuration** | Email, Push, WhatsApp, Telegram settings | `/settings/notifications/channels` |
| **Activity Log** | View sent/failed/pending notification history | `/settings/notifications/activity-log` |
---
## Email Events
WooNooW sends notifications for the following events. Each event can have separate templates for **Staff** and **Customer**.
### Order Events
| Event | Trigger | Staff | Customer |
|-------|---------|:-----:|:--------:|
| New Order | Order placed | ✅ | ✅ |
| Order Processing | Payment received | ❌ | ✅ |
| Order Completed | Order marked complete | ❌ | ✅ |
| Order On-Hold | Order put on hold | ❌ | ✅ |
| Order Cancelled | Order cancelled | ✅ | ✅ |
| Order Refunded | Full/partial refund issued | ✅ | ✅ |
| Order Failed | Payment failed | ✅ | ❌ |
| Customer Note | Note added to order | ❌ | ✅ |
### Customer Events
| Event | Trigger | Staff | Customer |
|-------|---------|:-----:|:--------:|
| New Account | Customer registers | ✅ | ✅ |
| Password Reset | Reset link requested | ❌ | ✅ |
### Inventory Events
| Event | Trigger | Staff | Customer |
|-------|---------|:-----:|:--------:|
| Low Stock | Product reaches low stock threshold | ✅ | ❌ |
| Out of Stock | Product stock reaches 0 | ✅ | ❌ |
### Subscription Events
> [!NOTE]
> Subscription events only appear when the **Subscriptions** module is enabled.
| Event | Trigger | Staff | Customer |
|-------|---------|:-----:|:--------:|
| Subscription Created | New subscription starts | ✅ | ✅ |
| Subscription Renewed | Successful renewal payment | ❌ | ✅ |
| Subscription Pending Cancel | Customer requests cancellation | ✅ | ✅ |
| Subscription Cancelled | Subscription ended | ✅ | ✅ |
| Subscription Expired | Subscription reached end date | ❌ | ✅ |
| Subscription Paused | Customer paused subscription | ❌ | ✅ |
| Subscription Resumed | Customer resumed subscription | ❌ | ✅ |
| Renewal Failed | Payment failed | ✅ | ✅ |
| Payment Reminder | Upcoming renewal notice | ❌ | ✅ |
---
## Template Editor
Click any event to open the template editor. You can customize:
- **Enable/Disable** - Toggle the notification on or off
- **Subject Line** - Use variables like `{{order_number}}`
- **Email Body** - Rich text editor with formatting
### Staff vs Customer Templates
Each event has two template tabs:
- **Staff Template** - Sent to admin email, includes administrative details
- **Customer Template** - Sent to customer, friendly and informative
---
## Available Variables
Use these placeholders in your templates. They are replaced with actual values when the email is sent.
### Order Variables
| Variable | Description |
|----------|-------------|
| `{{order_number}}` | Order ID |
| `{{order_date}}` | Date order was placed |
| `{{order_total}}` | Total amount |
| `{{order_status}}` | Current status |
| `{{order_items}}` | List of ordered products |
| `{{shipping_method}}` | Selected shipping |
| `{{payment_method}}` | Payment method used |
### Customer Variables
| Variable | Description |
|----------|-------------|
| `{{customer_name}}` | First + last name |
| `{{customer_first_name}}` | First name only |
| `{{customer_email}}` | Email address |
| `{{billing_address}}` | Full billing address |
| `{{shipping_address}}` | Full shipping address |
### Site Variables
| Variable | Description |
|----------|-------------|
| `{{site_name}}` | Your site title |
| `{{site_url}}` | Your site URL |
| `{{admin_email}}` | Admin email address |
### Subscription Variables
| Variable | Description |
|----------|-------------|
| `{{subscription_id}}` | Subscription ID |
| `{{next_payment_date}}` | Next billing date |
| `{{subscription_total}}` | Recurring amount |
### Account Variables
| Variable | Description |
|----------|-------------|
| `{{reset_link}}` | Password reset URL |
| `{{user_login}}` | Username |
---
## Template Syntax
Email templates support **card blocks** for structured layouts and **buttons** for calls-to-action.
### Card Blocks
Wrap content in cards to create visual sections:
```
[card:type]
Your content here...
[/card]
```
#### Available Card Types
| Type | Use For | Styling |
|------|---------|---------|
| `default` | Standard content | White background |
| `hero` | Header/intro | Gradient background (uses your Appearance colors) |
| `success` | Confirmations | Light green background |
| `info` | Information | Light blue background |
| `warning` | Alerts | Light yellow background |
| `basic` | Footer/muted text | No background, no padding |
### Button Syntax
Add clickable buttons inside cards:
```
[button:solid]({{order_url}})View Your Order[/button]
[button:outline]({{shop_url}})Continue Shopping[/button]
```
| Style | Description |
|-------|-------------|
| `solid` | Filled button with primary color |
| `outline` | Border-only button |
| `link` | Plain text link |
### Example Template
```
[card:hero]
# Order Confirmed! 🎉
Thank you for your order, {{customer_first_name}}!
[/card]
[card]
## Order Details
**Order:** #{{order_number}}
**Date:** {{order_date}}
**Total:** {{order_total}}
{{order_items}}
[button:solid]({{order_url}})View Your Order[/button]
[/card]
[card:basic]
Questions? Contact us at {{support_email}}
[/card]
```
> [!TIP]
> Use Markdown formatting inside cards: `# Heading`, `**bold**`, `- lists`, etc.
---
## Email Delivery
WooNooW uses WordPress's built-in mail function (`wp_mail`).
> [!TIP]
> For reliable delivery, install **WP Mail SMTP** and connect to a transactional email service (SendGrid, Postmark, Mailgun).
---
## Troubleshooting
### Emails Not Sending
1. Check if the event is **enabled** in Settings > Notifications
2. Verify the email system mode is set to **WooNooW**
3. Check if WordPress can send emails (test with a contact form plugin)
4. Review the **Activity Log** for failed deliveries
### Emails Going to Spam
1. Use a dedicated SMTP service via WP Mail SMTP
2. Verify your domain (SPF, DKIM, DMARC records)
3. Avoid spam trigger words in subject lines
### Test Emails
Use the **Send Test** button in the template editor to preview how emails appear in customer inboxes.

18
docs/configuration/general.mdx Normal file
View File

@@ -0,0 +1,18 @@
---
title: General Settings
description: Core store settings.
---
Located in **Appearance > General**.
## SPA Mode
Decide how much of your site uses our ultra-fast Single Page Application technology.
* **Disabled**: Use standard WordPress templates.
* **Checkout Only**: Normal browsing, fast checkout.
* **Full SPA**: The entire site is an app.
## Container Width
* **Boxed (Recommended)**: Limits content width (max 1152px) for better readability.
* **Full Width**: Content stretches to the screen edges.

16
docs/configuration/index.mdx Normal file
View File

@@ -0,0 +1,16 @@
---
title: Configuration
description: Configure every aspect of your store.
---
Fine-tune your store's behavior and appearance.
## Settings Areas
* **[General](/docs/configuration/general)**: SPA Mode, Container Width, Typography.
* **[Appearance](/docs/configuration/appearance)**: Theme colors and branding.
* **[Modules](/docs/configuration/modules)**: Enable or disable specific features to keep your store lightweight.
* **[Email](/docs/configuration/email)**: Customize transactional emails and set up SMTP.
* **[Security](/docs/configuration/security)**: Protect your store with built-in security features.

18
docs/configuration/licensing.mdx Normal file
View File

@@ -0,0 +1,18 @@
---
title: Licensing
description: Activate your store.
---
To receive updates and support, you must activate your license key.
## Activation
1. Go to **Settings > License**.
2. Enter your key.
3. Click "Activate".
## OAuth Connection
Some features require connecting your store to our cloud. Click "Connect with WooNooW" to authorize the connection securely.
![License Connection](/images/docs/configuration/license-connect.png)

42
docs/configuration/modules.mdx Normal file
View File

@@ -0,0 +1,42 @@
---
title: Modules
description: Enable or disable specific WooNooW features to optimize performance.
---
WooNooW is built with a modular architecture. You can enable or disable specific features based on your needs to keep your admin interface clean and your site performant.
Navigate to **Settings > Modules** to manage these components.
![Modules List](/images/docs/configuration/modules-list.png)
## Available Modules
### Marketing
- **Newsletter**: Built-in email marketing suite. Manage subscribers and send campaigns.
- **Wishlist**: Allow customers to save products for later. Adds wishlist icons to product grids.
- **Social Proof**: (Coming Soon) Show recent sales notifications.
### Store Management
- **Subscriptions**: Enable recurring payments and subscription products.
- **Pre-Orders**: Allow customers to order products before they are available.
### Sales
- **Licensing**: Sell software licenses with activation limits, expiration dates, and domain validation. Required for Software Distribution.
- **Software Distribution**: Distribute software updates with version tracking, changelogs, and automatic update checking. Works with WordPress plugins/themes or any software type. *Requires Licensing module.*
## Module Dependencies
Some modules depend on others:
| Module | Requires |
|--------|----------|
| Software Distribution | Licensing |
If you try to enable a module without its dependencies, you'll be prompted to enable the required modules first.
## How to Enable/Disable
1. Find the module card in the list.
2. Toggle the switch to **On** or **Off**.
3. Changes usually take effect immediately, but some modules may require a page refresh or menu rebuild.

42
docs/configuration/payment-shipping.mdx Normal file
View File

@@ -0,0 +1,42 @@
---
title: Payment & Shipping
description: Configure payment gateways and shipping options for your store.
---
WooNooW integrates seamlessly with WooCommerce's native payment and shipping settings while providing a modern interface for managing them.
## Payment Gateways
Navigate to **Settings > Payments** to manage your payment methods.
### Supported Gateways
WooNooW supports all standard WooCommerce payment gateways, including:
- **Direct Bank Transfer** (BACS)
- **Check Payments**
- **Cash on Delivery**
- **Stripe** (via official plugin)
- **PayPal** (via official plugin)
### Configuration
1. Toggle the **Enabled** switch to activate a gateway.
2. Click **Manage** (or the gear icon) to configure specific settings like API keys, titles, and descriptions.
3. Drag and drop gateways to reorder how they appear at checkout.
## Shipping
Navigate to **Settings > Shipping** to configure shipping zones and methods.
### Shipping Zones
Shipping zones are geographic regions where a certain set of shipping methods and rates apply.
1. **Add Zone**: Click "Add shipping zone" to create a new region (e.g., "North America", "Europe").
2. **Region**: Select specific countries or states.
3. **Methods**: Add methods like "Flat Rate", "Free Shipping", or "Local Pickup".
### Shipping Options
- **Calculations**: Enable/disable shipping calculator on the cart page.
- **Destination**: Default to customer billing address or shipping address.
### Shipping Classes
Use shipping classes to group products of similar type (e.g., "Bulky", "Fragile") to provide different rates.

33
docs/configuration/security.mdx Normal file
View File

@@ -0,0 +1,33 @@
---
title: Security Settings
description: Protect your store with WooNooW security features.
---
Navigate to **Settings > Security** to configure access controls and protection features for your store.
## Access Control
### Limit Login Attempts
Protect your admin area and customer accounts from brute-force attacks.
- **Max Retries**: Set the maximum number of failed login attempts allowed.
- **Lockout Time**: Duration to lock out an IP address after exceeding retries.
### Password Strength
Enforce strong passwords for new customer accounts.
- **Minimum Strength**: Choose between Weak, Medium, or Strong requirements (based on zxcvbn strength estimation).
## Checkout Security
### Captcha Protection
Enable ReCaptcha or Cloudflare Turnstile on checkout and registration forms to prevent bot spam.
- **Provider**: Select your captcha provider using the dropdown.
- **Site Key & Secret Key**: Enter your API credentials.
## API Security
### REST API
WooNooW relies on the WordPress REST API.
- **Require SSL**: Force HTTPS for all API requests (Recommended).
- **CORS Settings**: Configure Cross-Origin Resource Sharing if you are hosting the frontend on a different domain.

141
docs/configuration/spa-mode.mdx Normal file
View File

@@ -0,0 +1,141 @@
---
title: SPA Mode
description: Understanding and configuring WooNooW's SPA mode
date: 2024-01-31
---
## What is SPA Mode?
SPA Mode controls how WooNooW handles your WooCommerce pages. It determines whether visitors experience the modern SPA interface or traditional WooCommerce templates.
---
## Available Modes
### Full Mode (Recommended)
**All WooCommerce pages redirect to the SPA.**
When a visitor navigates to:
- `/shop` → Redirects to `/store/shop`
- `/product/example` → Redirects to `/store/product/example`
- `/cart` → Redirects to `/store/cart`
- `/checkout` → Redirects to `/store/checkout`
- `/my-account` → Redirects to `/store/my-account`
**Benefits**:
- Instant page transitions
- Modern, consistent UI
- Better mobile experience
- Smooth animations
**Best for**:
- New stores
- Stores wanting a modern look
- Mobile-focused businesses
### Disabled Mode
**WooCommerce uses its native templates.**
WooCommerce pages work normally with your theme's templates. WooNooW admin features still work, but the customer-facing SPA is turned off.
**Benefits**:
- Keep existing theme customizations
- Compatibility with WooCommerce template overrides
- Traditional page-by-page navigation
**Best for**:
- Stores with heavy theme customizations
- Testing before full rollout
- Troubleshooting issues
---
## Switching Modes
### How to Switch
1. Go to **WooNooW → Appearance → General**
2. Find **SPA Mode** setting
3. Select your preferred mode
4. Click **Save Changes**
### What Happens When Switching
**Switching to Full**:
- WooCommerce pages start redirecting
- SPA loads for shop experience
- No data is changed
**Switching to Disabled**:
- Redirects stop immediately
- WooCommerce templates take over
- No data is changed
> **Note**: All your products, orders, and settings remain unchanged when switching modes.
---
## URL Structure
### Full Mode URLs
```
https://yourstore.com/store/ → Home/Shop
https://yourstore.com/store/shop → Shop page
https://yourstore.com/store/product/slug → Product page
https://yourstore.com/store/cart → Cart
https://yourstore.com/store/checkout → Checkout
https://yourstore.com/store/my-account → Account
```
### Disabled Mode URLs
Standard WooCommerce URLs:
```
https://yourstore.com/shop/ → Shop page
https://yourstore.com/product/slug → Product page
https://yourstore.com/cart/ → Cart
https://yourstore.com/checkout/ → Checkout
https://yourstore.com/my-account/ → Account
```
---
## SEO Considerations
### Full Mode SEO
- WooCommerce URLs (`/product/slug`) remain in sitemaps
- When users click from search results, they're redirected to SPA
- Meta tags are generated dynamically for social sharing
- 302 (temporary) redirects preserve link equity
### Disabled Mode SEO
- Standard WooCommerce SEO applies
- No redirects needed
- Works with Yoast SEO, RankMath, etc.
---
## Troubleshooting
### Redirects Not Working
1. **Flush Permalinks**: Go to Settings → Permalinks → Save Changes
2. **Check Store Page**: Ensure the Store page exists and has `[woonoow_spa]`
3. **Clear Cache**: Purge all caching layers
### Blank Pages After Enabling
1. Verify SPA Mode is set to "Full"
2. Clear browser cache
3. Check for JavaScript errors in browser console
### Want to Test Before Enabling
1. Keep mode as "Disabled"
2. Visit `/store/` directly to preview SPA
3. Switch to "Full" when satisfied

79
docs/developer/addons/bridge-pattern.mdx Normal file
View File

@@ -0,0 +1,79 @@
---
title: Bridge Pattern
description: Integrating third-party plugins with WooNooW
date: 2024-01-31
---
## Philosophy
**WooNooW Core = Zero Addon Dependencies**
We don't integrate specific plugins into WooNooW core. Instead, we provide:
1. **Hook system** for addons to extend functionality
2. **Bridge snippets** for compatibility with existing plugins
3. **Addon development guide** for building proper WooNooW addons
---
## The Problem
Example: **Rajaongkir** (Indonesian Shipping Plugin).
It removes standard fields and adds custom dropdowns, storing data in WooCommerce sessions.
It doesn't work with WooNooW OrderForm out of the box because the OrderForm uses standard fields and API-based validation.
---
## Solution: Bridge Snippet
### Option A: Standalone Bridge Plugin
Create a tiny bridge plugin that makes the third-party plugin work with WooNooW.
```php
/**
* Plugin Name: WooNooW Rajaongkir Bridge
* Description: Makes Rajaongkir plugin work with WooNooW OrderForm
* Version: 1.0.0
*/
// Hook into WooNooW's shipping calculation
add_filter('woonoow_before_shipping_calculate', function($shipping_data) {
if ($shipping_data['country'] === 'ID' && !empty($shipping_data['city'])) {
// Search API and set session data
$api = Cekongkir_API::get_instance();
$results = $api->search_destination_api($shipping_data['city']);
if (!empty($results[0])) {
WC()->session->set('selected_destination_id', $results[0]['id']);
}
}
return $shipping_data;
});
```
### Option B: Frontend Injection
Inject script to handle UI changes.
```typescript
import { addonLoader, addFilter } from '@woonoow/hooks';
addonLoader.register({
id: 'rajaongkir-bridge',
init: () => {
addFilter('woonoow_order_form_after_shipping', (content, formData, setFormData) => {
if (formData.shipping?.country !== 'ID') return content;
return (
<>
{content}
<div className="custom-field">
{/* Custom Destination Select */}
</div>
</>
);
});
}
});
```

311
docs/developer/addons/custom-channels.mdx Normal file
View File

@@ -0,0 +1,311 @@
---
title: Custom Notification Channels
description: Learn how to add custom notification channels like WhatsApp, SMS, or Telegram to WooNooW
---
WooNooW supports custom notification channels through a pluggable architecture. You can extend the notification system to send messages via WhatsApp, SMS, Telegram, or any other service.
## Architecture Overview
The multi-channel notification system consists of three core components:
1. **`ChannelInterface`** - Contract that all channels must implement
2. **`ChannelRegistry`** - Central registry for managing channels
3. **`NotificationManager`** - Sends notifications through registered channels
```mermaid
graph LR
A[NotificationManager] --> B[ChannelRegistry]
B --> C[Email Channel]
B --> D[WhatsApp Channel]
B --> E[SMS Channel]
B --> F[Custom Channel]
```
## Creating a Custom Channel
### Step 1: Implement ChannelInterface
Create a class that implements `WooNooW\Core\Notifications\Channels\ChannelInterface`:
```php
<?php
namespace MyPlugin\Channels;
use WooNooW\Core\Notifications\Channels\ChannelInterface;
class WhatsAppChannel implements ChannelInterface {
public function get_id() {
return 'whatsapp';
}
public function get_label() {
return __('WhatsApp', 'my-plugin');
}
public function is_configured() {
$api_key = get_option('my_whatsapp_api_key');
return !empty($api_key);
}
public function send($event_id, $recipient, $data) {
// Your sending logic here
return [
'success' => true,
'message' => 'Sent successfully'
];
}
public function get_config_fields() {
return [
[
'id' => 'my_whatsapp_api_key',
'label' => 'API Key',
'type' => 'text',
],
];
}
}
```
### Step 2: Register Your Channel
Register your channel with the `ChannelRegistry` during plugin initialization:
```php
use WooNooW\Core\Notifications\ChannelRegistry;
use MyPlugin\Channels\WhatsAppChannel;
add_action('init', function() {
$channel = new WhatsAppChannel();
ChannelRegistry::register($channel);
});
```
### Step 3: Enable in Settings
Once registered, your channel will be available in the notification settings UI, where users can configure which events should use WhatsApp.
## Interface Reference
### get_id()
Returns a unique identifier for your channel.
```php
public function get_id(): string
```
**Example:**
```php
public function get_id() {
return 'whatsapp'; // or 'sms', 'telegram', etc.
}
```
### get_label()
Returns a human-readable label for the admin UI.
```php
public function get_label(): string
```
**Example:**
```php
public function get_label() {
return __('WhatsApp Business', 'my-plugin');
}
```
### is_configured()
Checks if the channel has all required configuration (API keys, credentials, etc.).
```php
public function is_configured(): bool
```
**Example:**
```php
public function is_configured() {
$api_key = get_option('my_whatsapp_api_key');
$phone = get_option('my_whatsapp_phone');
return !empty($api_key) && !empty($phone);
}
```
### send()
Sends a notification through this channel.
```php
public function send(string $event_id, string $recipient, array $data): bool|array
```
**Parameters:**
- `$event_id` - Event identifier (e.g., `'order_completed'`, `'newsletter_confirm'`)
- `$recipient` - Recipient type (`'customer'` or `'staff'`)
- `$data` - Context data including order, user, custom variables
**Returns:**
- `bool` - Simple success/failure
- `array` - Detailed result with `success` and `message` keys
**Example:**
```php
public function send($event_id, $recipient, $data) {
$phone = $this->get_recipient_phone($recipient, $data);
$message = $this->build_message($event_id, $data);
$response = wp_remote_post('https://api.provider.com/send', [
'body' => [
'to' => $phone,
'message' => $message,
'api_key' => get_option('my_api_key'),
],
]);
if (is_wp_error($response)) {
return [
'success' => false,
'message' => $response->get_error_message(),
];
}
return ['success' => true];
}
```
### get_config_fields()
Returns configuration fields for the admin settings UI (optional).
```php
public function get_config_fields(): array
```
**Field Structure:**
```php
[
'id' => 'option_name',
'label' => 'Field Label',
'type' => 'text|select|textarea',
'description' => 'Help text',
'options' => [], // For select fields
'default' => 'value',
]
```
## Complete Example: WhatsApp Channel
See the reference implementation:
[WhatsAppChannel.example.php](file:///Users/dwindown/Local%20Sites/woonoow/app/public/wp-content/plugins/woonoow/includes/Core/Notifications/Channels/WhatsAppChannel.example.php)
This example includes:
- ✅ Twilio API integration
- ✅ Phone number extraction from orders/users
- ✅ Message templates for common events
- ✅ Configuration fields for admin settings
## Message Customization
Use filters to customize messages for specific events:
```php
add_filter('woonoow_whatsapp_message_order_completed', function($message, $data) {
if (isset($data['order'])) {
$order = $data['order'];
return sprintf(
"🎉 Order #%s confirmed! Track here: %s",
$order->get_order_number(),
$order->get_view_order_url()
);
}
return $message;
}, 10, 2);
```
## Available Events
Your channel can handle any registered notification event:
| Event | Recipient | Data Available |
|-------|-----------|----------------|
| `order_completed` | customer | `order`, `user_id` |
| `order_cancelled` | customer | `order`, `user_id` |
| `newsletter_confirm` | customer | `email`, `confirmation_url` |
| `newsletter_welcome` | customer | `email`, `user_id` |
| `subscription_expiring` | customer | `subscription`, `user_id` |
See [Event Registry](/hooks/notifications#event-registry) for the complete list.
## Testing Your Channel
```php
// Manual test
use WooNooW\Core\Notifications\NotificationManager;
NotificationManager::send('order_completed', 'whatsapp', [
'order' => wc_get_order(123),
'user_id' => 1,
]);
```
## Best Practices
1. **Validate Configuration**: Always check `is_configured()` before attempting to send
2. **Handle Errors Gracefully**: Return detailed error messages for debugging
3. **Log Send Attempts**: Use `do_action()` for tracking/analytics
4. **Support Filtering**: Allow message customization via filters
5. **Rate Limiting**: Consider implementing rate limiting for API calls
## Hooks
### Registration Hook
```php
// Register channels during init
add_action('init', function() {
ChannelRegistry::register(new MyChannel());
});
```
### Custom Hooks in Your Channel
```php
// Allow logging/tracking
do_action('my_channel_sent', $event_id, $recipient, $result);
// Allow message customization
$message = apply_filters(
"my_channel_message_{$event_id}",
$default_message,
$data
);
```
## Troubleshooting
**Channel not appearing in settings?**
- Ensure `ChannelRegistry::register()` is called during `init`
- Check that `get_id()` returns a unique string
- Verify `is_configured()` returns `true`
**Messages not sending?**
- Check notification settings: Marketing > Notifications
- Verify the event has your channel enabled
- Enable debug mode and check logs
- Test `is_configured()` returns true
**API errors?**
- Validate API credentials in settings
- Check API provider status/quotas
- Review error logs for API responses
## Related Documentation
- [Notification System](/core-concepts/notifications)
- [Event Registry](/hooks/notifications#event-registry)
- [Notification Hooks](/hooks/notifications)

243
docs/developer/addons/module-integration.mdx Normal file
View File

@@ -0,0 +1,243 @@
---
title: Module Registry
description: Register custom modules and addons with WooNooW's unified module system
---
WooNooW's modular architecture allows developers to create custom modules and addons that integrate seamlessly with the **Settings > Modules** UI.
## Overview
The Module Registry provides a unified system for:
- Enable/disable toggle in the admin UI
- Custom settings with schema-based forms
- Dependencies on other modules
- SPA route registration for custom settings pages
## Registering a Module
Add your module using the `woonoow/modules/registry` filter:
```php
add_filter('woonoow/modules/registry', 'my_plugin_register_module');
function my_plugin_register_module($modules) {
$modules['my-module'] = [
'id' => 'my-module',
'name' => __('My Custom Module', 'my-plugin'),
'description' => __('Description of what this module does.', 'my-plugin'),
'icon' => 'Sparkles', // Lucide icon name
'category' => 'marketing', // marketing, sales, developer, etc.
'requires' => [], // Array of required module IDs
'settings' => [], // Settings schema array
];
return $modules;
}
```
## Module Properties
| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `id` | string | Yes | Unique identifier (lowercase, hyphens) |
| `name` | string | Yes | Display name in the UI |
| `description` | string | Yes | Brief description of functionality |
| `icon` | string | No | Lucide icon name (e.g., `Package`, `Mail`) |
| `category` | string | No | Grouping category: `marketing`, `sales`, `developer` |
| `requires` | array | No | Array of module IDs this depends on |
| `settings` | array | No | Settings schema for module configuration |
---
## Settings Schema
Define a settings schema to allow users to configure your module:
```php
'settings' => [
[
'id' => 'api_key',
'type' => 'text',
'label' => __('API Key', 'my-plugin'),
'description' => __('Enter your API key', 'my-plugin'),
'default' => '',
],
[
'id' => 'rate_limit',
'type' => 'number',
'label' => __('Rate Limit', 'my-plugin'),
'description' => __('Max requests per minute', 'my-plugin'),
'default' => 10,
'min' => 1,
'max' => 100,
],
[
'id' => 'enable_debug',
'type' => 'toggle',
'label' => __('Enable Debug Mode', 'my-plugin'),
'default' => false,
],
],
```
### Available Field Types
| Type | Description | Properties |
|------|-------------|------------|
| `text` | Single-line text input | `default`, `placeholder` |
| `textarea` | Multi-line text input | `default`, `rows` |
| `number` | Numeric input with validation | `default`, `min`, `max`, `step` |
| `toggle` | Boolean on/off switch | `default` (true/false) |
| `select` | Dropdown selection | `default`, `options` (array of `{value, label}`) |
| `checkbox` | Single checkbox | `default` (true/false) |
| `color` | Color picker | `default` (#hex value) |
| `url` | URL input with validation | `default`, `placeholder` |
| `email` | Email input with validation | `default`, `placeholder` |
| `password` | Password input (masked) | `default` |
### Common Field Properties
| Property | Type | Description |
|----------|------|-------------|
| `id` | string | Unique field identifier |
| `type` | string | Field type from list above |
| `label` | string | Display label |
| `description` | string | Help text below field |
| `default` | mixed | Default value |
### Select Field Example
```php
[
'id' => 'display_mode',
'type' => 'select',
'label' => __('Display Mode', 'my-plugin'),
'default' => 'grid',
'options' => [
['value' => 'grid', 'label' => __('Grid', 'my-plugin')],
['value' => 'list', 'label' => __('List', 'my-plugin')],
['value' => 'carousel', 'label' => __('Carousel', 'my-plugin')],
],
],
```
---
## Checking Module Status
Use `ModuleRegistry::is_enabled()` to check if your module is active:
```php
use WooNooW\Core\ModuleRegistry;
if (ModuleRegistry::is_enabled('my-module')) {
// Module is enabled, initialize features
My_Module_Manager::init();
}
```
## Module Lifecycle Events
Hook into module enable/disable events:
```php
// When any module is enabled
add_action('woonoow/module/enabled', function($module_id) {
if ($module_id === 'my-module') {
// Create database tables, initialize settings, etc.
My_Module_Manager::install();
}
});
// When any module is disabled
add_action('woonoow/module/disabled', function($module_id) {
if ($module_id === 'my-module') {
// Cleanup if necessary
}
});
```
---
## SPA Routes for Settings Pages
Addons can register custom React settings pages:
```php
add_filter('woonoow/spa_routes', function($routes) {
$routes[] = [
'path' => '/settings/my-addon',
'component_url' => plugin_dir_url(__FILE__) . 'dist/Settings.js',
'title' => 'My Addon Settings',
];
return $routes;
});
```
## Addon Registry (External Addons)
External addons can also register via `woonoow/addon_registry` for extended metadata:
```php
add_filter('woonoow/addon_registry', function($addons) {
$addons['my-shipping-addon'] = [
'id' => 'my-shipping-addon',
'name' => 'My Shipping',
'description' => 'Custom shipping integration',
'version' => '1.0.0',
'author' => 'My Company',
'category' => 'shipping',
'icon' => 'truck',
'settings_url' => '/settings/shipping/my-addon',
'spa_bundle' => plugin_dir_url(__FILE__) . 'dist/addon.js',
];
return $addons;
});
```
---
## Complete Example
```php
<?php
namespace MyPlugin;
class MyModuleSettings {
public static function init() {
add_filter('woonoow/modules/registry', [__CLASS__, 'register']);
}
public static function register($modules) {
$modules['my-module'] = [
'id' => 'my-module',
'name' => __('My Module', 'my-plugin'),
'description' => __('Adds awesome features to your store.', 'my-plugin'),
'icon' => 'Zap',
'category' => 'marketing',
'requires' => [], // No dependencies
'settings' => [
[
'id' => 'feature_enabled',
'type' => 'toggle',
'label' => __('Enable Feature', 'my-plugin'),
'default' => true,
],
],
];
return $modules;
}
}
// Initialize on plugins_loaded
add_action('plugins_loaded', ['MyPlugin\MyModuleSettings', 'init']);
```
## Best Practices
1. **Check module status** before loading heavy features
2. **Use the `woonoow/module/enabled` hook** to run installation routines only when needed
3. **Specify dependencies** so WooNooW can prompt users to enable required modules
4. **Provide meaningful descriptions** to help users understand what each module does

103
docs/developer/addons/page-templates.mdx Normal file
View File

@@ -0,0 +1,103 @@
---
title: Custom Page Templates
description: Learn how to register custom starting templates for the Page Editor.
---
WooNooW allows developers to register custom page templates. These templates appear in the "Create New Page" modal, allowing users to start with a pre-configured layout instead of a blank page.
## Registering a Template
To add a new template, use the `woonoow_page_templates` filter. You should append your template definition to the existing array.
```php
add_filter('woonoow_page_templates', function($templates) {
$templates[] = [
'id' => 'my-custom-landing',
'label' => 'Product Launch',
'description' => 'A structured page for new product announcements.',
'icon' => 'rocket', // Lucide icon name (lowercase)
'sections' => [
// Section definitions...
]
];
return $templates;
});
```
## Template Structure
Each template requires the following properties:
| Property | Type | Description |
| :--- | :--- | :--- |
| `id` | string | Unique identifier for the template. |
| `label` | string | Display name shown in the modal. |
| `description` | string | Short description of the template's purpose. |
| `icon` | string | Name of a Lucide icon (e.g., `layout`, `users`, `rocket`). |
| `sections` | array | Array of section objects defining the initial layout. |
### Defining Sections
Sections are the building blocks of a page. Each section object mimics the structure stored in the database.
```php
[
'id' => uniqid('section_'), // Must be unique
'type' => 'hero', // Component type (hero, feature-grid, image-text, etc.)
'props' => [
'title' => ['type' => 'static', 'value' => 'Hello World'],
'subtitle' => ['type' => 'static', 'value' => 'This is a template.'],
],
'styles' => [
'contentWidth' => 'contained', // 'full' or 'contained'
'padding' => 'medium',
]
]
```
## Example: Full Configuration
Here is a complete example that registers a "Support Page" template with a Hero and a FAQ section.
```php
add_filter('woonoow_page_templates', function($templates) {
$templates[] = [
'id' => 'support-page',
'label' => 'Support Center',
'description' => 'Help desk layout with search and FAQ grid.',
'icon' => 'help-circle',
'sections' => [
// Hero Section
[
'id' => uniqid('section_'),
'type' => 'hero',
'props' => [
'title' => ['type' => 'static', 'value' => 'How can we help?'],
'cta_text' => ['type' => 'static', 'value' => 'Contact Support'],
'cta_url' => ['type' => 'static', 'value' => '/contact'],
],
'styles' => ['contentWidth' => 'full']
],
// Content Section
[
'id' => uniqid('section_'),
'type' => 'content',
'props' => [
'content' => ['type' => 'static', 'value' => '<h2>Frequently Asked Questions</h2><p>Find answers below.</p>']
],
'styles' => ['contentWidth' => 'contained']
]
]
];
return $templates;
});
```
## Available Section Types
Common available section types include:
- `hero`: Large banner with title, subtitle, and CTA.
- `content`: Rich text editor content.
- `image-text`: Split layout with image and text.
- `feature-grid`: Grid of icons and text.
- `cta-banner`: Call to action strip.

79
docs/developer/addons/react-integration.mdx Normal file
View File

@@ -0,0 +1,79 @@
---
title: React Integration
description: Using React within WooNooW Addons
date: 2024-01-31
---
## The Challenge
External addons cannot bundle React because WooNooW already ships with a React runtime. Bundling it again would cause conflicts and bloat.
## Solution: Exposed Runtime
WooNooW exposes its React instance and Component library on the `window` object.
### Core Setup (How it works internally)
```typescript
// WooNooW Core
window.WooNooW = {
React: React,
ReactDOM: ReactDOM,
components: {
Button: Button,
Input: Input,
Select: Select,
},
hooks: { addFilter, addAction }
};
```
### Addon implementation
#### Level 1: Vanilla JS (No Build)
Good for simple injections.
```javascript
(function() {
window.addEventListener('woonoow:loaded', function() {
window.WooNooW.addFilter('woonoow_order_form_after_shipping', function(container) {
// Manual DOM manipulation
return container;
});
});
})();
```
#### Level 2: React with Build (Recommended)
Use `vite` or `webpack` and configure React as an **external**.
**vite.config.js**
```javascript
export default {
build: {
rollupOptions: {
external: ['react', 'react-dom'],
output: {
globals: {
react: 'window.WooNooW.React',
'react-dom': 'window.WooNooW.ReactDOM'
}
}
}
}
};
```
**Index.tsx**
```typescript
const { React, hooks, components } = window.WooNooW;
const { Button } = components;
function MyAddonComponent() {
return <Button>Click Me</Button>;
}
```

87
docs/developer/api/licensing.mdx Normal file
View File

@@ -0,0 +1,87 @@
---
title: Licensing API
description: Endpoints for activating, validating, and managing licenses
date: 2024-01-31
---
## Overview
The Licensing API allows external applications to interact with the WooNooW licensing system.
**Base URL**: `https://your-domain.com/wp-json/woonoow/v1`
---
## Public Endpoints
### Activate License
Activates a license key for a specific domain.
```http
POST /licenses/activate
```
#### Activation Parameters
| Body Params | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| `license_key` | `string` | **Yes** | The license key to activate |
| `domain` | `string` | **Yes** | The domain where the software is installed |
| `activation_mode` | `string` | No | Set to `oauth` to trigger OAuth flow |
#### Responses
```json
{
"success": true,
"activation_id": 123,
"license_key": "XXXX-YYYY-ZZZZ-WWWW",
"status": "active"
}
```
If OAuth is required:
```json
{
"success": false,
"oauth_required": true,
"oauth_redirect": "https://vendor.com/my-account/license-connect/...",
"state": "abc12345"
}
```
---
### Validate License
Checks if a license key is valid and active for the current domain.
```http
POST /licenses/validate
```
#### Validation Parameters
| Body Params | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| `license_key` | `string` | **Yes** | The license key to validate |
| `domain` | `string` | **Yes** | The domain to check against |
---
### Deactivate License
Deactivates a license for the current domain.
```http
POST /licenses/deactivate
```
#### Deactivation Parameters
| Body Params | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| `license_key` | `string` | **Yes** | The license key to deactivate |
| `domain` | `string` | **Yes** | The domain to remove |

20
docs/developer/overview.mdx Normal file
View File

@@ -0,0 +1,20 @@
---
title: Developer Guide
description: Extend and customize WooNooW.
---
## Core Concepts
WooNooW is built with extensibility in mind.
<CardGroup cols={2}>
<Card title="Addons System" icon="Package" href="/docs/developer/addons/module-integration">
Learn how to create custom modules that plug into the WooNooW ecosystem.
</Card>
<Card title="React Integration" icon="Plug" href="/docs/developer/addons/react-integration">
Understand how we bridge PHP and React to create seamless admin interfaces.
</Card>
<Card title="API Reference" icon="Zap" href="/docs/developer/api/licensing">
Detailed documentation of our REST API endpoints.
</Card>
</CardGroup>

218
docs/developer/software-updates/index.mdx Normal file
View File

@@ -0,0 +1,218 @@
---
title: Software Updates API
description: Distribute software updates with license-based access control
---
The Software Distribution module enables selling WordPress plugins, themes, or any software with automatic update checking, secure downloads, and version management.
## Prerequisites
- Enable **Licensing** module (required)
- Enable **Software Distribution** module in Settings → Modules
- Configure downloadable products with software distribution enabled
## Product Configuration
When editing a downloadable product in WooCommerce, you'll see a new "Software Distribution" section:
| Field | Description |
|-------|-------------|
| **Enable Software Updates** | Allow customers to check for updates via API |
| **Software Slug** | Unique identifier (e.g., `my-plugin`) used in API calls |
| **Current Version** | Latest version number (e.g., `1.2.3`) |
### WordPress Integration (Optional)
Enable "WordPress Plugin/Theme" to add these fields:
- **Requires WP** - Minimum WordPress version
- **Tested WP** - Tested up to WordPress version
- **Requires PHP** - Minimum PHP version
## API Endpoints
### Check for Updates
```
GET /wp-json/woonoow/v1/software/check
POST /wp-json/woonoow/v1/software/check
```
**Parameters:**
| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `license_key` | string | Yes | Valid license key |
| `slug` | string | Yes | Software slug |
| `version` | string | Yes | Current installed version |
| `site_url` | string | No | Site URL for tracking |
**Response:**
```json
{
"success": true,
"update_available": true,
"product": {
"name": "My Plugin",
"slug": "my-plugin"
},
"current_version": "1.0.0",
"latest_version": "1.2.0",
"changelog": "## What's New\n- Added feature X\n- Fixed bug Y",
"release_date": "2026-02-01 12:00:00",
"download_url": "https://your-store.com/wp-json/woonoow/v1/software/download?token=..."
}
```
For WordPress plugins/themes, an additional `wordpress` object is included:
```json
{
"wordpress": {
"requires": "6.0",
"tested": "6.7",
"requires_php": "7.4",
"icons": { "1x": "...", "2x": "..." },
"banners": { "low": "...", "high": "..." }
}
}
```
### Download File
```
GET /wp-json/woonoow/v1/software/download?token=<token>
```
Download tokens are single-use and expire after 5 minutes.
### Get Changelog
```
GET /wp-json/woonoow/v1/software/changelog?slug=<slug>
GET /wp-json/woonoow/v1/software/changelog?slug=<slug>&version=<version>
```
Returns version history with changelogs.
## WordPress Client Integration
Include the updater class in your plugin or theme to enable automatic updates:
### 1. Copy the Updater Class
Copy `class-woonoow-updater.php` from the WooNooW plugin's `templates/updater/` directory to your plugin.
### 2. Initialize in Your Plugin
```php
<?php
// In your main plugin file
require_once plugin_dir_path(__FILE__) . 'includes/class-woonoow-updater.php';
new WooNooW_Updater([
'api_url' => 'https://your-store.com/',
'slug' => 'my-plugin',
'version' => MY_PLUGIN_VERSION,
'license_key' => get_option('my_plugin_license_key'),
'plugin_file' => __FILE__,
]);
```
### 3. For Themes
```php
<?php
// In your theme's functions.php
require_once get_theme_file_path('includes/class-woonoow-updater.php');
new WooNooW_Updater([
'api_url' => 'https://your-store.com/',
'slug' => 'my-theme',
'version' => wp_get_theme()->get('Version'),
'license_key' => get_option('my_theme_license_key'),
'theme_slug' => 'my-theme',
]);
```
## Non-WordPress Integration
For other software types, make HTTP requests directly to the API:
### JavaScript Example
```javascript
async function checkForUpdates(licenseKey, currentVersion) {
const response = await fetch('https://your-store.com/wp-json/woonoow/v1/software/check', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
license_key: licenseKey,
slug: 'my-software',
version: currentVersion,
}),
});
const data = await response.json();
if (data.update_available) {
console.log(`Update available: v${data.latest_version}`);
// Download from data.download_url
}
return data;
}
```
### Python Example
```python
import requests
def check_for_updates(license_key: str, current_version: str) -> dict:
response = requests.post(
'https://your-store.com/wp-json/woonoow/v1/software/check',
json={
'license_key': license_key,
'slug': 'my-software',
'version': current_version,
}
)
data = response.json()
if data.get('update_available'):
print(f"Update available: v{data['latest_version']}")
# Download from data['download_url']
return data
```
## Managing Versions
Use the Admin SPA at **Products → Software Versions** to:
- View all software-enabled products
- Release new versions with changelogs
- Track download counts per version
- Set current (latest) version
## Error Codes
| Error | Description |
|-------|-------------|
| `invalid_license` | License key is invalid or expired |
| `product_not_found` | Software slug doesn't match any product |
| `software_disabled` | Software distribution not enabled for product |
| `invalid_token` | Download token expired or already used |
| `module_disabled` | Software Distribution module is disabled |
## Security
- All API endpoints require valid license key
- Download tokens are single-use and expire in 5 minutes
- Rate limiting: 10 requests/minute per license (configurable)
- IP address logged with download tokens

45
docs/developer/software-updates/store-owner.mdx Normal file
View File

@@ -0,0 +1,45 @@
---
title: Store Owner Guide
description: Managing and distributing digital software products.
---
WooNooW's Software Updates module allows you to securely sell, distribute, and manage updates for your digital products, plugins, or applications.
## Enabling the Software Module
To begin distributing software, you must first enable the module:
1. Navigate to **WooNooW > Settings > Modules**.
2. Toggle on the **Software Updates** module.
3. Save changes.
## Creating a Software Product
Software products are created by extending standard WooCommerce virtual products.
1. Go to **Products > Add New** in WordPress.
2. Check both the **Virtual** and **Downloadable** checkboxes in the Product Data panel.
3. In the left tabs, select **Software Details**.
4. Configure the following specific to your software:
- **Software Type:** Identify the platform (e.g., WordPress Plugin, Desktop App).
- **Current Version:** The latest release version (e.g., 1.2.0).
- **Requires PHP/WP:** Set minimum system requirements (optional).
- **Tested Up To:** Set the maximum compatible platform version (optional).
5. Add your downloadable file under the standard **Downloadable** tab.
6. Publish the product.
## Managing Version History
When you release an update:
1. Navigate to **Store > Software Versions** in your WooNooW Admin SPA.
2. Click **Create Release**.
3. Select the software product you are updating.
4. Enter the new **Version Number** (e.g., 1.3.0).
5. Provide a detailed **Changelog**. Use Markdown to list features, fixes, and notes.
6. Publish the release.
When customers check for updates within their application (using the API), the system will serve them the latest version and display this changelog.
## Licensing
You can choose to attach License Keys to your software to prevent unauthorized use.
1. Enable the **Licensing** module in Settings.
2. When configuring your Software Product, check the **Requires License** box.
3. Define the activation limit (e.g., 1 site, 5 sites, or unlimited).
When a customer purchases the software, the system will automatically generate a unique license key and deliver it in the checkout confirmation and email receipt. Customers can manage their active activations from their **My Account > Licenses** dashboard.

150
docs/features/checkout.mdx Normal file
View File

@@ -0,0 +1,150 @@
---
title: Checkout
description: Streamlined purchasing experience in WooNooW
date: 2024-01-31
---
## Overview
The checkout process includes:
1. **Cart Review** - Verify items before checkout
2. **Customer Information** - Billing and shipping details
3. **Payment Method** - Select how to pay
4. **Order Confirmation** - Complete the purchase
---
## Checkout Flow
### Step 1: Cart
Before checkout, customers review their cart:
- Product list with images
- Quantity adjustments
- Remove items
- Apply coupon codes
- See subtotal, shipping, and total
### Step 2: Customer Details
Customers provide:
- **Email address**
- **Billing information**
- **Shipping address** (if different from billing)
> **Note**: Logged-in customers have their details pre-filled.
### Step 3: Shipping Method
If physical products are in the cart:
- Available shipping methods are shown
- Shipping cost is calculated
- Customer selects preferred method
### Step 4: Payment
Customers choose their payment method:
- Credit/Debit Card (Stripe, PayPal, etc.)
- Bank Transfer
- Cash on Delivery
- Other configured gateways
### Step 5: Place Order
After reviewing everything:
- Click "Place Order"
- Payment is processed
- Confirmation page is shown
- Email receipt is sent
---
## Features
### Guest Checkout & Auto-Registration
Allow customers to checkout without creating an account upfront.
Configure in **WooCommerce → Settings → Accounts & Privacy**.
**Seamless Auto-Registration:**
WooNooW implements a frictionless auto-registration flow. If a guest checks out with an email that isn't registered, the system will:
1. Automatically create an account in the background.
2. Securely generate a random password.
3. Automatically log the user in immediately after checkout.
4. Send an email containing their new login credentials so they can track their order and easily return.
### Coupon Codes
Customers can apply discount codes:
1. Enter code in the coupon field
2. Click "Apply"
3. Discount is reflected in total
### Order Notes
Optional field for customers to add special instructions.
---
## Payment Gateways
### Supported Gateways
WooNooW supports all WooCommerce payment gateways:
| Gateway | Type |
|---------|------|
| Bank Transfer (BACS) | Manual |
| Check Payments | Manual |
| Cash on Delivery | Manual |
| PayPal | Card / PayPal |
| Stripe | Card |
| Square | Card |
### Configuring Gateways
1. Go to **WooNooW → Settings → Payments**
2. Enable desired payment methods
3. Configure API keys and settings
4. Test with sandbox/test mode first
---
## After Checkout
### Order Confirmation Page
Shows:
- Order number
- Order summary
- Next steps
### Confirmation Email
Automatically sent to customer with:
- Order details
- Payment confirmation
- Shipping information (if applicable)
---
## Troubleshooting
### "Place Order" Button Not Working
1. Check all required fields are filled
2. Verify payment gateway is properly configured
3. Check browser console for JavaScript errors
### Payment Declined
1. Customer should verify card details
2. Check payment gateway dashboard for error details
3. Ensure correct API keys are configured
### Shipping Not Showing
1. Verify shipping zones are configured in WooCommerce
2. Check if products have weight/dimensions set
3. Confirm customer's address is in a configured zone

9
docs/features/index.mdx Normal file
View File

@@ -0,0 +1,9 @@
---
title : Features
description : Showcases the features of Woonoow
date : 10-12-2024
---
This page showcases the features of Woonoow.
<Outlet path="/features" />

98
docs/features/shop.mdx Normal file
View File

@@ -0,0 +1,98 @@
---
title: Shop Page
description: Browsing and filtering your product catalog
date: 2024-01-31
---
## Overview
The WooNooW shop page provides:
- **Product Grid** - Visual display of products
- **Search** - Find products by name
- **Filters** - Category and sorting options
- **Pagination** - Navigate through products
---
## Features
### Product Cards
Each product displays:
- Product image
- Product name
- Price (with sale price if applicable)
- Add to Cart button
- Wishlist button (if enabled)
### Search
Type in the search box to filter products by name. Search is instant and updates the grid as you type.
### Category Filter
Filter products by category using the dropdown. Shows:
- All Categories
- Individual categories with product count
### Sorting
Sort products by:
- Default sorting
- Popularity
- Average rating
- Latest
- Price: Low to High
- Price: High to Low
---
## Customization
### Grid Layout
Configure the product grid in **WooNooW → Appearance**:
| Device | Options |
|--------|---------|
| Mobile | 1-2 columns |
| Tablet | 2-4 columns |
| Desktop | 2-6 columns |
### Product Card Style
Product cards can display:
- **Image** - Product featured image
- **Title** - Product name
- **Price** - Current price and sale price
- **Rating** - Star rating (if reviews enabled)
- **Add to Cart** - Quick add button
---
## Navigation
### Clicking a Product
Clicking a product card navigates to the full product page where customers can:
- View all images
- Select variations
- Read description
- Add to cart
### Back to Shop
From any product page, use the breadcrumb or browser back button to return to the shop.
---
## Performance
### Lazy Loading
Product images load as they come into view, improving initial page load time.
### Infinite Scroll vs Pagination
Currently uses pagination. Infinite scroll may be added in future versions.

26
docs/features/shortcodes.mdx Normal file
View File

@@ -0,0 +1,26 @@
---
title: Shortcodes
description: Available shortcodes in WooNooW
date: 2024-01-31
---
## The Primary Shortcode
WooNooW operates as a Single Page Application (SPA). To render the entire store application, you only need one shortcode:
### `[woonoow_spa]`
This shortcode initializes the SPA router and renders the appropriate view based on the URL (Shop, Product, Cart, Checkout, Account).
**Usage:**
Place this shortcode on your designated "Store" page.
```text
[woonoow_spa]
```
---
## Legacy Shortcodes
*Note: Previous versions utilize individual shortcodes (`[woonoow_shop]`, etc.). These are now consolidated into the single SPA entry point for better performance and routing state management.*

94
docs/getting-started/installation.mdx Normal file
View File

@@ -0,0 +1,94 @@
---
title: Installation Guide
description: Installing WooNooW on your WordPress site
date: 2024-01-31
---
## Requirements
Before installing, ensure your site meets these requirements:
| Requirement | Minimum | Recommended |
|-------------|---------|-------------|
| WordPress | 6.0+ | Latest |
| WooCommerce | 7.0+ | Latest |
| PHP | 7.4+ | 8.1+ |
| MySQL | 5.7+ | 8.0+ |
## Installation Methods
### Method 1: WordPress Admin (Recommended)
1. Go to **Plugins → Add New**
2. Click **Upload Plugin**
3. Select the `woonoow.zip` file
4. Click **Install Now**
5. Click **Activate**
### Method 2: FTP Upload
1. Extract `woonoow.zip` to get the `woonoow` folder
2. Upload to `/wp-content/plugins/`
3. Go to **Plugins → Installed Plugins**
4. Find WooNooW and click **Activate**
## Post-Installation
After activation, WooNooW automatically:
### 1. Creates Store Page
A new "Store" page is created with the SPA shortcode. This is your main storefront.
### 2. Registers Rewrite Rules
URL routes like `/store/shop` and `/store/product/...` are registered.
> **Note**: If you see 404 errors, go to **Settings → Permalinks** and click **Save Changes** to flush rewrite rules.
### 3. Sets Default Configuration
Basic appearance settings are configured with sensible defaults.
## Verification Checklist
After installation, verify everything works:
- [ ] Plugin activated without errors
- [ ] WooNooW menu appears in admin sidebar
- [ ] Store page exists (check **Pages**)
- [ ] `/store` URL loads the SPA
- [ ] Products display on shop page
## WooCommerce Compatibility
WooNooW works alongside WooCommerce:
| WooCommerce Page | WooNooW Behavior (Full Mode) |
|------------------|------------------------------|
| `/shop` | Redirects to `/store/shop` |
| `/product/...` | Redirects to `/store/product/...` |
| `/cart` | Redirects to `/store/cart` |
| `/checkout` | Redirects to `/store/checkout` |
| `/my-account` | Redirects to `/store/my-account` |
When SPA Mode is **Disabled**, WooCommerce pages work normally.
## Updating
To update WooNooW:
1. Download the latest version
2. Go to **Plugins → Installed Plugins**
3. Deactivate WooNooW (optional but recommended)
4. Delete the old version
5. Install and activate the new version
Your settings are preserved in the database.
## Uninstalling
To completely remove WooNooW:
1. Deactivate the plugin (restores WooCommerce page content)
2. Delete the plugin
3. (Optional) Delete WooNooW options from database
> **Note**: Deactivating restores original WooCommerce shortcodes to Cart, Checkout, and My Account pages.

39
docs/getting-started/introduction.mdx Normal file
View File

@@ -0,0 +1,39 @@
---
title: Introduction
description: Overview of the WooNooW Plugin ecosystem
date: 2024-01-31
---
## What is WooNooW?
**WooNooW** is a comprehensive WooCommerce enhancement suite designed to power up your online store. It provides a robust set of tools for license management, subscription handling, and custom checkout flows.
### Key Features
* **License Management**: Sell and manage digital software licenses with ease.
* **OAuth Activation**: Secure, user-verified license activation flow.
* **Subscription Utilities**: Enhanced subscription notifications and manual renewal controls.
* **Developer API**: Full REST API for extending functionality.
---
## Why use WooNooW?
If you are a plugin developer or a digital store owner using WooCommerce, WooNooW simplifies the complex parts of your business logic.
<CardGroup>
<Card title="For Developers" icon="Terminal">
Built with extensibility in mind. Use our hooks, filters, and REST API to build custom integrations.
</Card>
<Card title="For Store Owners" icon="Box">
Manage your digital products, verified customers, and subscriptions all in one place.
</Card>
</CardGroup>
## Getting Help
Need assistance? Check out our support channels:
* [Official Support](https://woonoow.com/support)
* [Community Forums](https://community.woonoow.com)
* [Developer Docs](https://docs.woonoow.com)

17
docs/getting-started/quick-setup.mdx Normal file
View File

@@ -0,0 +1,17 @@
---
title: Quick Setup Wizard
description: Get your store running in minutes.
---
The Quick Setup Wizard is the fastest way to configure your WooNooW store. It launches automatically when you first activate the plugin.
## Steps
1. **Choose Your Mode**: Select between **Full SPA** (best for new stores) or **Checkout Only** (best for existing themes).
2. **Homepage Setup**: Automatically create a "Shop" page and set it as your home.
3. **Design**: Choose a "Boxed" or "Full Width" layout and pick a color theme.
4. **Launch**: Be redirected immediately to the Visual Builder.
If you skipped the wizard, you can always configure these options manually in **Appearance > General**.

63
docs/getting-started/quick-start-guide.mdx Normal file
View File

@@ -0,0 +1,63 @@
---
title : Quick Start Guide
description : a quick way to understand how to use it
date : 10-12-2024
---
## Heading 2
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
### Heading 3
example of ordered list format :
- list one
- sub list
- list two
- list three
#### Heading 4
Below is an example of how to write a code block :
````plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
````
example note :
```plaintext
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
```
displaying an image in markdown format :
```plaintext
![Alt text for the image](/images/example-img.png)
```
render as :
![Alt text for the image](/images/example-img.png)
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
<Note type="warning" title="Warning">
every page that is indexed in a folder will have an `index.mdx` file with metadata :
```plaintext
---
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
image : example-img.png
---
```
</Note>

21
docs/hooks/frontend.mdx Normal file
View File

@@ -0,0 +1,21 @@
---
title: Frontend Hooks
description: Hooks affecting the storefront and checkout experience
date: 2024-01-31
---
## Filters
### woonoow_ssr_cache_ttl
Customize the Time-To-Live (TTL) for Server Side Rendered fragments.
**Parameters:**
* `$ttl` (int): Time in seconds (Default: 3600).
### woonoow_standard_checkout_field_keys
Modify the standard set of checkout fields recognized by the system.
**Parameters:**
* `$keys` (array): List of field aliases (e.g., ['billing_first_name', ...]).

27
docs/hooks/index.mdx Normal file
View File

@@ -0,0 +1,27 @@
---
title: Hooks Overview
description: Overview of Actions and Filters available in WooNooW
date: 2024-01-31
---
## Introduction
WooNooW provides a rich set of actions and filters allowing developers to customize almost every aspect of the plugin without modifying core files.
### Hook Categories
* [Notifications](/docs/hooks/notifications) - Customize email templates, subjects, and channels.
* [Subscriptions](/docs/hooks/subscriptions) - Intercept payment logic and modify gateway behavior.
* [Frontend & checkout](/docs/hooks/frontend) - Adjust checkout fields and SSR caching.
* [Newsletter](/docs/hooks/newsletter) - Subscribe/unsubscribe events.
### Usage Example
```php
add_filter('woonoow_email_default_subject', function($subject, $recipient, $event) {
if ($event === 'subscription_renewal') {
return 'Your subscription is renewing soon!';
}
return $subject;
}, 10, 3);
```

21
docs/hooks/newsletter.mdx Normal file
View File

@@ -0,0 +1,21 @@
---
title: Newsletter Hooks
description: Hooks related to the Newsletter module
---
## Actions
### woonoow_newsletter_subscribed
Triggered when a user subscribes to the newsletter.
**Parameters:**
* `$email` (string): The subscriber's email address.
* `$user_id` (int|null): The user ID if logged in, or null.
### woonoow_newsletter_unsubscribed
Triggered when a user unsubscribes from the newsletter.
**Parameters:**
* `$email` (string): The subscriber's email address.

106
docs/hooks/notifications.mdx Normal file
View File

@@ -0,0 +1,106 @@
---
title: Notifications Hooks
description: Hooks related to email and push notifications
date: 2024-01-31
---
## Filters
### woonoow_email_default_templates
Modify the list of available email templates.
**Parameters:**
* `$templates` (array): Associative array of template paths.
### woonoow_email_default_subject
Customize the default subject line for emails.
**Parameters:**
* `$subject` (string): The default subject.
* `$recipient` (string): The recipient type (e.g., 'customer', 'admin').
* `$event` (string): The event triggering the email.
### woonoow_notification_channels
Register or modify available notification channels.
**Parameters:**
* `$channels` (array): list of channels.
### woonoow_email_variables
Add custom variables to be replaced in email templates.
**Parameters:**
* `$variables` (array): Key-value pairs of variables.
* `$event_id` (string): The current event ID.
* `$data` (array): Function context data.
### woonoow_email_template
Override the resolved template path for an email.
**Parameters:**
* `$template_path` (string): Absolute path to the template file.
---
## Actions
### woonoow_email_sent
Triggered after an email is successfully sent.
**Parameters:**
* `$event_id` (string): The event ID.
* `$recipient_type` (string): Type of recipient.
* `$email` (string): The email address it was sent to.
### woonoow_send_push_notification
Triggered when the system determines a push notification should be sent.
**Parameters:**
* `$event_id` (string): The event ID.
* `$recipient` (object): The recipient user object.
* `$data` (array): Payload data.
* `$recipient_type` (string): Type of recipient.
* `$email` (string): The email address it was sent to.
Triggered to send a push notification.
**Parameters:**
* `$event_id` (string): The event key.
* `$recipient` (WP_User): The recipient user object.
* `$data` (array): Notification payload data.
### woonoow_notification_events_registry
Filter to register custom notification events.
**Parameters:**
* `$events` (array): The array of registered events.
**Example:**
```php
add_filter('woonoow_notification_events_registry', function($events) {
$events['my_custom_event'] = [
'title' => 'My Custom Event',
'description' => 'Triggered when something happens',
'recipient' => 'customer',
];
return $events;
});
```
### woonoow_notification_event_updated
Triggered when a notification event's settings are updated via API.
**Parameters:**
* `$event_id` (string): The event key.
* `$channel_id` (string): The channel (email/push).
* `$enabled` (bool): New status.
* `$recipient` (string): Recipient type.

26
docs/hooks/subscriptions.mdx Normal file
View File

@@ -0,0 +1,26 @@
---
title: Subscription Hooks
description: Hooks for customizing subscription flows and payments
date: 2024-01-31
---
## Filters
### woonoow_pre_process_subscription_payment
Intercept the subscription payment process before it begins.
**Parameters:**
* `$result` (null|mixed): Return non-null to short-circuit the process.
* `$subscription` (WC_Subscription): The subscription object.
* `$order` (WC_Order): The renewal order.
### woonoow_process_subscription_payment
Modify or handle the payment processing via a custom gateway logic.
**Parameters:**
* `$result` (null|bool): The result of the payment.
* `$gateway` (object): The payment gateway instance.
* `$order` (WC_Order): The order being paid.
* `$subscription` (WC_Subscription): The subscription object.

5
docs/licensing/meta.json Normal file
View File

@@ -0,0 +1,5 @@
{
"pages": [
"oauth-flow"
]
}

114
docs/licensing/oauth-flow/index.mdx Normal file
View File

@@ -0,0 +1,114 @@
---
title: OAuth Activation Flow
description: Implementation guide for secure user-verified license activation
date: 2024-01-31
---
## Overview
The Secure OAuth Activation flow ensures that licenses are only activated by their legitimate owners. Unlike simple API activation, this method requires the user to log in to the WooNooW portal and explicitly authorize the activation request.
### When to use OAuth?
* ✅ When you want strict control over license usage
* ✅ To prevent license key sharing (key + auth required)
* ✅ If specific user consent is legally required
---
## Authentication Flow
The flow involves three parties:
1. **Client Application**: The software requesting activation (e.g., a customer's WordPress site)
2. **Vendor Portal**: The WooNooW dashboard where the user manages licenses
3. **Vendor API**: The backend handling the activation logic
<Stepper>
<StepperItem title="Step 1: Client Requests Activation">
The client sends a request to the activation API with `activation_mode: "oauth"`.
```bash
POST /woonoow/v1/licenses/activate
{
"license_key": "XXXX-YYYY-ZZZZ-WWWW",
"domain": "https://client-site.com",
"activation_mode": "oauth"
}
```
</StepperItem>
<StepperItem title="Step 2: API Request Authorization">
The API responds with `oauth_required: true` and a redirect URL.
```json
{
"oauth_required": true,
"oauth_redirect": "https://woonoow.com/my-account/license-connect/...",
"state": "abc12345"
}
```
</StepperItem>
<StepperItem title="Step 3: User Authorizes Request">
The client redirects the user to the `oauth_redirect` URL. The user logs in and sees a confirmation screen:
> **Authorize this Request?**
> Site: https://client-site.com
> License: XXXX-YYYY-ZZZZ-WWWW
Once confirmed, the vendor generates a temporary **activation token**.
</StepperItem>
<StepperItem title="Step 4: Token Exchange">
The user is redirected back to the client site with the token. The client exchanges this token for the final activation.
```bash
POST /woonoow/v1/licenses/activate
{
"activation_token": "temporary-token-123"
}
```
</StepperItem>
</Stepper>
---
## Implementation Guide
### 1. Handling the Redirect
When your application receives the `oauth_redirect` response, you must open this URL in the user's browser.
<Note type="note" title="Security Check">
Always verify the `state` parameter when the user returns to your application to prevent CSRF attacks.
</Note>
### 2. Processing the Callback
Your application needs a callback route (e.g., `/admin.php?page=my-plugin&action=callback`). This URL must be provided in the initial `return_url` parameter.
The callback will receive:
* `activation_token`: The token needed to complete activation
* `license_key`: The license key being activated
* `nonce`: Random standard nonce for verification
### 3. Completing Activation
Once you have the `activation_token`, compare the `state` (if you stored it) and make the final request.
```javascript
const response = await fetch('https://api.woonoow.com/woonoow/v1/licenses/activate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
license_key: licenseKey,
activation_token: urlParams.get('activation_token')
})
});
const data = await response.json();
if (data.success) {
console.log('License Activated!', data);
}
```

60
docs/marketing/coupons.mdx Normal file
View File

@@ -0,0 +1,60 @@
---
title: Coupons
description: Create discount codes to boost sales and reward customers.
---
Coupons are a powerful way to run sales, recover abandoned carts, and reward loyalty. WooNooW provides a flexible coupon system compatible with standard WooCommerce logic.
![Coupons List](/images/docs/marketing/coupons-list.png)
## Managing Coupons
Navigate to **Marketing > Coupons** to see all active and expired discount codes.
The list view shows:
* **Code**: The text customers enter at checkout.
* **Type**: e.g., Percentage or Fixed Amount.
* **Amount**: The value of the discount.
* **Usage**: How many times the coupon has been used compared to its limit.
## Applying Coupons
### 1. Manual Entry
Customers can enter the code in the "Coupon Code" field on the Cart or Checkout page.
### 2. Via URL (Auto-Apply)
You can send customers a direct link that automatically applies the coupon and adds it to their session.
Format: `https://yourstore.com/shop?coupon=CODE` (or `?apply_coupon=CODE`)
Example: `https://example.com/shop?coupon=SUMMER2026`
> [!TIP]
> This is perfect for [Newsletter Campaigns](/docs/marketing/newsletter). Use this link in your email buttons (e.g., "Shop Now & Save 20%") to boost conversion rates.
## Creating a Coupon
Click **New Coupon** to create a promotion.
![Create Coupon](/images/docs/marketing/coupon-create.png)
### General Settings
1. **Code**: (Required) Make it memorable (e.g., `SUMMER2026`).
2. **Description**: Internal note about the campaign.
3. **Discount Type**:
* **Percentage**: Takes a % off the total cart (e.g., 20%).
* **Fixed Cart Discount**: Removes a specific amount from the whole cart (e.g., $10 off).
* **Fixed Product Discount**: Disounts specific items only.
4. **Expiry Date**: Automatically disable the coupon after this date.
### Restrictions & Limits
Use the tabs on the left to add rules:
* **Usage Limits**:
* **Per Coupon**: Total number of times this code can be used.
* **Per User**: Limit how many times a single customer can use it.
* **Minimum/Maximum Spend**: Define the order value range for the coupon to be valid.
* **Conditions**:
* **Individual Use**: Prevent using this coupon with other offers.
* **Exclude Sale Items**: Do not apply discount if items are already on sale.
* **Product/Category Restrictions**: Whitelist or blacklist specific items or categories.

14
docs/marketing/index.mdx Normal file
View File

@@ -0,0 +1,14 @@
---
title: Marketing Suite
description: Grow your business with built-in tools.
---
WooNooW comes with a powerful suite of marketing tools to help you retain customers and increase sales.
## Features
* **[Newsletter](/docs/marketing/newsletter)**: Create campaigns and manage subscribers directly from your dashboard.
* **[Coupons](/docs/marketing/coupons)**: Create smart coupons and automatic discounts.
* **[Wishlist](/docs/marketing/wishlist)**: Let customers save their favorite items for later.

49
docs/marketing/newsletter.mdx Normal file
View File

@@ -0,0 +1,49 @@
---
title: Newsletter
description: Manage subscribers and send email campaigns directly from your store.
---
WooNooW includes a built-in newsletter system, allowing you to build your audience and engage customers without third-party services.
![Newsletter Dashboard](/images/docs/marketing/newsletter-list.png)
## Managing Subscribers
The **Subscribers** tab displays your entire audience list.
* **Status**: Quickly see if a user is `active` or `unsubscribed`.
* **Source**: Identify if the subscriber is a registered WordPress user or a guest.
* **Actions**: Use the menu to manually unsubscribe or delete users.
### Collecting Emails
Subscribers are automatically added via:
1. **Checkout Opt-in**: Customers can subscribe while placing an order.
2. **[Footer Form](/docs/builder/header-footer#newsletter-integration)**: Use the built-in newsletter block in your store footer.
3. **Popups**: (If enabled) Capture emails via exit-intent popups.
## Creating Campaigns
Navigate to the **Campaigns** tab or click **New Campaign** to start composing an email.
![Create Campaign](/images/docs/marketing/campaign-create.png)
### Campaign Settings
1. **Title**: Internal name for your reference (e.g., "Holiday Sale 2026").
2. **Subject**: The subject line appearing in customers' inboxes. Use emojis to boost open rates! 🎄
### Email Builder
The visual editor allows you to format your message with rich text, links, and images.
> [!TIP]
> **Use Variables**
> Personalize your emails using shortcodes like `{customer_name}` to automatically insert the recipient's first name.
## Sending Process
Once your campaign is ready, you can:
* **Send Test**: Send a preview to your admin email address.
* **Schedule**: Pick a future date and time for delivery.
* **Send Now**: Immediately blast the campaign to all active subscribers.
WooNooW handles the sending queue in the background to prevent server timeouts.

39
docs/marketing/wishlist.mdx Normal file
View File

@@ -0,0 +1,39 @@
---
title: Wishlist
description: Allow customers to save products for later purchasing.
---
The **Wishlist** module allows customers to save their favorite products to a dedicated list, increasing retention and future purchases.
## Overview
A wishlist provides a way for shoppers to create personalized collections of products they want to buy and save them for future reference.
### Key Features
* **Guest Wishlists**: Allow non-logged-in users to save items (stored in their browser).
* **User Integration**: Logged-in users' wishlists are saved to their account.
* **One-Click Add**: Customers can move items from wishlist to cart instantly.
## Configuration
To access Wishlist settings, go to **Settings > Modules > Wishlist**.
![Wishlist Settings](/assets/screenshots/wishlist_settings_screenshot.png)
### General Settings
* **Enable Guest Wishlists**: If enabled, guests can add items to a wishlist which is stored in their browser's local storage. If disabled, users must log in to use the wishlist.
* **Show Icon in Header**: displays a heart icon with a counter in the site header.
* **Max Items Per Wishlist**: Set a limit on how many items can be saved (Set to `0` for unlimited).
* **Show "Add to Cart"**: Display a direct add-to-cart button next to each item in the wishlist view.
## Usage
### For Customers
1. **Adding Items**: Click the Heart icon on any product card or product page.
2. **Viewing Wishlist**: Click the Heart icon in the header or visit `/wishlist`.
3. **Managing**: Removing items is done by clicking the Heart icon again or the "Remove" button in the list.
### Future Features (Coming Soon)
* **Sharing**: Ability to share public wishlist links.
* **Back in Stock**: Auto-notifications for saved items.
* **Multiple Lists**: Create detailed lists (e.g., "Birthday", "Holiday").

39
docs/resources/changelog.mdx Normal file
View File

@@ -0,0 +1,39 @@
---
title: Changelog
description: Updates and version history for WooNooW Plugin
---
Track all updates, new features, bug fixes, and improvements for WooNooW Plugin.
## Version 1.0.0 (Initial Release)
**Release Date:** February 2026
### 🎉 Features
- **Full WooCommerce Enhancement Suite** - Complete storefront modernization
- **Admin SPA** - Modern React-based admin dashboard
- **Customer SPA** - Fast, mobile-first shopping experience
- **Page Builder** - Visual drag-and-drop page creation
- **Licensing Module** - Sell software licenses with activation management
- **Software Distribution** - Distribute updates for WordPress plugins/themes
- **Subscription Module** - Recurring billing and subscription management
- **Newsletter Module** - Email marketing integration
- **Wishlist Module** - Customer wishlists and save-for-later
- **RajaOngkir Integration** - Indonesia shipping rates
### 🛠️ Core Components
- Visual Editor with live preview
- Header & Footer builder
- Dynamic section components (Hero, Features, Testimonials, etc.)
- Appearance customization (colors, typography, layouts)
- Email notification system
- Security settings (2FA, rate limiting)
### 📦 Developer Tools
- REST API endpoints
- Hook & filter system
- Addon bridge architecture
- React component integration

114
docs/resources/faq.mdx Normal file
View File

@@ -0,0 +1,114 @@
---
title: Frequently Asked Questions
description: Quick answers to common questions about WooNooW
date: 2024-01-31
---
## General
<AccordionGroup>
<Accordion title="What is WooNooW?">
WooNooW is a WooCommerce plugin that transforms your store into a modern Single Page Application (SPA). It provides instant page loads, a beautiful UI, and seamless shopping experience.
</Accordion>
<Accordion title="Do I need WooCommerce?">
Yes. WooNooW is an enhancement layer for WooCommerce. You need WooCommerce installed and activated.
</Accordion>
<Accordion title="Will WooNooW affect my existing products?">
No. WooNooW reads from WooCommerce. Your products, orders, and settings remain untouched.
</Accordion>
</AccordionGroup>
---
## SPA Mode
<AccordionGroup>
<Accordion title="What's the difference between Full and Disabled mode?">
| Mode | Behavior |
|------|----------|
| **Full** | All WooCommerce pages redirect to SPA. Modern, fast experience. |
| **Disabled** | WooCommerce pages use native templates. WooNooW admin still works. |
</Accordion>
<Accordion title="Can I switch modes anytime?">
Yes. Go to **WooNooW → Appearance → General** and change the SPA Mode. Changes take effect immediately.
</Accordion>
<Accordion title="Which mode should I use?">
- **Full**: For the best customer experience with instant loads
- **Disabled**: If you have theme customizations you want to keep
</Accordion>
</AccordionGroup>
---
## Compatibility
<AccordionGroup>
<Accordion title="Does WooNooW work with my theme?">
WooNooW's SPA is independent of your WordPress theme. In Full mode, the SPA uses its own styling. Your theme affects the rest of your site normally.
</Accordion>
<Accordion title="Does WooNooW work with page builders?">
The SPA pages are self-contained. Page builders work on other pages of your site.
</Accordion>
<Accordion title="Which payment gateways are supported?">
WooNooW supports all WooCommerce-compatible payment gateways:
- PayPal
- Stripe
- Bank Transfer (BACS)
- Cash on Delivery
- And more...
</Accordion>
</AccordionGroup>
---
## SEO
<AccordionGroup>
<Accordion title="Is WooNooW SEO-friendly?">
Yes. WooNooW uses:
- Clean URLs (`/store/product/product-name`)
- Dynamic meta tags for social sharing
- Proper redirects (302) from WooCommerce URLs
</Accordion>
<Accordion title="What about my existing SEO?">
WooCommerce URLs remain the indexed source. WooNooW redirects users to the SPA but preserves SEO value.
</Accordion>
<Accordion title="Will my product pages be indexed?">
Yes. Search engines index the WooCommerce URLs. When users click from search results, they're redirected to the fast SPA experience.
</Accordion>
</AccordionGroup>
---
## Performance
<AccordionGroup>
<Accordion title="Is WooNooW faster than regular WooCommerce?">
Yes, for navigation. After the initial load, page transitions are instant because the SPA doesn't reload the entire page.
</Accordion>
<Accordion title="Will WooNooW slow down my site?">
The initial load is similar to regular WooCommerce. Subsequent navigation is much faster.
</Accordion>
<Accordion title="Does WooNooW work with caching?">
Yes. Use page caching and object caching for best results.
</Accordion>
</AccordionGroup>
---
## Customization
<AccordionGroup>
<Accordion title="Can I customize colors and fonts?">
Yes. Go to **WooNooW → Appearance** to customize:
- Primary, secondary, and accent colors
- Body and heading fonts
- Logo and layout options
</Accordion>
<Accordion title="Can I add custom CSS?">
Currently, use your theme's Additional CSS feature. A custom CSS field may be added in future versions.
</Accordion>
<Accordion title="Can I modify the SPA templates?">
The SPA is built with React. Advanced customizations require development knowledge.
</Accordion>
</AccordionGroup>

198
docs/resources/troubleshooting.mdx Normal file
View File

@@ -0,0 +1,198 @@
---
title: Troubleshooting
description: Common issues and their solutions
date: 2024-01-31
---
## Blank Pages
WooCommerce pages (shop, cart, checkout) show blank content.
<div className="pl-4">
<Stepper>
<StepperItem title="Check SPA Mode Setting">
- Go to **WooNooW → Appearance → General**
- Ensure **SPA Mode** is set to "Full"
- If you want native WooCommerce, set to "Disabled"
</StepperItem>
<StepperItem title="Flush Permalinks">
- Go to **Settings → Permalinks**
- Click **Save Changes** (no changes needed)
- This refreshes rewrite rules
</StepperItem>
<StepperItem title="Clear Cache">
- If using a caching plugin:
- Clear page cache
- Clear object cache
- Purge CDN cache (if applicable)
</StepperItem>
</Stepper>
</div>
---
## 404 Errors on SPA Routes
Visiting `/store/shop` or `/store/product/...` shows a 404 error.
<div className="pl-4">
<Stepper>
<StepperItem title="Flush Permalinks">
- Go to **Settings → Permalinks**
- Click **Save Changes**
</StepperItem>
<StepperItem title="Check Store Page Exists">
- Go to **Pages**
- Verify "Store" page exists and is published
- The page should contain `[woonoow_spa]` shortcode
</StepperItem>
<StepperItem title="Check SPA Page Setting">
- Go to **WooNooW → Appearance → General**
- Ensure **SPA Page** is set to the Store page
</StepperItem>
</Stepper>
</div>
---
## Product Images Not Loading
Products show placeholder images instead of actual images.
<div className="pl-4">
<Stepper>
<StepperItem title="Regenerate Thumbnails">
- Install "Regenerate Thumbnails" plugin
- Run regeneration for all images
</StepperItem>
<StepperItem title="Check Image URLs">
- Ensure images have valid URLs
- Check for mixed content (HTTP vs HTTPS)
</StepperItem>
</Stepper>
</div>
---
## Slow Performance
SPA feels slow or laggy.
<div className="pl-4">
<Stepper>
<StepperItem title="Enable Caching">
- Install a caching plugin (WP Super Cache, W3 Total Cache)
- Enable object caching (Redis/Memcached)
</StepperItem>
<StepperItem title="Optimize Images">
- Use WebP format
- Compress images before upload
- Use lazy loading
</StepperItem>
<StepperItem title="Check Server Resources">
- Upgrade hosting if on shared hosting
- Consider VPS or managed WordPress hosting
</StepperItem>
</Stepper>
</div>
---
## Checkout Not Working
Checkout page won't load or payment fails.
<div className="pl-4">
<Stepper>
<StepperItem title="Check Payment Gateway">
- Go to **WooCommerce → Settings → Payments**
- Verify payment method is enabled
- Check API credentials
</StepperItem>
<StepperItem title="Check SSL Certificate">
- Checkout requires HTTPS
- Verify SSL is properly installed
</StepperItem>
<StepperItem title="Check for JavaScript Errors">
- Open browser Developer Tools (F12)
- Check Console for errors
- Look for blocked scripts
</StepperItem>
</Stepper>
</div>
---
## Emails Not Sending
Order confirmation emails not being received.
<div className="pl-4">
<Stepper>
<StepperItem title="Check Email Settings">
- Go to **WooNooW → Settings → Notifications**
- Verify email types are enabled
</StepperItem>
<StepperItem title="Check WordPress Email">
- Test with a plugin like "Check & Log Email"
- Consider using SMTP plugin (WP Mail SMTP)
</StepperItem>
<StepperItem title="Check Spam Folder">
- Emails may be in recipient's spam folder
- Add sender to whitelist
</StepperItem>
</Stepper>
</div>
---
## Plugin Conflicts
WooNooW doesn't work after installing another plugin.
<div className="pl-4">
<Stepper>
<StepperItem title="Steps to Diagnose">
- Deactivate other plugins one by one
- Switch to default theme (Twenty Twenty-Three)
- Check error logs in `wp-content/debug.log`
</StepperItem>
<StepperItem title="Check WordPress Email">
- Test with a plugin like "Check & Log Email"
- Consider using SMTP plugin (WP Mail SMTP)
</StepperItem>
<StepperItem title="Common Conflicting Plugins">
- Other WooCommerce template overrides
- Page builder plugins (sometimes)
- Heavy caching plugins (misconfigured)
</StepperItem>
</Stepper>
</div>
---
## Getting More Help
If you can't resolve the issue:
<div className="pl-4">
<Stepper>
<StepperItem title="Collect Information">
- WordPress version
- WooCommerce version
- WooNooW version
- PHP version
- Error messages (from debug.log)
</StepperItem>
<StepperItem title="Enable Debug Mode">
- Add to `wp-config.php`:
```php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
```
</StepperItem>
<StepperItem title="Contact Support">
- Provide the collected information for faster resolution.
</StepperItem>
</Stepper>
</div>

33
docs/store/customers.mdx Normal file
View File

@@ -0,0 +1,33 @@
---
title: Customers
description: VIP classification and metrics.
---
Know who buys from you.
## Customer Overview
Navigate to **Store > Customers** to view your customer database. The table provides a quick view of:
- **Name & Email**: Contact details.
- **Total Spend**: Lifetime value of the customer.
- **Orders**: Number of orders placed.
- **Last Seen**: Date of last activity.
## VIP Classification
WooNooW automatically tags customers based on their spending habits to help you identify high-value clients.
### Tiers
- **VIP**: Customers whose total spend exceeds the VIP threshold (configurable in Settings). These are your top 1% or 5% of customers.
- **Recurring**: Customers who have placed more than one order but haven't reached VIP status yet.
- **New**: Customers with only a single purchase.
- **At Risk**: High-value customers who haven't purchased in a long time (e.g., > 90 days).
## Actions
Click on a customer to view their detailed profile, including:
- **Order History**: Full list of past purchases.
- **Notes**: Private admin notes about the customer.
- **Edit Details**: Update shipping/billing addresses manually.
### Segmentation
You can use these classifications to segment your [Newsletter](/docs/marketing/newsletter) campaigns. For example, send a special "Thank You" coupon exclusively to your **VIP** segment.

14
docs/store/index.mdx Normal file
View File

@@ -0,0 +1,14 @@
---
title: Store Management
description: Manage your daily operations.
---
The Store Management section allows you to handle day-to-day operations efficiently.
## Sections
* **[Orders](/docs/store/orders)**: View and process customer orders with a modern interface.
* **[My Customers](/docs/store/customers)**: Manage your customer base and assign VIP statuses.
* **[Products](/docs/store/products)**: Quick overview and management of your catalog.

18
docs/store/orders.mdx Normal file
View File

@@ -0,0 +1,18 @@
---
title: Orders
description: Processing transactions.
---
View and manage orders in **Store Management > Orders**.
## The Order Table
A modern, real-time view of your sales.
* **Status Filters**: Quickly see what needs processing.
* **Quick Actions**: Print invoices or mark as shipped directly from the list.
## Order Details
Clicking an order reveals the deep dive view:
* **Timeline**: See exactly when payment happened and emails were sent.
* **Edit Items**: Modify the order contents before fulfillment.

17
docs/store/products.mdx Normal file
View File

@@ -0,0 +1,17 @@
---
title: Products
description: Managing your catalog.
---
WooNooW enhances the standard WooCommerce product management.
## Quick Edit
Update prices and stock levels directly from the list view without opening each product.
## Types
We support all standard types:
* **Simple Product**
* **Variable Product**
* **Digital/Downloadable**

48
docs/store/subscriptions.mdx Normal file
View File

@@ -0,0 +1,48 @@
---
title: Subscriptions Guide
description: Configuring and managing recurring payments.
---
WooNooW's Subscriptions module seamlessly integrates with your store, enabling recurring revenue streams for your products or services.
## Setup Requirements
To use Subscriptions, ensure:
1. The **Subscriptions** module is toggled ON under **WooNooW > Settings > Modules**.
2. Your payment gateway supports tokenization / recurring payments (e.g., Stripe, PayPal).
## Creating a Subscription Product
1. Go to **Products > Add New** in WordPress.
2. In the Product Data dropdown, select **Simple Subscription** or **Variable Subscription**.
3. Configure the billing schedule:
- **Subscription Price:** The recurring amount (e.g., $15).
- **Billing Interval/Period:** How often they are charged (e.g., every 1 month).
- **Expire After:** When the subscription automatically ends (leave empty for "Never expire").
- **Sign-up Fee:** Optional one-time fee added to the first payment.
- **Free Trial:** Offer an initial period at no cost (e.g., 14 days).
4. Publish the product.
## Managing Subscriptions (Admin)
Store owners can view and manage all active, paused, or cancelled subscriptions directly from the Admin SPA.
1. Navigate to **Store > Subscriptions**.
2. Click on any Subscription ID to view details.
3. From the detail view, you can:
- **Pause** an active subscription.
- **Cancel** a subscription.
- **Change Next Payment Date**.
- **Process Renewal** manually.
## Customer Experience
When a customer purchases a subscription, they gain access to a self-service dashboard in their account:
1. Customers navigate to **My Account > Subscriptions**.
2. They can view the status, next payment date, and associated orders.
3. They have full autonomy to actions like **Pause**, **Resume**, or **Cancel** their own subscriptions based on the permissions you configure in the module settings.
4. If a payment fails, customers will see a clear **Pay Now** button to update their billing details.
## Automated Emails
The notification system automatically handles subscription lifecycle events:
- **New Subscription:** Welcome email for the recurring plan.
- **Renewal:** Receipt for a successful periodic charge.
- **Failed Renewal:** Action required notification to update payment info.
- **Cancelled/Expired:** Confirmation of plan termination.
You can customize these templates under **Settings > Notifications**.