How to Integrate Bolt.new with WooCommerce

WooCommerce REST API authentication uses consumer_key and consumer_secret pairs generated per user in the WordPress admin. Each key pair is tied to a WordPress user account and inherits that user's permissions. For a full-featured integration (reading and writing products, orders, customers), you need keys associated with a user who has the Shop Manager or Administrator role. To generate API keys: log into WordPress admin → WooCommerce → Settings → Advanced tab → REST API. Click 'Add Key'. Enter a description (e.g., 'Bolt Development'), select the WordPress user (use Administrator for full access), and set Permissions to 'Read/Write'. Click 'Generate API Key'. You will see the Consumer Key and Consumer Secret displayed ONCE — copy both immediately and store them securely. The consumer_secret is never shown again. WooCommerce uses HTTP Basic Auth for the REST API: the consumer_key is the username and consumer_secret is the password in the Authorization header. For HTTPS endpoints (required for production), Basic Auth is secure. For development with an HTTP-only WordPress (common in local development), WooCommerce supports passing credentials as query parameters (?consumer_key=xxx&consumer_secret=yyy) since Basic Auth over HTTP would expose credentials. For your Bolt project, store the keys in .env and always use Basic Auth via the server-side Next.js API route — never expose credentials to the browser. If you are using a managed WordPress host (WP Engine, Pressable, Cloudways), ensure your host has not blocked the /wp-json/ endpoint or added authentication requirements. Some hosts require you to whitelist API access from specific IPs, which is problematic with Netlify/Vercel's dynamic serverless IP ranges — in that case, configure the WordPress host to allow access from all IPs with valid API credentials.

1// lib/woocommerce.ts
2const BASE_URL = process.env.WOOCOMMERCE_URL!;
3const KEY = process.env.WOOCOMMERCE_KEY!;
4const SECRET = process.env.WOOCOMMERCE_SECRET!;
5
6const AUTH = Buffer.from(`${KEY}:${SECRET}`).toString('base64');
7
8export interface WooProduct {
9  id: number;
10  name: string;
11  slug: string;
12  permalink: string;
13  price: string;
14  regular_price: string;
15  sale_price: string;
16  stock_status: 'instock' | 'outofstock' | 'onbackorder';
17  stock_quantity: number | null;
18  images: Array<{ src: string; alt: string }>;
19  categories: Array<{ id: number; name: string; slug: string }>;
20  short_description: string;
21}
22
23export interface WooOrder {
24  id: number;
25  number: string;
26  status: string;
27  total: string;
28  billing: { first_name: string; last_name: string; email: string };
29  line_items: Array<{ name: string; quantity: number; total: string }>;
30  date_created: string;
31}
32
33async function wooRequest<T>(
34  endpoint: string,
35  options: RequestInit = {}
36): Promise<T> {
37  const url = `${BASE_URL}/wp-json/wc/v3/${endpoint}`;
38  const res = await fetch(url, {
39    ...options,
40    headers: {
41      Authorization: `Basic ${AUTH}`,
42      'Content-Type': 'application/json',
43      ...options.headers,
44    },
45  });
46  if (!res.ok) {
47    const err = await res.text();
48    throw new Error(`WooCommerce API error ${res.status}: ${err}`);
49  }
50  return res.json();
51}
52
53export const woo = {
54  getProducts: (params: Record<string, string | number> = {}) => {
55    const qs = new URLSearchParams(params as Record<string, string>).toString();
56    return wooRequest<WooProduct[]>(`products${qs ? '?' + qs : ''}`);
57  },
58  getProduct: (id: number) => wooRequest<WooProduct>(`products/${id}`),
59  getCategories: () => wooRequest<Array<{ id: number; name: string; slug: string; count: number }>>('products/categories?per_page=100'),
60  getOrders: (params: Record<string, string> = {}) => {
61    const qs = new URLSearchParams(params).toString();
62    return wooRequest<WooOrder[]>(`orders${qs ? '?' + qs : ''}`);
63  },
64  updateOrderStatus: (id: number, status: string) =>
65    wooRequest(`orders/${id}`, { method: 'PUT', body: JSON.stringify({ status }) }),
66};

Create Next.js API routes that serve as the proxy layer between your React frontend and WooCommerce. The frontend never calls WooCommerce directly — it only calls your own routes at /api/products, /api/categories, etc. This proxy pattern solves CORS (the server-to-server call does not have browser CORS restrictions), keeps credentials server-side, and lets you transform or filter the WooCommerce response before sending it to the browser. The product listing route should accept query parameters for filtering: category (WooCommerce category slug or ID), page (for pagination), per_page (defaults to 12 for a typical product grid), orderby (date, price, popularity, rating), order (asc/desc), min_price, max_price, and search (for text search). Each of these maps directly to WooCommerce REST API query parameters — your route validates and passes them through. For performance, consider the response size: WooCommerce's product objects include many fields your frontend may not need. Project only the fields you use (id, name, slug, permalink, price, regular_price, sale_price, stock_status, images, categories, short_description) to reduce response payload size. You can do this by spreading the relevant fields from the WooCommerce response into a leaner object. The categories route fetches all categories in a single call (WooCommerce has a max of 100 per page, sufficient for most stores) and sorts them by name. Return them as a simple array of {id, name, slug, count} objects for the frontend sidebar filter. In Bolt's WebContainer, both routes make outbound HTTPS calls to your WordPress server — these work perfectly during development without any CORS issues.

1// app/api/products/route.ts
2import { NextResponse } from 'next/server';
3import { woo } from '@/lib/woocommerce';
4
5export async function GET(request: Request) {
6  try {
7    const { searchParams } = new URL(request.url);
8    const params: Record<string, string> = {};
9    const allowed = ['category', 'page', 'per_page', 'orderby', 'order', 'min_price', 'max_price', 'search'];
10    for (const key of allowed) {
11      const val = searchParams.get(key);
12      if (val) params[key] = val;
13    }
14    if (!params.per_page) params.per_page = '12';
15
16    const products = await woo.getProducts(params);
17    const lean = products.map(p => ({
18      id: p.id,
19      name: p.name,
20      slug: p.slug,
21      permalink: p.permalink,
22      price: p.price,
23      regular_price: p.regular_price,
24      sale_price: p.sale_price,
25      stock_status: p.stock_status,
26      image: p.images[0] ?? null,
27      categories: p.categories,
28    }));
29    return NextResponse.json(lean);
30  } catch (error: unknown) {
31    const e = error as { message: string };
32    return NextResponse.json({ error: e.message }, { status: 500 });
33  }
34}

With the API routes returning product data, prompt Bolt to generate the complete storefront UI. The shopping experience consists of several interconnected components: a product catalog page with filtering sidebar, individual product cards, a product detail page, a cart that manages state client-side, and a checkout handoff that redirects to WooCommerce. For cart state management, the standard approach is React Context or Zustand — store cart items (product ID, name, price, quantity, image) in local state, calculate totals client-side, and let WooCommerce handle actual order creation. When a customer clicks 'Checkout', construct a WooCommerce cart URL that pre-fills their selected items using the ?add-to-cart= query parameter or the WooCommerce REST API's order endpoint. The simplest flow is to link to the WooCommerce product pages or use the ?add-to-cart={product_id}&quantity={qty} URL parameter to add items to the WooCommerce server-side cart, then redirect to /checkout. Product images served from your WordPress domain will work in the Bolt preview since they are loaded via standard HTML img tags (the browser fetches them directly). Cart state should persist across page refreshes using localStorage — store the cart array in localStorage and rehydrate it on app load. For product detail pages, use Next.js dynamic routes ([slug]/page.tsx) that fetch product data server-side via the /api/products/[id] route. Include the product's full description, all images in a gallery, variant selection for variable products (fetch variations via /api/products/[id]/variations), quantity selector, and the Add to Cart button that updates local cart state.

1// Store cart items and build WooCommerce cart redirect URL
2// When user clicks Checkout, redirect to WooCommerce:
3// https://yourstore.com/checkout
4// To pre-fill cart items, use WooCommerce's URL approach:
5// https://yourstore.com/?add-to-cart=123&quantity=2
6// Or for multiple items, use the REST API to create an order draft
7// and redirect to the order payment URL.
8
9// Example: Add to cart via WooCommerce URL parameter
10export function buildAddToCartUrl(baseUrl: string, productId: number, qty: number): string {
11  return `${baseUrl}/?add-to-cart=${productId}&quantity=${qty}`;
12}
13
14// Example: Redirect to WooCommerce checkout with items in query
15export function buildCheckoutUrl(baseUrl: string): string {
16  return `${baseUrl}/checkout`;
17}

In some WordPress configurations, direct API calls from a different domain return CORS errors. Since your Bolt app uses Next.js API routes as a proxy (server-to-server calls), CORS does not affect the product data routes — server-side calls do not have CORS restrictions. However, if you need any client-side direct calls to WordPress (e.g., for WordPress REST API features or the Gutenberg block editor), CORS configuration on WordPress becomes relevant. To configure CORS headers on WordPress, add the following to your WordPress theme's functions.php or a custom plugin. This allows the Bolt preview domain and your deployed domain to make cross-origin requests to the WordPress REST API. For the WooCommerce integration pattern in this tutorial (Next.js proxy routes handling all API calls server-side), you do not need to modify WordPress CORS settings — all WooCommerce API calls go through your Next.js routes at /api/*, which are same-origin from the browser's perspective. The browser calls https://your-bolt-app.netlify.app/api/products and the Next.js route calls https://yourstore.com/wp-json/wc/v3/products server-to-server. The only situation where CORS matters directly is if you need to fetch from WordPress's media library or other endpoints client-side. For the typical headless WooCommerce storefront, the proxy pattern is sufficient and preferred.

1<?php
2// Add to your WordPress theme's functions.php
3// or create a simple plugin
4// This allows your Bolt/Netlify app to call the WP REST API directly if needed
5
6add_action('init', function() {
7  $allowed_origins = [
8    'https://your-bolt-app.netlify.app',
9    'https://your-bolt-preview-url.bolt.new',
10    'http://localhost:3000', // local Next.js dev
11  ];
12
13  $origin = $_SERVER['HTTP_ORIGIN'] ?? '';
14  if (in_array($origin, $allowed_origins)) {
15    header('Access-Control-Allow-Origin: ' . $origin);
16    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
17    header('Access-Control-Allow-Headers: Authorization, Content-Type, X-WP-Nonce');
18    header('Access-Control-Allow-Credentials: true');
19  }
20
21  if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
22    status_header(200);
23    exit();
24  }
25});

Deploy your Bolt project to Netlify to get a stable public URL, then configure WooCommerce webhooks for real-time order notifications. During Bolt WebContainer development, your app can call WooCommerce's API outbound (product fetching, order creation) but WooCommerce cannot send incoming webhook events to the WebContainer — there is no public URL for WooCommerce to post to. Deploy to Netlify: connect via Bolt Settings → Applications → Netlify → Publish. In Netlify Dashboard → Site Settings → Environment Variables, add WOOCOMMERCE_URL, WOOCOMMERCE_KEY, WOOCOMMERCE_SECRET, and NEXT_PUBLIC_WOOCOMMERCE_URL (the public store URL for checkout links). Trigger a redeploy after adding variables. For WooCommerce webhooks: in WordPress admin, go to WooCommerce → Settings → Advanced → Webhooks. Click 'Add webhook'. Set the Delivery URL to https://your-netlify-app.netlify.app/api/webhooks/woocommerce. Choose a Topic (e.g., 'Order created', 'Order updated'). Set Status to Active. WooCommerce will generate a Secret (used to verify incoming payloads) — copy this and add it as WOOCOMMERCE_WEBHOOK_SECRET to your Netlify environment variables. Create the webhook handler at app/api/webhooks/woocommerce/route.ts. WooCommerce sends a POST request with the order data as JSON and includes an X-WC-Webhook-Signature header (HMAC-SHA256 of the payload using the webhook secret). Always verify this signature before processing the webhook to prevent unauthorized requests. After verification, process the event — update your database, send notification emails, trigger fulfillment logic, etc.

1// app/api/webhooks/woocommerce/route.ts
2import { createHmac } from 'crypto';
3import { NextResponse } from 'next/server';
4
5export async function POST(request: Request) {
6  const body = await request.text();
7  const signature = request.headers.get('x-wc-webhook-signature');
8  const topic = request.headers.get('x-wc-webhook-topic');
9
10  // Verify HMAC-SHA256 signature
11  const expected = createHmac('sha256', process.env.WOOCOMMERCE_WEBHOOK_SECRET!)
12    .update(body)
13    .digest('base64');
14
15  if (signature !== expected) {
16    console.error('WooCommerce webhook signature mismatch');
17    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
18  }
19
20  let data: Record<string, unknown>;
21  try {
22    data = JSON.parse(body);
23  } catch {
24    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
25  }
26
27  console.log(`WooCommerce webhook received: ${topic}`, {
28    orderId: data.id,
29    status: data.status,
30  });
31
32  switch (topic) {
33    case 'order.created':
34      // Handle new order: send confirmation email, update inventory, etc.
35      break;
36    case 'order.updated':
37      // Handle order status change: notify customer, trigger fulfillment
38      break;
39  }
40
41  return NextResponse.json({ received: true });
42}