• Docs
  • Builder
  • Sections

Section Components

Complete catalog of all 17 native sections available in the WooNooW Visual Page Editor.

Overview

WooNooW pages are constructed from modular, responsive Sections. Each section is backed by a strict schema defined in the core engine (admin-spa/src/routes/Appearance/Pages/schema/sectionSchema.ts), providing live previewing, style controls, and real-time WooCommerce data binding. The 17 canonical section types include specialized storefront components and html-embed as the canonical raw HTML escape hatch.

The 17 Native Sections

1. Hero (hero)

High-impact headline banner with supporting copy, media backgrounds, and call-to-action buttons.

  • Props:
    • title (text): Primary headline.
    • subtitle (text): Subheadline copy.
    • image (image URL): Background or featured image.
    • cta_text (text): Primary button label.
    • cta_url (url): Button destination URL.
  • Layouts: default (Centered), hero-left-image (Image Left), hero-right-image (Image Right).
  • Default Width: full.

2. Content Block (content)

Versatile container for long-form editorial copy, rich text, about sections, or policy text.

  • Props:
    • content (rte): Rich text / HTML content.
    • cta_text (text): Optional button text.
    • cta_url (url): Optional button link.
  • Layouts: default (Full Width), narrow, medium.
  • Default Width: full.

3. Image + Text (image-text)

Alternating two-column block pairing visual media with structured text.

  • Props:
    • title (text): Section heading.
    • text (textarea): Body description.
    • image (image URL): Image asset.
    • cta_text (text): Button text.
    • cta_url (url): Button URL.
  • Layouts: image-left, image-right.
  • Default Width: contained.

4. Feature Grid (feature-grid)

Structured column grid for highlighting product capabilities, guarantees, or services.

  • Props:
    • heading (text): Section header.
    • subtitle (text): Subtitle description.
    • items (array of objects): Repeater cards.
  • Repeater Item Shape:
    json
    {
  "title": "Fast Shipping",
  "description": "Dispatched within 24 hours.",
  "icon": "Truck"
}
  • Layouts: grid-2 (2 Columns), grid-3 (3 Columns), grid-4 (4 Columns).
  • Default Width: contained.

5. CTA Banner (cta-banner)

High-converting horizontal banner designed for action prompts and promotions.

  • Props:
    • title (text): Main banner title.
    • text (text): Secondary description.
    • button_text (text): Button label (CRITICAL: use button_text, not cta_text).
    • button_url (url): Button target URL (CRITICAL: use button_url, not cta_url).
  • Default Width: full.

6. Contact Form (contact-form)

Integrated inquiry and lead capture form submitting directly to store settings or external webhooks.

  • Props:
    • title (text): Form heading.
    • webhook_url (url): Optional endpoint URL.
    • redirect_url (url): Optional destination URL after successful submission.
    • fields (array of objects): Array of form input descriptors.
  • Repeater Item Shape:
    json
    {
  "name": "email",
  "label": "Your Email",
  "type": "email",
  "required": true
}
  • Default Width: contained.

7. Bento Grid (bento-category-grid)

Asymmetrical bento-box grid for highlighting categories, featured collections, or key landing URLs.

  • Props:
    • title (text): Section title.
    • subtitle (text): Subtitle.
    • items (array of objects): Array of bento cards (CRITICAL: use items, not categories).
  • Repeater Item Shape:
    json
    {
  "title": "Summer Collection",
  "subtitle": "Discover new styles",
  "image": "https://example.com/banner.jpg",
  "link": "/store/shop",
  "backgroundColor": "#1e293b",
  "size": "large"
}
  • Default Width: full.

Dynamic horizontal slider fetching live products from your WooCommerce catalog.

  • Props:
    • title (text): Section title.
    • subtitle (text): Subtitle.
    • cta_text (text): Trailing link text.
    • cta_url (url): Trailing link URL.
    • source (text): Query filter (trending, new, on_sale, featured).
    • limit (text): Maximum products to fetch (e.g. "8").
  • Layouts: trending, new, on_sale, featured.
  • Default Width: full.

9. Shoppable Image (shoppable-image)

Interactive lifestyle image with clickable hotspot pins linking directly to products.

  • Props:
    • title (text): Section title.
    • subtitle (text): Subtitle.
    • image (image URL): Primary photography.
    • alt (text): Alt text.
    • hotspots (array of objects): Hotspot pin positions.
  • Repeater Item Shape:
    json
    {
  "product_id": 123,
  "x": 42,
  "y": 65,
  "label": "Desk Lamp"
}
  • Default Width: full.

10. Testimonials (testimonials)

Social proof card grid or slider presenting customer reviews and star ratings.

  • Props:
    • heading (text): Title.
    • subtitle (text): Subtitle.
    • items (array of objects): Review cards.
  • Repeater Item Shape:
    json
    {
  "quote": "The best purchase I made this year.",
  "author": "Jane Doe",
  "role": "Verified Buyer",
  "rating": 5,
  "avatar": "https://example.com/avatar.jpg"
}
  • Layouts: grid-3 (3 Columns), grid-2 (2 Columns), carousel (Slider).
  • Default Width: contained.

11. Pricing Table (pricing-table)

Side-by-side plan comparison cards with feature checkmarks and highlight badges.

  • Props:
    • heading (text): Title.
    • subtitle (text): Subtitle.
    • items (array of objects): Plan cards.
  • Repeater Item Shape:
    json
    {
  "planName": "Pro Edition",
  "price": "$99",
  "period": "/year",
  "featured": true,
  "features": ["All Core Features", "Priority Support", "Unlimited Licenses"],
  "button_text": "Select Plan",
  "button_url": "#"
}
  • Layouts: grid-3 (3 Columns), grid-2 (2 Columns).
  • Default Width: contained.

12. FAQ Accordion (faq)

Collapsible accordion list resolving customer questions and objections.

  • Props:
    • heading (text): Section title.
    • subtitle (text): Subtitle.
    • items (array of objects): Question and answer pairs.
  • Repeater Item Shape:
    json
    {
  "question": "What is the return policy?",
  "answer": "We offer a 30-day money-back guarantee with zero restocking fees."
}
  • Layouts: single-column, two-column.
  • Default Width: contained.

13. Logo Bar (logo-bar)

Horizontal bar displaying client logos, media mentions, or trust seals.

  • Props:
    • heading (text): Optional title.
    • items (array of objects): Logo entries.
  • Repeater Item Shape:
    json
    {
  "name": "Partner Brand",
  "image": "https://example.com/logo.png",
  "url": "https://partner.com"
}
  • Layouts: static-row, scrolling-marquee.
  • Default Width: full.

14. Stats Counter (stats-counter)

High-impact metric display showcasing key business metrics and figures.

  • Props:
    • heading (text): Section title.
    • items (array of objects): Metric entries.
  • Repeater Item Shape:
    json
    {
  "value": "99.9%",
  "label": "Uptime",
  "prefix": "",
  "suffix": ""
}
  • Layouts: grid-4 (4 Columns), grid-3 (3 Columns).
  • Default Width: contained.

15. Marquee Banner (marquee-banner)

Continuous ticker tape scrolling announcements across the screen.

  • Props:
    • text (text): Banner copy.
    • separator (text): Divider symbol (e.g. * or •).
    • speed (text): Scroll duration in seconds (e.g. "20").
  • Default Width: full.

16. Custom HTML (html-embed)

Fallback container for custom markup when native components cannot fulfill a specialized requirement.

  • Props:
    • html (textarea): Valid HTML markup.
  • Validation Rules: Must start with a block container (<div> or <section>). All tags must be closed. Do not include <html> or <body> wrapper tags.
  • Default Width: full.

17. Purchase Offer (purchase-offer)

Direct-to-checkout purchasing block for a live WooCommerce product or variation.

  • Props:
    • product_id (integer, REQUIRED): Live WooCommerce product ID (positive integer $> 0$).
    • variation_id (integer, optional): Specific variation ID (default 0).
    • quantity (integer, optional): Units added to order (minimum 1, default 1).
    • cart_policy (enum, optional): 'replace' (replaces cart items for direct checkout) or 'append' (adds to existing cart).
    • button_text (text, optional): Action button text (default 'Buy now').
    • heading (text, optional): Custom title above the offer.
  • Layout Variants (layoutVariant in JSON): default, card, split.
  • Default Width: contained.
  • Authoritative Binding: Real-time prices, sale badges, currency symbols, and stock checks are queried live from WooCommerce REST APIs. In the editor canvas, an illustrative preview is displayed when no live product is preloaded, and the purchase button runs in read-only preview mode.

Last updated Sep 14, 2026