How to Integrate Retool with WooCommerce

In your WordPress admin panel, navigate to WooCommerce → Settings → Advanced → REST API. This tab lists all existing API keys and the button to create new ones. Click 'Add key'. Fill in the Description field (e.g., 'Retool Integration'), select the User account the key should be associated with (use a dedicated admin account for production integrations), and set Permissions to 'Read/Write' — Read-only is sufficient if you only need to view data, but Read/Write is required for updating orders or processing refunds. Click 'Generate API key'. WooCommerce displays the Consumer Key (starting with 'ck_') and Consumer Secret (starting with 'cs_') exactly once. Copy both values immediately and store them securely — the Consumer Secret will not be shown again. Treat these credentials like a username and password combination.

In Retool, go to Resources → Create New → REST API. Set the Base URL to your WooCommerce store URL followed by '/wp-json/wc/v3' — for example, 'https://yourstore.com/wp-json/wc/v3'. This path prefix is the WooCommerce REST API v3 root; all endpoints will be appended to this base. Under the Authentication section, select 'Basic Auth' from the dropdown. Enter the Consumer Key in the Username field and the Consumer Secret in the Password field. Do not add the credentials as URL parameters — Basic Auth headers are more secure and less likely to appear in server logs. Add a default header 'Content-Type' with value 'application/json'. Click 'Test connection' — Retool will attempt to fetch the API root. If your store requires HTTPS (most production WooCommerce stores do), ensure the Base URL uses https://. Name the resource 'WooCommerce' and save it.

1{
2  "Base URL": "https://yourstore.com/wp-json/wc/v3",
3  "Authentication": "Basic Auth",
4  "Username": "{{ retoolContext.configVars.WC_CONSUMER_KEY }}",
5  "Password": "{{ retoolContext.configVars.WC_CONSUMER_SECRET }}",
6  "Headers": {
7    "Content-Type": "application/json"
8  }
9}

Create a new query in your Retool app using the WooCommerce resource. Set the HTTP method to GET and the path to '/orders'. WooCommerce's orders endpoint supports extensive query parameters for filtering: 'status' filters by order status (processing, completed, on-hold, pending, cancelled, refunded), 'after' and 'before' accept ISO 8601 date strings for date filtering, 'search' searches customer name and email, 'per_page' sets page size (max 100), and 'page' handles pagination. Add query parameters by clicking 'Add query param' in the query editor. Bind the status parameter to a Select component value for dynamic filtering. The response is a JSON array of order objects — each order includes id, status, date_created, total, billing (customer info), line_items (products ordered), and shipping details. Run the query and verify the response structure before building the UI.

1// Query configuration
2GET /orders
3
4// Query parameters:
5// status: {{ statusFilter.value || 'processing' }}
6// per_page: {{ pagination.pageSize || 50 }}
7// page: {{ pagination.page || 1 }}
8// after: {{ dateRange.start ? new Date(dateRange.start).toISOString() : '' }}
9// before: {{ dateRange.end ? new Date(dateRange.end).toISOString() : '' }}
10// search: {{ searchInput.value || '' }}

WooCommerce orders return nested objects — billing address, shipping address, and line_items are all arrays or objects within each order. To display cleanly in a Retool Table, add a transformer to the query. The transformer should map over orders and extract the key fields into a flat object. The 'line_items' array contains an item name, quantity, and total for each product in the order. Use Array.join to concatenate multiple product names into a single column value. The billing object contains first_name, last_name, email, and phone. Format the total as a currency string and parse the date to a readable format. This transformer runs on every query execution and makes the Table component binding trivial.

1// Transformer: flatten WooCommerce order response
2const orders = data || [];
3
4return orders.map(order => {
5  const itemNames = (order.line_items || []).map(item =>
6    `${item.name} x${item.quantity}`
7  ).join(', ');
8
9  return {
10    id: order.id,
11    order_number: `#${order.number || order.id}`,
12    status: order.status,
13    customer_name: `${order.billing.first_name} ${order.billing.last_name}`,
14    customer_email: order.billing.email,
15    items: itemNames,
16    item_count: order.line_items?.length || 0,
17    total: `$${parseFloat(order.total).toFixed(2)}`,
18    payment_method: order.payment_method_title || '',
19    date: new Date(order.date_created).toLocaleDateString(),
20    shipping_address: `${order.shipping.address_1}, ${order.shipping.city}, ${order.shipping.state}`
21  };
22});

Create a second query for updating order status. Use the WooCommerce resource with HTTP method PUT and path '/orders/{{ table1.selectedRow.id }}'. Set the request body type to JSON and include only the fields you want to update — in this case, an object with a 'status' key set to the new status value. Create a Select component with options for 'processing', 'completed', 'on-hold', and 'cancelled'. Bind the update query's status parameter to this select component's value. Add a Button component labeled 'Update Status'. Set the button's onClick event handler to run the update query, then on success, trigger the getOrders query to refresh the table and show a success notification. Disable the button when no row is selected by setting its Disabled property to {{ !table1.selectedRow }}.

1// PUT /orders/{{ table1.selectedRow.id }}
2// Request body:
3{
4  "status": "{{ statusSelect.value }}"
5}

Create a third query to manage product inventory. Use GET method with path '/products' and query parameters for filtering: 'stock_status' can be 'instock', 'outofstock', or 'onbackorder'; 'type' filters to simple vs variable products. For inventory updates, create a PUT query targeting '/products/{{ productTable.selectedRow.id }}' with a JSON body containing 'stock_quantity' bound to an input field. Build a second tab or section in your Retool app for inventory management. The products endpoint returns SKU, name, stock_quantity, stock_status, and price fields. Add a Number Input component for direct quantity editing. For complex integrations involving product variations, custom order workflows, or multi-warehouse inventory syncing across Retool and WooCommerce, RapidDev's team can help architect a comprehensive solution.

1// GET /products with low stock filter
2// Query parameters:
3// per_page: 100
4// stock_status: instock
5// orderby: stock_quantity
6// order: asc
7
8// Transformer: format product data
9const products = data || [];
10return products.map(product => ({
11  id: product.id,
12  sku: product.sku || 'N/A',
13  name: product.name,
14  stock_quantity: product.stock_quantity,
15  stock_status: product.stock_status,
16  price: `$${product.price}`,
17  low_stock: product.stock_quantity !== null && product.stock_quantity < 10
18}));