refactor: Migrate documentation content, rebuild UI components, and update core architecture.
This commit is contained in:
261
docs/configuration/email.mdx
Normal file
261
docs/configuration/email.mdx
Normal 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.
|
||||
Reference in New Issue
Block a user