• Docs
  • Builder
  • Visual Editor

Visual Editor

Drag-and-drop store designer with real-time preview, AI layout import, and live WooCommerce data binding.

Overview

The WooNooW Visual Page Editor runs directly inside the WordPress dashboard under WooNooW → Appearance → Pages. It combines a live frontend preview with a dedicated design inspector, enabling store owners to craft high-converting pages without modifying template files.

Editor Interface

graph TD
    A["Top Toolbar: Device Toggle | AI Import | Page Settings | Save"] --> B["Inspector Panel: Content & Design Controls"]
    A --> C["Visual Canvas: Live Interactive Preview"]
    B -->|Binds Properties| C

1. The Canvas

The central area renders your page exactly as visitors see it.

  • Inline Element Selection: Click any section or element to reveal its controls in the inspector.
  • Preview Mode: Interactive components (such as carousels, tabs, and FAQ accordions) function naturally in preview mode. For safety, the Buy Now button on purchase-offer sections operates in read-only preview mode and does not modify the customer cart.

2. The Inspector Panel (Sidebar)

When you select a section, the inspector displays its configuration tabs:

  • Content Tab: Edit headlines, button labels, destination links, repeater items, and product IDs.
  • Design Tab: Adjust color schemes, container widths (full, contained, boxed), padding, and typography styles.

3. The Top Bar

  • Device Switcher: Toggle between Desktop, Tablet, and Mobile views to audit responsiveness.
  • Import AI Layout: Paste AI-generated JSON layouts into the active page.
  • Page Settings: Configure page title, URL slug, and SPA landing page status.
  • Save Changes: Persists your edits to the WordPress database.

Importing Layouts with AI

The Visual Editor includes an integrated AI importer powered by WooNooW's schema validator (aiLayoutImport.ts).

  1. In the top toolbar, click Import AI Layout.
  2. Click Copy AI Prompt to copy the system prompt and schema reference into your clipboard for your AI assistant (see WooNooW-AI-Knowledge.md).
  3. Paste the generated JSON into the modal.
  4. Click Import Layout.
sequenceDiagram
    participant User
    participant Importer as aiLayoutImport.ts
    participant State as Editor Canvas State
    participant Storage as WordPress DB

    User->>Importer: Submit AI JSON
    Importer->>Importer: Validate 17 section schemas & repeaters
    Importer->>State: APPEND validated sections to canvas
    Note over State: Content is active in editor, but not yet saved to DB!
    User->>Storage: Click "Save" in top bar
    Storage-->>User: Changes Published

Safety & Import Rules

  • Import Appends: The importer appends sections to the bottom of the current canvas. Existing sections are not overwritten unless you delete them manually.
  • Strict Validation: Invalid JSON syntax, unknown section types, or malformed repeater arrays trigger explicit error messages before anything is added.
  • Positive Product IDs: Sections linking to products (like purchase-offer) require positive integer product IDs.
  • Save Required: An import only modifies the in-memory editor canvas. You must click Save in the top bar to commit changes.

Page Settings & Landing Page Designation

Click the gear icon (Page Settings) in the top toolbar to access page-level settings:

  • Page Title: The internal name of the page in WordPress.
  • URL Slug: The public path (e.g. special-offer or black-friday).
  • Set as Landing Page: Toggling this designates this page as the default landing view within the Customer SPA.

Last updated Sep 14, 2026