How to Integrate WooCommerce with V0

Open V0 at v0.dev and describe the e-commerce storefront layout you want to build. WooCommerce products have rich data: name, description, short_description, images array, price, regular_price, sale_price, stock_status, categories, tags, attributes, and variations. Describing the product card and product detail layouts specifically helps V0 generate components that map naturally to WooCommerce's data model. For a product catalog, specify the information shown on each product card (image, name, price, rating, Add to Cart button), how sale prices appear (crossed-out regular price next to red sale price), and how out-of-stock items are displayed (grayed out, 'Notify Me' button). For category filtering, describe whether you want a sidebar with checkboxes, tabs across the top, or a dropdown selector. For the cart, describe whether it's a slide-out drawer or a dedicated cart page — slide-out drawers are more common for modern e-commerce. Ask V0 to generate the cart state management using React context or localStorage-based state — this client-side cart accumulates items before sending the order to WooCommerce. Specify the API endpoints the components will call: GET /api/woocommerce/products for the catalog, GET /api/woocommerce/products/{id} for details, and POST /api/woocommerce/orders for order creation. After generating the UI, use V0's Git panel to push to your GitHub repository.

Create Next.js API routes that proxy requests to your WooCommerce store's REST API. The WooCommerce REST API base URL is https://yourstore.com/wp-json/wc/v3/ and authentication uses HTTP Basic Auth with your consumer key as the username and consumer secret as the password. Encode both as Base64 (consumerKey:consumerSecret) and pass as the Authorization: Basic {base64} header. The most important routes for a storefront are: GET /products (with query parameters per_page, page, category, status, orderby, order, search, on_sale, stock_status), GET /products/{id} for single product details, GET /products/categories for category listings, POST /orders for creating orders with line items, customer billing, and shipping address, and GET /orders/{id} to check order status. WooCommerce's product response includes an images array (each image has src and alt fields), an attributes array (for variations like size and color), a variations array of IDs (fetch each variation via GET /products/{id}/variations/{var_id}), and a categories array. For the product catalog, use per_page (up to 100) and page parameters for pagination. The category filter uses the category parameter which accepts a category ID — fetch available categories from GET /products/categories first. All WooCommerce API responses include standard HTTP status codes and JSON error messages in a code/message format for error handling.

1// app/api/woocommerce/products/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4function getWCAuthHeader(): string {
5  const key = process.env.WC_CONSUMER_KEY;
6  const secret = process.env.WC_CONSUMER_SECRET;
7  if (!key || !secret) throw new Error('WooCommerce credentials are not configured');
8  return `Basic ${Buffer.from(`${key}:${secret}`).toString('base64')}`;
9}
10
11function getWCBase(): string {
12  const storeUrl = process.env.WC_STORE_URL;
13  if (!storeUrl) throw new Error('WC_STORE_URL is not configured');
14  return `${storeUrl.replace(/\/$/, '')}/wp-json/wc/v3`;
15}
16
17async function wcRequest(path: string, options: RequestInit = {}) {
18  const response = await fetch(`${getWCBase()}${path}`, {
19    ...options,
20    headers: {
21      Authorization: getWCAuthHeader(),
22      'Content-Type': 'application/json',
23      ...((options.headers as Record<string, string>) || {}),
24    },
25  });
26
27  if (!response.ok) {
28    const error = await response.json().catch(() => ({}));
29    throw new Error(error.message || `WooCommerce API error ${response.status}`);
30  }
31
32  return response.json();
33}
34
35export async function GET(request: NextRequest) {
36  const { searchParams } = request.nextUrl;
37
38  const params = new URLSearchParams({
39    per_page: searchParams.get('per_page') || '12',
40    page: searchParams.get('page') || '1',
41    status: 'publish',
42  });
43
44  const passthroughParams = ['category', 'search', 'orderby', 'order', 'on_sale', 'featured', 'stock_status'];
45  passthroughParams.forEach((param) => {
46    const value = searchParams.get(param);
47    if (value) params.set(param, value);
48  });
49
50  try {
51    const products = await wcRequest(`/products?${params.toString()}`);
52
53    const sanitized = products.map((p: Record<string, unknown>) => ({
54      id: p.id,
55      name: p.name,
56      slug: p.slug,
57      price: p.price,
58      regularPrice: p.regular_price,
59      salePrice: p.sale_price,
60      onSale: p.on_sale,
61      stockStatus: p.stock_status,
62      shortDescription: p.short_description,
63      images: ((p.images as Record<string, unknown>[]) || []).slice(0, 5).map((img) => ({
64        id: img.id,
65        src: img.src,
66        alt: img.alt,
67      })),
68      categories: ((p.categories as Record<string, unknown>[]) || []).map((c) => ({
69        id: c.id,
70        name: c.name,
71        slug: c.slug,
72      })),
73      averageRating: p.average_rating,
74      ratingCount: p.rating_count,
75    }));
76
77    return NextResponse.json({ products: sanitized });
78  } catch (error) {
79    const message = error instanceof Error ? error.message : 'Failed to fetch products';
80    return NextResponse.json({ error: message }, { status: 500 });
81  }
82}

Create the order creation API route and connect the cart UI to WooCommerce. The cart in a headless WooCommerce storefront is typically managed client-side in React state or localStorage — it's an array of line items (product ID, quantity, and variation ID if applicable). When the customer is ready to checkout, the cart contents are sent to a Next.js API route that creates a WooCommerce order via POST /orders. A WooCommerce order requires line_items (array of {product_id, quantity, variation_id} objects), billing address, shipping address, and payment_method ('bacs' for bank transfer, 'cod' for cash on delivery, or a payment gateway slug for online payments). The created order is in 'pending' status and returns an order ID, order number, and payment URL. For most headless WooCommerce setups, the payment step redirects to WooCommerce's native checkout page (using the payment link from the created order) or integrates Stripe separately. The simplest approach for V0-built stores is to create the WooCommerce order, then redirect the user to the order's checkout_payment_url for payment processing on the WooCommerce side. More advanced setups integrate Stripe directly in the Next.js frontend and mark the order as paid via the API after successful payment. Test the order creation locally by running npm run dev, adding items to the cart, and completing a test checkout — verify the order appears in WordPress admin → WooCommerce → Orders with the correct line items.

1// app/api/woocommerce/orders/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4function getWCAuthHeader(): string {
5  const key = process.env.WC_CONSUMER_KEY;
6  const secret = process.env.WC_CONSUMER_SECRET;
7  if (!key || !secret) throw new Error('WooCommerce credentials are not configured');
8  return `Basic ${Buffer.from(`${key}:${secret}`).toString('base64')}`;
9}
10
11function getWCBase(): string {
12  const storeUrl = process.env.WC_STORE_URL;
13  if (!storeUrl) throw new Error('WC_STORE_URL is not configured');
14  return `${storeUrl.replace(/\/$/, '')}/wp-json/wc/v3`;
15}
16
17export async function POST(request: NextRequest) {
18  let body: {
19    lineItems: { productId: number; quantity: number; variationId?: number }[];
20    billing: Record<string, string>;
21    shipping?: Record<string, string>;
22    customerNote?: string;
23  };
24
25  try {
26    body = await request.json();
27  } catch {
28    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
29  }
30
31  if (!body.lineItems?.length || !body.billing?.email) {
32    return NextResponse.json({ error: 'lineItems and billing.email are required' }, { status: 400 });
33  }
34
35  const orderData = {
36    payment_method: 'bacs',
37    payment_method_title: 'Bank Transfer',
38    set_paid: false,
39    billing: {
40      first_name: body.billing.firstName,
41      last_name: body.billing.lastName,
42      email: body.billing.email,
43      address_1: body.billing.address1,
44      address_2: body.billing.address2 || '',
45      city: body.billing.city,
46      postcode: body.billing.postcode,
47      country: body.billing.country,
48    },
49    shipping: body.shipping
50      ? {
51          first_name: body.shipping.firstName,
52          last_name: body.shipping.lastName,
53          address_1: body.shipping.address1,
54          city: body.shipping.city,
55          postcode: body.shipping.postcode,
56          country: body.shipping.country,
57        }
58      : undefined,
59    line_items: body.lineItems.map((item) => ({
60      product_id: item.productId,
61      quantity: item.quantity,
62      ...(item.variationId ? { variation_id: item.variationId } : {}),
63    })),
64    customer_note: body.customerNote || '',
65  };
66
67  try {
68    const response = await fetch(`${getWCBase()}/orders`, {
69      method: 'POST',
70      headers: {
71        Authorization: getWCAuthHeader(),
72        'Content-Type': 'application/json',
73      },
74      body: JSON.stringify(orderData),
75    });
76
77    if (!response.ok) {
78      const error = await response.json();
79      throw new Error(error.message || 'Failed to create WooCommerce order');
80    }
81
82    const order = await response.json();
83
84    return NextResponse.json({
85      orderId: order.id,
86      orderNumber: order.number,
87      status: order.status,
88      paymentUrl: order.checkout_payment_url,
89      total: order.total,
90    });
91  } catch (error) {
92    const message = error instanceof Error ? error.message : 'Order creation failed';
93    return NextResponse.json({ error: message }, { status: 500 });
94  }
95}

Push your code to GitHub and configure WooCommerce credentials in the Vercel Dashboard. Navigate to Settings → Environment Variables and add three variables: WC_STORE_URL (the full HTTPS URL of your WordPress store, including trailing slash if present — e.g., https://yourstore.com — this is the WordPress site root, not the shop page URL), WC_CONSUMER_KEY (the consumer key starting with 'ck_' — generated in WordPress admin → WooCommerce → Settings → Advanced → REST API → Add Key), and WC_CONSUMER_SECRET (the consumer secret starting with 'cs_' — shown only once when you create the API key, so make sure to copy it at creation time). None should have the NEXT_PUBLIC_ prefix. Set all variables for Production and Preview environments. After saving and redeploying, test by loading your storefront and verifying products appear from WooCommerce. Common deployment issues: if products return 401, verify the consumer key and secret are correct and that the API key has Read/Write permissions. If products return 404, verify WC_STORE_URL is the exact site URL and that WooCommerce is active on that WordPress installation. If you're serving a staging environment, use separate WooCommerce API keys for Production and Preview to avoid test orders appearing in your production WooCommerce. For high-traffic storefronts, add page caching with ISR (export const revalidate = 3600 in product page components) and consider Vercel's Edge Config or Upstash Redis for cart session storage at scale. For enterprise WooCommerce headless implementations requiring advanced features like real-time inventory, RapidDev's team can help design the full architecture.