Introducción
Etch construye páginas. No construye una tienda. El módulo de WooCommerce añade los elementos y componentes que necesita una tienda —del precio de un producto al checkout entero— como componentes de Etch de verdad, que se colocan, se estilizan y se enlazan como cualquier otro.
Míralo
No se reimplementa nada
WooCommerce sigue haciendo el trabajo: su carrito, sus totales, sus impuestos, sus pasarelas, sus hooks. Lo que cambia es el markup donde aterrizan esos hooks.
Cada clase y cada selector del que depende su propio JavaScript se queda donde estaba; los nuestros se añaden al lado, nunca en su lugar. Un plugin que añade un campo al checkout lo sigue añadiendo.
Una tienda es la parte de un sitio que no te puedes permitir reconstruir. Revestir en vez de reescribir significa que una actualización de WooCommerce, una pasarela de pago o un plugin de envíos siguen funcionando el día después de cambiarle el aspecto a tu tienda.
Qué incluye
| Superficie | Componentes |
|---|---|
| Producto | Product Gallery, Product Badges, Product Price, Product Rating, Stock Status, Variation Picker, Add to Cart, Product Reviews |
| Catálogo | Breadcrumb, Catalog Bar, Catalog Pagination |
| Filtros | Catalog Filters, y cada grupo por separado: Price, Color, Attribute, Rating, Category |
| Búsqueda | Search — un diálogo que responde mientras se escribe |
| Carrito | Cart, y sus tres piezas: Cart Items, Cart Coupon, Cart Totals |
| Mini carrito | Cart Count y el cajón, Mini Cart |
| Checkout | Checkout, Checkout Form y Checkout summary |
| Cuenta | Account — un componente para todas sus pantallas |
El panel del constructor no está traducido, así que aquí se escriben tal y como los vas a leer al colocarlos. Todo lo que ve quien compra sí está traducido.
Donde una superficie tiene el componente entero y sus piezas, las dos cosas están a propósito: o colocas el conjunto, o montas la maqueta tú.
Estilos
Cada decisión visual es una custom property en la raíz del propio componente, y su valor por defecto lee uno de los trece tokens de tienda —color, los tres estados, radio, tamaño de control y una escala tipográfica de seis pasos—. Cambiar el aspecto de una tienda es una edición, no catorce.
El plugin nunca declara un token: vive en el respaldo de cada var(), que
es donde no estorba. Se ponen desde Fancy Etch → Design, donde vale
cualquier valor CSS — var(--tu-color) incluido, que es justo el punto.
Requisitos
| WordPress | 6.0 o superior |
| PHP | 8.1 o superior |
| WooCommerce | Cualquier versión con soporte |
| Etch | Necesario |
El módulo reviste el checkout clásico de WooCommerce, que es un formulario distinto del bloque de checkout. En una tienda que use el bloque, el componente de Checkout estilizaría algo que tus clientes no llegan a ver — la pantalla de ajustes y el panel del builder lo avisan cuando lo detectan.