WP Faro – Vibe-coding your way to a WooCommerce store

WordPress Faro Meetup · 29 May 2026 · Dave Lockie

Two AI approaches, one brand brief, one WooCommerce store. Everything you need to follow along or recreate the demo.

Today’s deck

Approach 1: Claude Code + WooCommerce for Claude

Three prompts. From a blank WordPress install to a working WooCommerce store, operated entirely through natural language via MCP.

Prompt 1 — Install WooCommerce stack

Install and activate the following plugins on this WordPress site
using WP-CLI:

1. WooCommerce (from wordpress.org)
2. WooCommerce for Claude (from GitHub)
3. WooPayments (from wordpress.org)
4. MailPoet (from wordpress.org)

After activation, create the standard WooCommerce pages (Shop, Cart,
Checkout, My Account). Then set up the WooCommerce for Claude MCP
connection so I can use MCP tools in future prompts.

Log progress to ./agent.log. Don't ask for confirmation, just do it.

Prompt 2 — Review brand brief and plan

Read the brand brief at ../../brand-bundle/brand-doc.md and review the
brand assets in ../../brand-bundle/. Based on the brief, plan a
WooCommerce store build for ChilliMango. Outline what products to
create, what categories and shipping zones to set up, and how to
configure the store identity. Present the plan, then wait for approval
before building. Log progress to ./agent.log.

Prompt 3 — Execute the build

Execute the store build plan. Use WooCommerce for Claude MCP tools for
all store operations -- products, categories, shipping zones, store
identity. Use WP-CLI for theme adjustments and any WordPress operations
not covered by MCP tools. Prefer official WooCommerce themes and
extensions. Log progress to ./agent.log. Don't ask for confirmation,
just build.

Approach 2: Bolt + Claude Code

Two steps. Bolt generates a complete WordPress block theme from the brand brief, then Claude Code installs it and builds the store.

Prompt 1 — Generate theme in Bolt

Paste this into bolt.new:

Design a WordPress WooCommerce block theme for ChilliMango, a
small-batch fermented hot sauce brand from the Algarve, Portugal.

Brand identity:
- One-liner: "Small-batch, garden-to-jar fermented hot sauces from a
  rural property in the Algarve. Hand-painted labels. One grower, one
  garden, one set of hands."
- Palette: Cream (#F5E6D3), Gold (#D4A574), Orange (#FF8C42), Deep red
  (#8B2635), Warm brown (#2A1F1A), Sage green (#7A8B6F)
- Typography: Vintage serif headings (Playfair Display or Cormorant),
  clean serif body (Lora or Libre Baskerville). No sans-serif body.
- Aesthetic: Vintage apothecary (1920s-1940s), hand-painted, lived-in.

Voice: First person, warm. "Ten bottles. From my garden. Yours
if you're quick."

Pages: Home (hero + story + signup), About, Shop (WooCommerce archive),
Single product (story + ingredients + batch info).

Products: Honey Monster Hot Sauce (250ml, EUR 22), Garden Chilli Salt
(100g, EUR 8), Heritage Seed Packets (EUR 5), Chilli-of-the-Month Box
(EUR 15).

Must be a valid WordPress block theme (theme.json, block templates,
block patterns). Works with WooCommerce. Prefer official WooCommerce
block markup. Mobile-first, warm, handmade. Not corporate.

Prompt 2 — Clone and build (in Claude Code)

Clone the ChilliMango WordPress block theme from
https://github.com/[your theme] into this directory.
Read the brand brief at ../../brand-bundle/brand-doc.md.

Step 1 -- Install plugins: Use WP-CLI to install and activate
WooCommerce, WooPayments, and MailPoet from wordpress.org. Create the
WooCommerce pages. Prefer official woocommerce.com extensions.
Step 2 -- Install theme: Copy the theme into the Studio themes
directory and activate it.
Step 3 -- Build the store: Create 4 products, categories, shipping
zones (Portugal + EU), and populate content the theme expects.
Step 4 -- Verify: Load the site, fix any PHP errors or visual issues.

Log progress to ./agent.log. Don't ask for confirmation, just do it.

Tools used

Claude Code

Anthropic’s agentic CLI for software engineering. Runs in your terminal, reads your codebase, executes commands. The orchestrator for both demos.

docs.anthropic.com/en/docs/claude-code

WooCommerce for Claude

A WordPress plugin that gives Claude direct access to WooCommerce via MCP (Model Context Protocol). Create products, manage orders, configure shipping — all through natural language.

github.com/woocommerce/woocommerce-claude

Bolt

AI-powered web development tool. Generates a complete WordPress block theme from a brand brief in minutes.

bolt.new

WooPayments

Official payment solution for WooCommerce by Automattic. Integrated payments without third-party plugins.

woocommerce.com/payments

WordPress Studio

Local WordPress development by Automattic. Real PHP on localhost with SQLite — no Docker, no MAMP. Each demo is a separate Studio instance.

developer.wordpress.com/studio

MCP

Model Context Protocol. Open standard by Anthropic for connecting AI to external tools. WooCommerce for Claude uses MCP to let Claude talk directly to your store.

modelcontextprotocol.io


The brand brief

ChilliMango: small-batch, garden-to-jar fermented hot sauces from a rural property in the Algarve.

Products

  • Honey Monster Hot Sauce — 250ml, EUR 22. Fermented mango, mixed chillies, honey, white miso, kaffir lime leaves.
  • Garden Chilli Salt — 100g, EUR 8. Coarse salt blended with dried garden chillies.
  • Heritage Chilli Seed Packets — EUR 5. Heirloom varieties from the garden.
  • Chilli-of-the-Month Fresh Box — EUR 15. Seasonal mixed fresh chillies, shipped within Portugal.

Voice

I started growing chillies in Brighton and learned how to make chilli sauce from my good friend Tom. The chillis survived, mostly, but they suffered. When we moved to the Algarve in 2019 the same plants suddenly had something they’d never had before: light and warmth!

ChilliMango isn’t a hot sauce company. It’s whatever I’m fermenting this season, in jars you can hold.

Palette

Cream (#F5E6D3) / Gold (#D4A574) / Orange (#FF8C42) / Deep red (#8B2635) / Brown (#2A1F1A) / Sage (#7A8B6F)


Try it yourself

  1. Install WordPress Studio and create a new site
  2. Install Claude Code (npm install -g @anthropic-ai/claude-code)
  3. Install WooCommerce + WooCommerce for Claude on your Studio site
  4. Connect WooCommerce for Claude to Claude Code (generates MCP credentials for ~/.claude.json)
  5. Write a brand brief for your product
  6. Paste the prompts above and watch it build

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.