Svelte Commerce × WooCommerce
Svelte Commerce on WooCommerce
WooCommerce is three APIs with three auth models: wc/v3 with a consumer key and secret, the Store API wc/store/v1 with a session Cart-Token — where the cart and checkout live — and WordPress core’s wp/v2. The connector uses all three.
- 27/43 services wired
- @misiki/woocommerce-connector 0.4.0
- Cart wired
- Checkout wired
- Sign-in (auth) no endpoint on the platform
What works on WooCommerce today
Cart and checkout are wired through WooCommerce’s Store API, so shoppers can check out; they cannot sign in, because WooCommerce core has no endpoint that returns a shopper session. Read the note on the consumer key before deploying: the connector takes it from a PUBLIC_ variable, which the browser receives.
Cart
Wired: issues a real request to WooCommerce.
Checkout
Wired: issues a real request to WooCommerce.
Sign-in (auth)
No endpoint on WooCommerce: it throws NotSupportedError rather than pretend.
Known gaps: auth (no core endpoint), wishlist
27 of 43 services wired, read from CONNECTORS.md on ; npm may carry a newer patch. How coverage is measured.
What the connector calls on WooCommerce
The connector calls three WordPress REST namespaces on the store’s own URL: WooCommerce wc/v3 at /wp-json/wc/v3 for the catalogue, orders and customers, the Store API at /wp-json/wc/store/v1 for the cart and checkout, and WordPress core at /wp-json/wp/v2 for pages.
Calls to wc/v3 carry the consumer key and secret as Authorization: Basic; Store API calls carry no key and instead replay the Cart-Token and Nonce headers captured from the previous response, with the cart token also kept in localStorage as cart_id; shopper sign-in is not possible, because every sign-in method throws NotSupportedError.
| Service | What it requests |
|---|---|
product | GET /wp-json/wc/v3/products with page, per_page, search, orderby, order and status=publish; a product page by slug uses GET /products?slug=, then GET /products/{id}/variations?per_page=100 |
category | GET /wp-json/wc/v3/products/categories, by slug or numeric id, and GET /products?category={id} for a category’s products |
search | GET /wp-json/wc/v3/products with search, category, tag, min_price and max_price, plus GET /wp-json/wc/store/v1/products/collection-data?calculate_price_range=true for the price range |
cart | GET /wp-json/wc/store/v1/cart and POST /cart/add-item, /cart/update-item, /cart/remove-item, /cart/apply-coupon, /cart/remove-coupon, /cart/update-customer and /cart/select-shipping-rate |
checkout | GET /wp-json/wc/v3/payment_gateways (or /payment_gateways/cod) to find an enabled gateway, then POST /wp-json/wc/store/v1/checkout with billing_address, shipping_address, payment_method and payment_data |
order | GET /wp-json/wc/v3/orders with page, per_page, search, orderby, order, customer and status, and GET /orders/{id} |
address | GET and PUT /wp-json/wc/v3/customers/{id}, reading and writing the customer’s billing and shipping blocks |
payment-method | GET /wp-json/wc/v3/payment_gateways |
WooCommerce rules the connector follows
- List totals come from the
X-WP-TotalandX-WP-TotalPagesresponse headers, not the body, and a route that sends neither falls back to the length of the returned array. - Sorting goes out as an
orderbyandorderpair,orderbyis limited to the values WooCommerce accepts (date,modified,id,title,slug,price,popularity,rating,menu_order), and an unknown sort becomesdatedescrather than arest_invalid_paramerror. GET /products/{id}takes only a numeric id, so a product page reached by slug first runsGET /products?slug=&per_page=1, then fetches variations 100 at a time, which is WooCommerce’s maximum page size.- Every Store API write needs the
Noncefrom an earlier response as well as theCart-Token, so the connector captures both from the response headers on every cart call. - WooCommerce has no endpoint that confirms a payment, so the connector leaves every capture method unimplemented rather than marking an order paid with
set_paid, and onlycod, WooCommerce’s own gateway, is driven end to end.
Read from the source of misiki-in/woocommerce-connector at commit af8ed2c of . Where the code has changed since, the code is right.
Quick start
From nothing to a Svelte Commerce storefront reading WooCommerce. You need Node.js and a WooCommerce to point it at; the storefront holds no data of its own.
Clone it, choose the connector, point it at WooCommerce
# 1 — get the storefront
git clone https://github.com/itswadesh/svelte-commerce
cd svelte-commerce
# 2 — one connector at a time: remove the two the storefront ships with, add this one
npm uninstall @misiki/litekart-connector @misiki/vendure-connector
npm i @misiki/woocommerce-connector
# 3 — point it at your WordPress site
echo PUBLIC_WOOCOMMERCE_API_URL=https://your-store.example.com >> .env
echo PUBLIC_WOOCOMMERCE_API_KEY=ck_... >> .env
echo PUBLIC_WOOCOMMERCE_API_SECRET=cs_... >> .env
# 4 — run it
npm run dev Switching works the same way on every backend: what all 26 share, from one connector at a time to store identity.
Environment variables
| Variable | Required | What it does |
|---|---|---|
PUBLIC_WOOCOMMERCE_API_URL | Yes | Your WordPress site’s URL. The connector adds /wp-json/wc/v3, /wp-json/wc/store/v1 and /wp-json/wp/v2. Boot fails, naming this variable, if it is missing. |
PUBLIC_WOOCOMMERCE_API_KEY | No | A WooCommerce REST API consumer key, sent as HTTP Basic to wc/v3 — products, orders, coupons and customers. See the limitations. |
PUBLIC_WOOCOMMERCE_API_SECRET | No | The consumer secret that goes with it. |
PUBLIC_CONNECTOR | No | Only when more than one connector is installed: @misiki/woocommerce-connector names the one this build runs on. |
init.ts hands the connector every PUBLIC_WOOCOMMERCE_* variable that is set, camel-cased. The guide also lists PUBLIC_WOOCOMMERCE_ACCESS_TOKEN, PUBLIC_WOOCOMMERCE_ACCESS_KEY, PUBLIC_WOOCOMMERCE_STORE_ID and PUBLIC_WOOCOMMERCE_CHANNEL_ID; the connector’s source does not read them. The guide’s own example sets only the URL — the key and secret here are what wc/v3 calls authenticate with.
Every variable here begins PUBLIC_, and SvelteKit sends PUBLIC_ variables to the browser: treat each value you set as published.
What to set up on WooCommerce
- Create a REST API key under WooCommerce › Settings › Advanced › REST API for
PUBLIC_WOOCOMMERCE_API_KEYandPUBLIC_WOOCOMMERCE_API_SECRET— and read the limitations first. - Keep pretty permalinks on: the connector calls
/wp-json/…paths. - Let the storefront’s origin make cross-origin requests to WordPress (CORS): in production the browser calls
PUBLIC_WOOCOMMERCE_API_URLdirectly, not only the server.
How the integration works
The connector reads the catalogue, orders, coupons and customers from wc/v3 with the consumer key and secret; runs the cart and checkout through the Store API, wc/store/v1, where a session Cart-Token carries the basket; and reads pages from WordPress core’s wp/v2. Cart and checkout exist only in the Store API.
Limitations on WooCommerce
- The consumer key and secret the connector sends to
wc/v3come fromPUBLIC_WOOCOMMERCE_API_KEYandPUBLIC_WOOCOMMERCE_API_SECRET. SvelteKit sendsPUBLIC_variables to the browser, so every visitor to the store can read them and callwc/v3with whatever permissions the key has.
Before you rely on it
No connector has been exercised against a live production instance of its platform; each was written from the platform’s published source. The limits every backend shares and the errors every switch can meet are on the backends page.
An open question for WooCommerce’s maintainers: Is there any supported path to customer login without a JWT plugin? Today auth throws, because POST /customers creates an account but returns no session.
FAQ
Questions about Svelte Commerce on WooCommerce
Can I run a WooCommerce store on Svelte Commerce today?
Shoppers can browse, fill a cart and check out through WooCommerce’s Store API; they cannot sign in, and there is no wishlist. Before deploying, weigh the consumer key: the connector reads it from a PUBLIC_ variable, which every visitor’s browser receives.
How do I switch Svelte Commerce to WooCommerce?
Remove the connectors the storefront ships with, install @misiki/woocommerce-connector, set PUBLIC_WOOCOMMERCE_API_URL in .env and start the dev server. vite.config.ts resolves whichever connector is installed, so no file in the storefront changes.
Why can’t shoppers sign in on WooCommerce?
WooCommerce core has no endpoint that returns a shopper session: POST /customers creates an account but hands back no session. Rather than fake one, the connector’s auth throws. The Svelte Commerce maintainers have asked WooCommerce’s maintainers whether a supported path exists without a JWT plugin.
Sources
WOOCOMMERCE.md, read on ; CONNECTORS.md, read on ; the connector’s source at af8ed2c. Where they disagree with this page, they are right. WooCommerce is a trademark of its owner, named only to describe compatibility; see trademarks.