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

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