Overview
Etch builds pages. It does not build a shop. The WooCommerce module adds the elements and components a store needs — from a product price to the whole checkout — as real Etch components you place, style and bind like any other.
Watch it
Nothing is reimplemented
WooCommerce keeps doing the work: its cart, its totals, its taxes, its gateways, its hooks. What changes is the markup those hooks land in.
Every class and selector its own JavaScript depends on stays exactly where it was; ours are added beside them, never instead of them. A plugin that adds a field to the checkout keeps adding it.
A shop is the part of a site you cannot afford to rebuild. Re-skinning instead of rewriting means a WooCommerce update, a payment gateway or a shipping plugin keeps working the day after you restyle your store.
What you get
| Surface | Components |
|---|---|
| Product | Product Gallery, Product Badges, Product Price, Product Rating, Stock Status, Variation Picker, Add to Cart, Product Reviews |
| Catalog | Breadcrumb, Catalog Bar, Catalog Pagination |
| Filters | Catalog Filters, and each group on its own: Price, Color, Attribute, Rating, Category |
| Search | Search — a dialog that answers as you type |
| Cart | Cart, and its three pieces: Cart Items, Cart Coupon, Cart Totals |
| Mini cart | Cart Count and the drawer |
| Checkout | Checkout, Checkout Form and Checkout summary |
| Account | Account — one component for every screen |
Where a surface has an all-in-one component and its pieces, both are there on purpose: place the whole thing, or lay the pieces out yourself.
Styling
Every visual choice is a CSS custom property on the component's own root, and its default reads one of thirteen shop-wide tokens — colour, the three states, radius, control size and a six-step type scale. Changing the look of a shop is one edit, not fourteen.
The plugin never declares a token: it lives in the fallback of each
var(), which is where it does not get in your way. Set them from Fancy Etch
→ Design, where any CSS value works — var(--your-colour) included, which is
the point.
Requirements
| WordPress | 6.0 or newer |
| PHP | 8.1 or newer |
| WooCommerce | Any currently supported version |
| Etch | Required |
The module re-skins WooCommerce's classic checkout, which is a different form from the checkout block. On a shop using the block, the Checkout component would style something your customers never reach — the settings screen and the builder panel both say so when they detect it.