AI Frontpage Guide

Overview

WooNooW enables you to design complete storefront pages using AI-generated JSON layouts and import them directly into the native Visual Page Editor. This workflow bridges conversational AI generation with WooCommerce's authoritative product, inventory, and checkout engine.

flowchart LR
    A[AI Prompt & Layout JSON] --> B[Visual Page Editor Modal]
    B --> C[Validate & Append Sections]
    C --> D[Bind Real WooCommerce Product IDs]
    D --> E[Save in Editor]
    E --> F[Configure Homepage & SPA Landing]

Step 1: Generate Layout JSON with AI

To ensure your AI assistant outputs JSON that matches WooNooW's schema, supply the system prompt and specification found in WooNooW-AI-Knowledge.md. The Page Editor's Import AI Layout modal provides direct links to the documentation and an instant Copy AI Prompt button.

Key Rules for the AI Generator

• Pure JSON Only: Output must be 100% valid JSON without markdown conversational filler or comments (// or /* */). Comments break JSON.parse.
• Use Native Sections: Build using WooNooW's 17 native section types (hero, feature-grid, purchase-offer, testimonials, faq, etc.).
• Valid Property Names:
  • For cta-banner, use button_text and button_url (not cta_text or cta_url).
  • For bento-category-grid, use items (not categories).
• Real Positive Product IDs & Placeholders: Sections linking to products (especially purchase-offer) require positive integer product IDs (e.g. 123). The import validator rejects zero, negative numbers, or missing product IDs. Use labeled positive placeholders like 123 and 124 during generation and bind them to your published WooCommerce product IDs in the Page Editor Inspector.
• No Fake Prices or Transaction Scripts: Product prices, currencies, and stock availability are authoritative from WooCommerce at runtime. Do not ask AI to generate checkout scripts or hardcode static prices.

You can also use the ready-to-use Two-Product Salespage Example as a baseline.

Step 2: Open the Native Page Editor

The WooNooW Visual Page Editor runs directly inside your WordPress administration dashboard under WooNooW → Appearance → Pages.

Display Requirement

Warning: The Visual Page Editor requires a desktop viewport of 1280px or wider. The side-by-side inspector panel, responsive canvas controls, and section tree need sufficient horizontal space to edit layouts reliably.

1. Navigate to WooNooW → Appearance → Pages.
2. Create a new page (e.g. Home or Salespage) or select an existing page to edit.
3. Click Edit Page to launch the Visual Editor canvas.

Step 3: Import AI Layout JSON

In the Visual Page Editor top toolbar, click the Import AI Layout button.

sequenceDiagram
    actor Merchant
    participant Modal as Import AI Layout Modal
    participant Validator as aiLayoutImport.ts
    participant Canvas as Editor Canvas
    participant DB as WordPress Database

    Merchant->>Modal: Paste AI JSON
    Merchant->>Modal: Click "Import Layout"
    Modal->>Validator: parseAiLayoutImport(json)
    Validator-->>Modal: Validated Section Array
    Modal->>Canvas: APPEND sections to current page
    Note over Canvas: Canvas displays new blocks - Data is NOT saved yet!
    Merchant->>Canvas: Click "Save"
    Canvas->>DB: Persist page layout

Import Semantics & Safety Guarantees

• Import Appends: The importer appends sections to the currently active page. It does not delete or overwrite existing sections unless you delete them manually.
• No Automatic Page Creation: Importing JSON does not create a new WordPress page or alter database tables on its own.
• Manual Save Required: Changes exist only in the editor state until you click Save in the top bar. If you close the tab before saving, nothing is committed.

Step 4: Bind Real Products & Configure Offers

If your imported layout contains purchase-offer sections, connect them to your live WooCommerce products:

1. Click on the Purchase Offer section in the editor canvas or select it from the sidebar section tree.
2. In the inspector panel under Product & Offer Settings:
   • Select Product (Authoritative): Search your catalog by product title or SKU to bind the offer to your published WooCommerce product (replacing placeholder IDs like 123).
   • Preset Variation (Optional): If targeting a specific product variation, select it from the dropdown; otherwise leave as Customer selects at runtime.
   • Default Quantity: Set the initial purchase quantity (default: 1).
   • Cart Policy: Choose between:
     • replace (Recommended for sales funnels): Replaces prior cart items with this offer for direct 1-click checkout (with explicit confirmation if the cart already holds other items).
     • append: Adds this product alongside existing cart items.
   • Button Text: Customize the action label (e.g. "Claim Your Bundle").

Authoritative Live Price & Stock

Once a valid product_id is set, the section queries WooCommerce REST APIs live. The customer sees real-time pricing, currency symbols, and active sale discounts directly from your store catalog. In the editor canvas, an illustrative preview is displayed when no live product is preloaded.

Variable Products & The "Any" Attribute Rule

If your product is variable:

• If a variation attribute is configured as WooCommerce "Any" (unconstrained), WooNooW automatically resolves a non-empty allowed attribute selection (defaulting to the preset variation or first available option), which the buyer can review or adjust before clicking Buy.
• When using cart_policy: "replace" and the visitor already has items in their cart, the system asks for explicit confirmation (window.confirm) before replacing their cart contents.

Step 5: Publish as Frontpage & Set SPA Landing

To make your new page the public frontpage of your store, understand the three distinct settings involved:

Configuration Steps for Root Full SPA Stores

1. Navigate to WooNooW → Appearance → General and set SPA Entry Page to the page you edited (e.g. Home).
2. Navigate to WP Admin → Settings → Reading.
3. Under Your homepage displays, select A static page.
4. Set Homepage (page_on_front) to the EXACT SAME PAGE selected as the SPA Entry Page in step 1 (e.g. Home).
5. Open the page in the WooNooW Page Editor, open the Inspector panel under Page Settings, and toggle Set as Landing Page.
6. Save all settings.

Note (SEO Root Canonical Alignment): When SPA Entry, WordPress Reading page_on_front, and SPA Landing point to different pages, canonical URL alignment for search engine crawlers can diverge. For optimal search engine indexing and zero redirect friction, ensure ALL THREE settings point to the exact same page.

Next Steps

• Read the Two-Product Funnel Guide to optimize conversions without exposing a traditional shop catalog.
• Learn about Dynamic Payment Gateway Behaviors during checkout.
• Explore the full list of Section Components available in the editor.