68c3423f50
Phase 1: Core Documentation
- Created docs/ folder with 8 markdown documentation files
- Getting Started, Installation, Troubleshooting, FAQ
- Configuration docs (Appearance, SPA Mode)
- Feature docs (Shop, Checkout)
- PHP registry with filter hook for addon extensibility
Phase 2: Documentation Viewer
- DocsController.php with REST API endpoints
- GET /woonoow/v1/docs - List all docs (with addon hook)
- GET /woonoow/v1/docs/{slug} - Get document content
- Admin SPA /help route with sidebar navigation
- Markdown rendering with react-markdown
- Added Help & Docs to More page for mobile access
Filter Hook: woonoow_docs_registry
Addons can register their own documentation sections.
2.2 KiB
Appearance Settings
Customize the look and feel of your WooNooW store.
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 |
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)
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
- Make your changes
- Click Save Changes button
- Refresh your store page to see updates
Tip
: Open your store in another tab to preview changes quickly.