WooCommerce

Before touching any Bubble or WooCommerce settings, fix the most common cause of failed WooCommerce API setups: WordPress Permalink configuration. Log in to your WordPress admin panel at `yourstore.com/wp-admin`. In the left sidebar, go to Settings → Permalinks. Look at the currently selected permalink structure. If it is set to 'Plain' — the top option in the Permalink Settings list — the WordPress REST API is disabled. The plain setting routes requests via query strings (`?p=123`) rather than URL paths, and the pretty-URL routing layer that powers `/wp-json/` does not activate. Change the selection to **'Post name'** (the option that shows `https://yourstore.com/sample-post/`). Click 'Save Changes.' WordPress immediately rewrites the `.htaccess` file (Apache) or server config (Nginx) to enable path-based routing. To verify the fix worked: open a new browser tab and go to `https://yourstore.com/wp-json/wc/v3/`. You should see a JSON response describing the WooCommerce API routes (even without auth, the route list is public). If you still see 404 or a blank page, your hosting may require additional Nginx config — contact your hosting provider. Note: 'Post name' permalinks are the WordPress recommended default for all sites. Changing this setting does not affect your existing content, product URLs, or SEO — it only enables the URL routing format.

1// Verify WooCommerce REST API is accessible:
2// Open browser and go to:
3https://yourstore.com/wp-json/wc/v3/
4
5// Expected: JSON listing of available WooCommerce API endpoints
6// (no auth required just to view the route list)
7
8// If you see 404 → Permalink is still set to 'Plain'
9// If you see {"code":"rest_no_route","message":"No route was found"} → different routing issue
10// If you see the JSON endpoint list → REST API is working, proceed to next step
11
12// WordPress admin path:
13// Settings → Permalinks → Post name → Save Changes

In your WordPress admin, navigate to WooCommerce → Settings → Advanced → REST API. Click 'Add Key.' Fill in the key details: - **Description**: give it a recognizable name, like 'Bubble App Integration' - **User**: select a WordPress user account. The keys inherit this user's WordPress permissions — choose an admin account if you need full read/write access to all orders and products. - **Permissions**: select 'Read/Write' for full integration capability (read products and orders, create and update orders). Choose 'Read' only if your Bubble app will only display data without creating or modifying records. Click 'Generate API Key.' WooCommerce shows the Consumer Key and Consumer Secret exactly once — **copy both immediately** and save them to a secure location (password manager recommended). The Consumer Secret is never shown again; if you lose it, you must regenerate the key pair. The Consumer Key format starts with `ck_`, followed by a 40-character alphanumeric string. The Consumer Secret format starts with `cs_`. These are the credentials you will add to Bubble's API Connector. Do not paste these into any Bubble database field, state variable, or text element. They go only into the API Connector's Basic Auth fields with the Private checkbox enabled.

1// WooCommerce API key formats:
2// Consumer Key:    ck_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0
3// Consumer Secret: cs_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0
4
5// WooCommerce admin path:
6// WooCommerce → Settings → Advanced → REST API → Add Key
7
8// Base URL for all WooCommerce API calls:
9https://yourstore.com/wp-json/wc/v3
10
11// Quick test (with real credentials):
12// GET https://yourstore.com/wp-json/wc/v3/products
13// Basic Auth: username=ck_xxxx, password=cs_xxxx
14// Expected: JSON array of products

In your Bubble editor, go to Plugins → API Connector. Click 'Add another API' and name it 'WooCommerce.' Set the base URL to `https://yourstore.com/wp-json/wc/v3` — replace `yourstore.com` with your actual domain, no trailing slash. In the Authentication section of the API group, select 'Basic Auth.' Enter: - Username: your Consumer Key (`ck_...`) — check the **Private** checkbox - Password: your Consumer Secret (`cs_...`) — check the **Private** checkbox Add a shared header for all calls in this group: `Content-Type: application/json`. Now add the Initialize Call. Click 'Add another call' and name it 'Get Products.' Set method GET and URL path `/products`. Add URL parameters: - `per_page`: value `10` (returns 10 products per page, max 100) - `page`: value `1` - `status`: value `publish` (only published products) Click Initialize call. WooCommerce returns an array of product objects with fields including `id`, `name`, `slug`, `permalink`, `type`, `status`, `price`, `regular_price`, `sale_price`, `stock_status`, `images`, `categories`, `variations`. Bubble auto-detects all these fields from the response. If Initialize call fails with 'There was an issue setting up your call' and no field detection happens, check: (1) permalink is set to Post name, (2) Consumer Key is prefixed with 'ck_' not just the alphanumeric part, (3) your store uses HTTPS, (4) there is at least one published product in WooCommerce.

1// Bubble API Connector: WooCommerce
2// Base URL: https://yourstore.com/wp-json/wc/v3
3//
4// Authentication: Basic Auth
5// Username: ck_a1b2c3d4e5...   // mark Private
6// Password: cs_a1b2c3d4e5...   // mark Private
7//
8// Shared Header:
9// Content-Type: application/json
10//
11// Initialize Call: GET /products
12// Parameters:
13//   per_page: 10
14//   page: 1
15//   status: publish
16//
17// Sample response (one product):
18// [
19//   {
20//     "id": 42,
21//     "name": "Classic T-Shirt",
22//     "slug": "classic-t-shirt",
23//     "permalink": "https://yourstore.com/product/classic-t-shirt",
24//     "type": "variable",
25//     "status": "publish",
26//     "price": "24.99",
27//     "regular_price": "29.99",
28//     "sale_price": "24.99",
29//     "stock_status": "instock",
30//     "images": [ { "id": 101, "src": "https://yourstore.com/wp-content/.../shirt.jpg", "name": "shirt" } ],
31//     "categories": [ { "id": 5, "name": "Tops", "slug": "tops" } ],
32//     "variations": [201, 202, 203]
33//   }
34// ]

With the product call initialized, build the storefront product display. On your Bubble product listing page, add a Repeating Group. Set its data source to 'Plugins → API Connector → WooCommerce → Get Products.' In each Repeating Group cell, add: - A Text element bound to 'Current cell's `name`' - An Image element with Source URL bound to 'Current cell's `images.[0].src`' - A Text element for price bound to 'Current cell's `price`' (prepend a '$' sign if needed) - A 'View Product' button that navigates to a product detail page passing the `id` as a URL parameter For **pagination**: add two page number state variables (e.g., `wc_current_page` as number, default 1). In the Get Products call, make `page` a dynamic parameter that reads from this state. Add a 'Next Page' button that increases `wc_current_page` by 1 and a 'Previous Page' button that decreases it. WooCommerce's maximum `per_page` is 100 — if your store has more than 100 products, pagination is required. For **category filtering**: Add a Dropdown element linked to a separate 'Get Categories' call (GET /products/categories). When the user selects a category, add its `id` as the `category` URL parameter in the Get Products call. In Bubble, use a custom state for the selected category ID and include it in the data source call dynamically. For **product details**: add a 'Get Product Detail' call: GET `/products/<id>` with `<id>` as a dynamic text parameter. On the product detail page, load with the ID from the URL parameter and show full description, gallery images, and available variations.

1// WooCommerce → Get Products (with pagination + category filter)
2// Method: GET
3// URL: https://yourstore.com/wp-json/wc/v3/products
4//
5// Parameters:
6// per_page: 24                          // 24 products per page
7// page: <dynamic: wc_current_page state variable>
8// status: publish
9// category: <dynamic: selected_category_id state (empty = all categories)>
10// search: <dynamic: search_query state (empty = no filter)>
11// orderby: date
12// order: desc
13
14// WooCommerce → Get Categories
15// Method: GET
16// URL: https://yourstore.com/wp-json/wc/v3/products/categories
17// Parameters: per_page=100, hide_empty=true
18//
19// Response: [ { "id": 5, "name": "Tops", "slug": "tops", "count": 12 } ]
20
21// WooCommerce → Get Product Detail
22// Method: GET
23// URL: https://yourstore.com/wp-json/wc/v3/products/<id>
24// Parameters: id = <dynamic: product ID from URL>
25//
26// For variable products, get variations:
27// GET https://yourstore.com/wp-json/wc/v3/products/<id>/variations

To create orders in WooCommerce from a Bubble workflow (when a customer completes checkout in your Bubble app), use the POST /orders endpoint. This creates a full WooCommerce order with customer billing and shipping information and line items. Add a new call in the WooCommerce API Connector named 'Create Order.' Set method POST, URL `/orders`. Set body type to 'JSON body.' The required body fields are: - `payment_method` and `payment_method_title` — use 'stripe' and 'Stripe' if integrating with Stripe payments - `set_paid` — set to `true` if payment is already collected (e.g., Stripe charged the customer before this call) - `billing` — customer billing object with first_name, last_name, address_1, city, state, postcode, country, email, phone - `shipping` — same structure as billing if different from billing address - `line_items` — array of ordered products with `product_id` (or `variation_id` for variable products), `quantity`, and optionally `price` In Bubble, build the JSON body as a raw body text expression. Map customer fields from your Bubble User data type and cart items from a CartItem Data Thing. IMPORTANT: Before triggering this call, verify that any associated Stripe payment has been confirmed. Use a Backend Workflow triggered by your Stripe payment webhook, not a button click. Sending confirmation emails: WooCommerce automatically sends order confirmation emails to the customer email in the `billing.email` field — always test with your own email first to verify the email content and verify no unexpected notifications go to real customers.

1// WooCommerce → Create Order
2// Method: POST
3// URL: https://yourstore.com/wp-json/wc/v3/orders
4// Body type: JSON
5//
6{
7  "payment_method": "stripe",
8  "payment_method_title": "Credit Card (Stripe)",
9  "set_paid": true,
10  "status": "processing",
11  "billing": {
12    "first_name": "<dynamic: Customer first name>",
13    "last_name": "<dynamic: Customer last name>",
14    "address_1": "<dynamic: Customer street address>",
15    "city": "<dynamic: Customer city>",
16    "state": "<dynamic: Customer state>",
17    "postcode": "<dynamic: Customer zip/postcode>",
18    "country": "US",
19    "email": "<dynamic: Customer email>",
20    "phone": "<dynamic: Customer phone>"
21  },
22  "shipping": {
23    "first_name": "<dynamic: Shipping first name>",
24    "last_name": "<dynamic: Shipping last name>",
25    "address_1": "<dynamic: Shipping address>",
26    "city": "<dynamic: Shipping city>",
27    "state": "<dynamic: Shipping state>",
28    "postcode": "<dynamic: Shipping zip>",
29    "country": "US"
30  },
31  "line_items": [
32    {
33      "product_id": <dynamic: WooCommerce product ID>,
34      "variation_id": <dynamic: variation ID (0 if simple product)>,
35      "quantity": <dynamic: quantity>
36    }
37  ],
38  "shipping_lines": [
39    {
40      "method_id": "flat_rate",
41      "method_title": "Flat Rate",
42      "total": "<dynamic: shipping total>"
43    }
44  ]
45}

WooCommerce can push order events to your Bubble app when order status changes — eliminating the need to poll the orders endpoint. This requires a Bubble Backend Workflow endpoint, which needs a paid Bubble plan. First, enable Bubble's Workflow API: Settings → API → check 'This app exposes a Workflow API.' Your endpoint base URL appears below the checkbox in the format `https://yourapp.bubbleapps.io/api/1.1/wf/`. In the Backend Workflows section, click 'Add workflow' and name it `wc_order_updated`. Enable 'Detect request data' — Bubble will listen for the next incoming POST request to auto-detect the payload schema. In WordPress admin, go to WooCommerce → Settings → Advanced → Webhooks. Click 'Add webhook.' Set: - Name: 'Bubble Order Updated' - Status: Active - Topic: 'Order Updated' (or 'Order Created' for new-order events — you may want both) - Delivery URL: `https://yourapp.bubbleapps.io/api/1.1/wf/wc_order_updated` - Secret: (optional) a secret string to verify the webhook source — WooCommerce adds an `X-WC-Webhook-Signature` header Save the webhook. WooCommerce immediately sends a test PING event to verify delivery. WooCommerce order webhooks send the complete order object as JSON — same structure as GET /orders/{id}. Key fields to process: `id` (order ID), `status` (new status), `billing`, `line_items`, `date_modified`. In the Backend Workflow, add actions to find the corresponding Order record in your Bubble database (search by WooCommerce order ID stored in a field on your Order data type) and update its status field. WooCommerce expects a 200 response within a timeout period. Add a 'Return data from API' action at the end of the workflow with `{ "received": true }` to acknowledge receipt promptly. RapidDev's engineers have implemented this WooCommerce-to-Bubble webhook pipeline across multiple Bubble headless storefronts — for complex multi-store setups, reach out at rapidevelopers.com/contact.

1// Bubble Backend Workflow URL:
2https://yourapp.bubbleapps.io/api/1.1/wf/wc_order_updated
3
4// WooCommerce webhook payload (Order Updated):
5// {
6//   "id": 1234,
7//   "parent_id": 0,
8//   "number": "1234",
9//   "order_key": "wc_order_abc123",
10//   "created_via": "rest-api",
11//   "status": "completed",
12//   "currency": "USD",
13//   "date_created": "2026-01-27T14:32:00",
14//   "date_modified": "2026-01-27T16:45:00",
15//   "total": "49.98",
16//   "billing": {
17//     "first_name": "John",
18//     "last_name": "Doe",
19//     "email": "john@example.com"
20//   },
21//   "line_items": [
22//     { "id": 5, "name": "Classic T-Shirt", "product_id": 42, "quantity": 2, "total": "49.98" }
23//   ],
24//   "shipping_lines": [
25//     { "id": 6, "method_title": "Flat Rate", "total": "5.00" }
26//   ]
27// }