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.

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.

Requests the @misiki/woocommerce-connector source makes, by storefront service
ServiceWhat it requests
productGET /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
categoryGET /wp-json/wc/v3/products/categories, by slug or numeric id, and GET /products?category={id} for a category’s products
searchGET /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
cartGET /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
checkoutGET /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
orderGET /wp-json/wc/v3/orders with page, per_page, search, orderby, order, customer and status, and GET /orders/{id}
addressGET and PUT /wp-json/wc/v3/customers/{id}, reading and writing the customer’s billing and shipping blocks
payment-methodGET /wp-json/wc/v3/payment_gateways

WooCommerce rules the connector follows

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

What Svelte Commerce reads to reach WooCommerce
VariableRequiredWhat it does
PUBLIC_WOOCOMMERCE_API_URLYesYour 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_KEYNoA WooCommerce REST API consumer key, sent as HTTP Basic to wc/v3 — products, orders, coupons and customers. See the limitations.
PUBLIC_WOOCOMMERCE_API_SECRETNoThe consumer secret that goes with it.
PUBLIC_CONNECTORNoOnly 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

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

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.

Offer a sandbox or a correction

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.

Read the whole guide

Chat on WhatsApp