SPA Mode

What is SPA Mode?

SPA Mode controls how WooNooW handles your WooCommerce storefront. It determines whether visitors experience the lightning-fast React Single Page Application (SPA) or traditional WordPress/WooCommerce server-rendered PHP templates.

Configure your mode under WooNooW → Appearance → General.

Available Modes

graph TD
    A[Incoming Request] --> B{SPA Mode Setting}
    B -->|Full Mode| C[All Store Routes Handled by React SPA]
    B -->|Checkout Only Mode| D[Only /checkout Handled by React SPA - Store Uses Theme PHP]
    B -->|Disabled| E[Standard WooCommerce PHP Templates]

1. Full SPA Mode (Recommended)

All storefront and commerce routes run inside the React single-page application.

• Instant Transitions: Browsing between landing pages, product details, cart, and checkout occurs without full page refreshes.
• Full SPA Does Not Force a Shop Catalog: You can run Full SPA mode exclusively for custom landing pages, brand stories, and sales funnels. There is no requirement to expose a /shop grid or product archive.
• Best For: Direct sales funnels, modern e-commerce brands, headless-style storefronts, and mobile-first experiences.

2. Checkout Only Mode (checkout_only)

The storefront runs on your standard WordPress theme; only checkout transitions into the SPA.

• Targeted Speed: Visitors browse your existing WordPress theme pages (or page builder layouts from Elementor/Divi). When they click to checkout, WooNooW mounts the reactive checkout interface.
• Not an Automatic Buy: checkout_only mode does not mean purchases happen automatically. Customers must still add items to their cart or trigger a Buy Now intent to be routed to /checkout.
• Best For: Stores with highly customized WooCommerce product templates or legacy theme integrations that only need a faster checkout.

3. Disabled Mode

WooCommerce pages render using native theme PHP templates. WooNooW admin features, licensing, and backend order automations continue to function, but the customer SPA is inactive.

Frontpage vs SPA Entry vs SPA Landing

When deploying Full SPA mode on your store's root domain (/), understand the distinction between these three configuration layers:

flowchart TD
    subgraph WP[1. WordPress Core]
        A["Settings: Reading (page_on_front = Home)"]
    end
    subgraph WN_Entry[2. WooNooW Appearance]
        B["Appearance: General (SPA Entry Page = Home)"]
    end
    subgraph WN_Landing[3. WooNooW Page Editor]
        C["Page Settings (Set as Landing Page = true)"]
    end

    A -->|Enables root route interception| Router[Customer SPA Router]
    B -->|Mounts React SPA bundle| Router
    C -->|Renders default root view| Router

1. WordPress Reading Frontpage (page_on_front)

• Located in Settings → Reading.
• Determines which static WordPress page serves root requests (/).

2. SPA Entry Page (spa_page)

• Located in WooNooW → Appearance → General.
• Specifies where the customer SPA bundle bootstraps.
• Root Route Requirement: When running Full SPA mode for root storefront routes (/), the SPA Entry page must be set as your WordPress homepage (page_on_front). This ensures requests to /, /cart, /checkout, and account routes are intercepted and served by the SPA runtime.

3. SPA Landing Page

• Located in the Visual Page Editor under Page Settings → Set as Landing Page.
• Designates which dynamic page created in WooNooW is rendered as the primary landing screen inside the SPA router.

URL Structure Comparison

Related Documentation

• AI Frontpage Guide — Complete walkthrough from AI prompt to published frontpage.
• Two-Product Sales Funnel — Direct purchasing without catalog navigation.
• Checkout Feature Guide — Dynamic gateway behaviors and lifecycle.