How to Integrate Lovable with WooCommerce

Open your WordPress admin panel and navigate to WooCommerce → Settings → Advanced → REST API. Click the 'Add key' button to generate a new API key. Fill in the Description field with something memorable like 'Lovable Storefront' so you can identify it later. Set the User field to your admin WordPress user account. Set Permissions to 'Read' if you only need to display products and orders, or 'Read/Write' if you plan to create or update orders programmatically from Lovable. Click 'Generate API key' and WordPress will display your Consumer Key and Consumer Secret exactly once — copy both values immediately and save them somewhere secure like a password manager. The Consumer Secret is never shown again after you leave this page. The Consumer Key starts with ck_ and the Consumer Secret starts with cs_. Do not close this page until you have securely copied both values. Also note your store's base URL — this is typically https://yourstore.com.

In your Lovable project, click the '+' icon next to the Preview panel to open the Cloud tab. Look for the 'Secrets' section in the Cloud panel sidebar. Click 'Add Secret' and create three secrets that your Edge Function will need. First, add WOO_CONSUMER_KEY and paste your Consumer Key (the ck_... value). Second, add WOO_CONSUMER_SECRET and paste your Consumer Secret (the cs_... value). Third, add WOO_STORE_URL and paste your WordPress store's base URL — for example https://yourstore.com — with no trailing slash. Storing the URL as a secret is not strictly required for security (it is a public URL), but it makes your Edge Function environment-aware so you can test against a staging store without changing code. These secrets are encrypted at rest and accessible only from Edge Functions via Deno.env.get() — they are never sent to the browser or visible in your project's source code. Lovable's security layer blocks approximately 1,200 private API keys per day from being hardcoded into application code, and storing credentials here is how you stay protected.

In Lovable's chat interface, ask Lovable to create a Supabase Edge Function that proxies requests to your WooCommerce REST API. The Edge Function needs to handle CORS, read your credentials from environment variables, encode them as Base64 for HTTP Basic Auth, forward the incoming request path and query parameters to WooCommerce, and return the JSON response to your frontend. The function should accept a 'path' query parameter that maps to a WooCommerce API endpoint (e.g., /products, /products/categories, /orders). Lovable will create the file at supabase/functions/woocommerce-proxy/index.ts and deploy it to your Cloud project automatically. The Edge Function runs on Deno, so you use Deno.env.get() to read secrets and the built-in fetch() for HTTP requests. WooCommerce REST API uses HTTP Basic Auth where you encode 'consumer_key:consumer_secret' as Base64 and pass it in the Authorization header.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8serve(async (req) => {
9  if (req.method === "OPTIONS") {
10    return new Response("ok", { headers: corsHeaders });
11  }
12
13  try {
14    const consumerKey = Deno.env.get("WOO_CONSUMER_KEY");
15    const consumerSecret = Deno.env.get("WOO_CONSUMER_SECRET");
16    const storeUrl = Deno.env.get("WOO_STORE_URL");
17
18    if (!consumerKey || !consumerSecret || !storeUrl) {
19      return new Response(
20        JSON.stringify({ error: "WooCommerce credentials not configured" }),
21        { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
22      );
23    }
24
25    const url = new URL(req.url);
26    const path = url.searchParams.get("path") || "/products";
27    url.searchParams.delete("path");
28
29    const wooUrl = new URL(`${storeUrl}/wp-json/wc/v3${path}`);
30    url.searchParams.forEach((value, key) => {
31      wooUrl.searchParams.set(key, value);
32    });
33
34    const credentials = btoa(`${consumerKey}:${consumerSecret}`);
35
36    const response = await fetch(wooUrl.toString(), {
37      method: req.method,
38      headers: {
39        "Authorization": `Basic ${credentials}`,
40        "Content-Type": "application/json",
41      },
42      body: req.method !== "GET" ? await req.text() : undefined,
43    });
44
45    const data = await response.json();
46
47    return new Response(JSON.stringify(data), {
48      status: response.status,
49      headers: { ...corsHeaders, "Content-Type": "application/json" },
50    });
51  } catch (error) {
52    return new Response(
53      JSON.stringify({ error: error.message }),
54      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
55    );
56  }
57});

With your Edge Function deployed, ask Lovable to build a React component that calls the Edge Function to fetch and display WooCommerce products. The component should use the Supabase client's built-in functions.invoke() method or a direct fetch() call to the Edge Function URL to retrieve product data. For a product catalog, you will typically want to call the /products endpoint with parameters for per_page (number of products to load), page (for pagination), category (optional filter), and status=publish to only show live products. Lovable can generate the full component including product cards with image, title, price, and add-to-cart button, a loading skeleton state while products are fetching, error handling if the Edge Function fails, and a category filter row using data from the /products/categories endpoint. You can use Tailwind CSS classes for styling and shadcn/ui Card components for the product cards — Lovable knows these libraries and will generate appropriate code automatically.

1import { useEffect, useState } from "react";
2import { supabase } from "@/integrations/supabase/client";
3import { Card, CardContent } from "@/components/ui/card";
4import { Button } from "@/components/ui/button";
5import { Skeleton } from "@/components/ui/skeleton";
6
7interface WooProduct {
8  id: number;
9  name: string;
10  price: string;
11  regular_price: string;
12  images: { src: string; alt: string }[];
13  slug: string;
14  stock_status: string;
15}
16
17export function ProductCatalog() {
18  const [products, setProducts] = useState<WooProduct[]>([]);
19  const [loading, setLoading] = useState(true);
20  const [error, setError] = useState("");
21
22  useEffect(() => {
23    async function loadProducts() {
24      try {
25        const { data, error } = await supabase.functions.invoke("woocommerce-proxy", {
26          body: { path: "/products", per_page: 12, status: "publish" },
27        });
28        if (error) throw error;
29        setProducts(data);
30      } catch (err: any) {
31        setError(err.message || "Failed to load products");
32      } finally {
33        setLoading(false);
34      }
35    }
36    loadProducts();
37  }, []);
38
39  if (loading) return (
40    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
41      {Array.from({ length: 6 }).map((_, i) => (
42        <Skeleton key={i} className="h-72 rounded-xl" />
43      ))}
44    </div>
45  );
46
47  if (error) return <p className="text-red-500 p-6">{error}</p>;
48
49  return (
50    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
51      {products.map((product) => (
52        <Card key={product.id} className="overflow-hidden">
53          <img
54            src={product.images[0]?.src || "/placeholder.png"}
55            alt={product.images[0]?.alt || product.name}
56            className="w-full h-48 object-cover"
57          />
58          <CardContent className="p-4">
59            <h3 className="font-semibold text-lg">{product.name}</h3>
60            <p className="text-primary font-bold mt-1">${product.price}</p>
61            <Button className="mt-3 w-full" disabled={product.stock_status !== "instock"}>
62              {product.stock_status === "instock" ? "View Product" : "Out of Stock"}
63            </Button>
64          </CardContent>
65        </Card>
66      ))}
67    </div>
68  );
69}

Preview your Lovable project to confirm products are loading from WooCommerce. Open your browser's developer tools (F12) and check the Network tab to verify the Edge Function call is succeeding with a 200 response. If you see errors, go to Cloud → Logs in Lovable to read the Edge Function execution logs — this is the fastest way to debug credential issues or URL mismatches. WooCommerce REST API returns paginated results, with the total number of products in the X-WP-Total response header and total pages in X-WP-TotalPages. For stores with many products, implement pagination by passing the page parameter to the Edge Function. Ask Lovable to add 'Load More' or numbered pagination controls to your catalog component. Also test edge cases: products with no images (WooCommerce returns an empty images array), products that are out of stock (stock_status: 'outofstock'), and products with sale prices (regular_price vs price fields). For complex storefronts with custom WooCommerce plugins or unusual product types, RapidDev's team can help configure the Edge Function to handle non-standard API responses.