docs: add missing configuration pages and remove redundant H1 headers

This commit is contained in:
Dwindi Ramadhana
2026-02-05 22:51:45 +07:00
parent 0637bab4ea
commit 162d5384e2
43 changed files with 390 additions and 229 deletions

View File

@@ -21,7 +21,10 @@ export default function DocsBreadcrumb({ paths }: { paths: string[] }) {
<BreadcrumbSeparator />
<BreadcrumbItem>
{index < paths.length - 1 ? (
<BreadcrumbLink className="a">
<BreadcrumbLink
className="a"
href={`/docs/${paths.slice(0, index + 1).join("/")}`}
>
{toTitleCase(path)}
</BreadcrumbLink>
) : (

View File

@@ -25,7 +25,7 @@ export default function DocsMenu({ isSheet = false, className = "" }: DocsMenuPr
<li key={route.title + index}>
<SubLink
{...route}
href={`/docs${route.href}`}
href={`${route.href}`}
level={0}
isSheet={isSheet}
/>

View File

@@ -16,7 +16,7 @@ export default function Pagination({ pathname }: { pathname: string }) {
className:
"no-underline w-full flex flex-col pl-3 !py-8 !items-start",
})}
href={`/docs${res.prev.href}`}
href={`${res.prev.href}`}
>
<span className="flex items-center text-xs">
<ChevronLeftIcon className="w-[1rem] h-[1rem] mr-1" />
@@ -34,7 +34,7 @@ export default function Pagination({ pathname }: { pathname: string }) {
className:
"no-underline w-full flex flex-col pr-3 !py-8 !items-end",
})}
href={`/docs${res.next.href}`}
href={`${res.next.href}`}
>
<span className="flex items-center text-xs">
Next

View File

@@ -0,0 +1,44 @@
---
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 to configure them without any code.
## 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.

View File

@@ -3,7 +3,7 @@ title: Page Builder
description: Design your store visually.
---
# Page Builder
The WooNooW Page Builder allows you to create stunning, responsive pages without writing code.

View File

@@ -3,7 +3,7 @@ title: Section Components
description: Building blocks of your pages.
---
# Section Components
WooNooW includes a library of pre-designed sections.

View File

@@ -3,7 +3,7 @@ title: Special Pages
description: Customizing Shop and Checkout pages.
---
# Special 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.

View File

@@ -3,7 +3,7 @@ title: Visual Editor
description: Drag-and-drop your store into existence.
---
# Visual Editor
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.

View File

@@ -1,19 +0,0 @@
---
title: Appearance Settings
description: Colors and Typography.
---
# Appearance
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

View File

@@ -1,135 +1,19 @@
---
title: Appearance Settings
description: Customize the look and feel of your WooNooW store
date: 2024-01-31
description: Colors and Typography.
---
## Accessing Appearance Settings
Go to **WooNooW → Appearance** in the WordPress admin.
---
## General Settings
### Logo
Upload your store logo for display in the header.
- **Recommended size**: 200x60 pixels (width x height)
- **Formats**: PNG (transparent background recommended), SVG, JPG
- **Mobile**: Automatically resized for smaller screens
### SPA Page
Select which page hosts the WooNooW SPA. Default is "Store".
> **Note**: This page should contain the `[woonoow_spa]` shortcode.
### SPA Mode
Choose how WooNooW handles your store pages:
| Mode | Description |
|------|-------------|
| **Full** | All WooCommerce pages redirect to SPA |
| **Disabled** | Native WooCommerce templates are used |
---
Customize your brand without coding.
## Colors
### Primary Color
The main brand color used for:
- Buttons
- Links
- Active states
- Primary actions
**Default**: `#6366f1` (Indigo)
### Secondary Color
Secondary UI elements:
- Less prominent buttons
- Borders
- Subtle backgrounds
**Default**: `#64748b` (Slate)
### Accent Color
Highlight color for:
- Sale badges
- Notifications
- Call-to-action elements
**Default**: `#f59e0b` (Amber)
---
We use a smart palette system.
* **Primary**: Headlines and main buttons.
* **Secondary**: Subheadings and UI elements.
* **Accent**: Highlights and links.
## Typography
### Body Font
Font used for general text content.
**Options**: System fonts and Google Fonts
- Inter
- Open Sans
- Roboto
- Lato
- Poppins
- And more...
### Heading Font
Font used for titles and headings.
**Options**: Same as body fonts, plus:
- Cormorant Garamond (Serif option)
- Playfair Display
- Merriweather
### Font Sizes
Font sizes are responsive and adjust automatically based on screen size.
---
## Layout
### Container Width
Maximum width of the content area.
| Option | Width |
|--------|-------|
| Narrow | 1024px |
| Default | 1280px |
| Wide | 1536px |
| Full | 100% |
### Header Style
Configure the header appearance:
- **Fixed**: Stays at top when scrolling
- **Static**: Scrolls with page
### Product Grid
Columns in the shop page grid:
- Mobile: 1-2 columns
- Tablet: 2-3 columns
- Desktop: 3-4 columns
---
## Saving Changes
1. Make your changes
2. Click **Save Changes** button
3. Refresh your store page to see updates
> **Tip**: Open your store in another tab to preview changes quickly.
Choose from GDPR-compliant, locally hosted font pairings like:
* **Modern**: Inter
* **Editorial**: Playfair Display

View File

@@ -3,7 +3,7 @@ title: Email Settings
description: Transactional emails and SMTP.
---
# Email Settings
WooNooW replaces default WooCommerce emails with beautiful, responsive templates.

View File

@@ -3,7 +3,7 @@ title: General Settings
description: Core store settings.
---
# General Settings
Located in **Appearance > General**.

View File

@@ -3,7 +3,7 @@ title: Configuration
description: Configure every aspect of your store.
---
# Configuration
Fine-tune your store's behavior and appearance.

View File

@@ -3,7 +3,7 @@ title: Licensing
description: Activate your store.
---
# Licensing
To receive updates and support, you must activate your license key.

View File

@@ -0,0 +1,30 @@
---
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.
## 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.
### Developer
- **Custom CSS/JS**: Inject custom code without editing theme files.
- **Beta Features**: Early access to experimental features (use with caution).
## 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.

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.

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.

View File

@@ -4,7 +4,7 @@ description: Integrating third-party plugins with WooNooW
date: 2024-01-31
---
# Addon Bridge Pattern
## Philosophy

View File

@@ -3,7 +3,7 @@ title: Custom Notification Channels
description: Learn how to add custom notification channels like WhatsApp, SMS, or Telegram to WooNooW
---
# Custom Notification Channels
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.

View File

@@ -4,7 +4,7 @@ description: Integrating Addons usage with Module Registry
date: 2024-01-31
---
# Addon-Module Integration
## Vision

View File

@@ -4,7 +4,7 @@ description: Using React within WooNooW Addons
date: 2024-01-31
---
# Addon React Integration
## The Challenge

View File

@@ -0,0 +1,17 @@
---
title: Developer Guide
description: Extend and customize WooNooW.
---
## Core Concepts
WooNooW is built with extensibility in mind.
### [Addons System](/docs/developer/addons/module-integration)
Learn how to create custom modules that plug into the WooNooW ecosystem.
### [React Integration](/docs/developer/addons/react-integration)
Understand how we bridge PHP and React to create seamless admin interfaces.
### [API Reference](/docs/developer/api/licensing)
Detailed documentation of our REST API endpoints.

View File

@@ -3,7 +3,7 @@ title: Quick Setup Wizard
description: Get your store running in minutes.
---
# Quick Setup Wizard
The Quick Setup Wizard is the fastest way to configure your WooNooW store. It launches automatically when you first activate the plugin.

View File

@@ -1,13 +0,0 @@
---
title: Coupons
description: Smart discounts and promotions.
---
# Coupons
Go beyond standard WooCommerce coupons.
## Smart Features
* **Auto-Apply**: Apply coupons automatically when cart conditions are met.
* **Bulk Generation**: Generate thousands of unique codes for partners.
* **URL Coupons**: Create links that automatically apply a discount when clicked.

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.

View File

@@ -3,7 +3,7 @@ title: Marketing Suite
description: Grow your business with built-in tools.
---
# Marketing Suite
WooNooW comes with a powerful suite of marketing tools to help you retain customers and increase sales.

View File

@@ -1,20 +0,0 @@
---
title: Newsletter
description: Manage subscribers and campaigns.
---
# Newsletter
A complete email marketing solution built into your store.
## Subscribers
Automatically capture emails at checkout or via the footer form.
* **GDPR**: Includes double opt-in support.
* **Segmentation**: Tag subscribers based on purchase history.
## Campaigns
Send beautiful HTML emails to your list.
1. Go to **Marketing > Newsletter**.
2. Click **New Campaign**.
3. Use the Template Builder to design your email.
4. Schedule or send immediately.

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.

View File

@@ -1,13 +0,0 @@
---
title: Wishlist
description: Let customers save products.
---
# Wishlist
Enable the heart icon on your products.
## How it works
* **Guest Support**: Guests can save items (stored in cookies/local storage).
* **Account Sync**: When guests log in, their wishlist is saved to their account.
* **Sharing**: Customers can share their wishlist via social media or email.

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").

View File

@@ -1,16 +0,0 @@
---
title: Customers
description: VIP classification and metrics.
---
# Customer Management
Know who buys from you.
## VIP Classification
WooNooW automatically tags customers based on their spend.
* **VIP**: High spenders.
* **Regular**: Frequent buyers.
* **New**: First-time buyers.
You can use these tags to segment your [Newsletter](/docs/marketing/newsletter) campaigns.

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.

View File

@@ -3,7 +3,7 @@ title: Store Management
description: Manage your daily operations.
---
# Store Management
The Store Management section allows you to handle day-to-day operations efficiently.

View File

@@ -3,7 +3,7 @@ title: Orders
description: Processing transactions.
---
# Order Management
View and manage orders in **Store Management > Orders**.

View File

@@ -3,7 +3,7 @@ title: Products
description: Managing your catalog.
---
# Products
WooNooW enhances the standard WooCommerce product management.

View File

@@ -19,7 +19,7 @@
},
{
"title": "Developer Docs",
"href": "/docs/developer"
"href": "/docs/developer/overview"
},
{
"title": "Plugin Site",
@@ -139,6 +139,10 @@
{
"title": "Special Pages (Shop/Cart)",
"href": "/special-pages"
},
{
"title": "Header & Footer",
"href": "/header-footer"
}
]
},
@@ -185,13 +189,17 @@
{
"title": "Developer Guides",
"href": "/docs/developer",
"noLink": false,
"noLink": true,
"context": {
"icon": "Code",
"description": "Advanced Integration",
"title": "Dev"
},
"items": [
{
"title": "Overview",
"href": "/overview"
},
{
"title": "Custom Channels",
"href": "/addons/custom-channels"

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB