La cuenta
Un componente para todas sus pantallas: acceso y registro, escritorio, pedidos, direcciones, descargas y detalles de la cuenta.
WooCommerce elige la pantalla según la URL, así que este único componente las dibuja todas. La barra lateral, el escritorio, la tabla de pedidos, los formularios de dirección y las descargas están revestidos.
Account sólo funciona en la página que WooCommerce tenga puesta como «mi cuenta». En cualquier otra, todos sus endpoints responden 404 — el panel del builder lo avisa al colocarlo.
Acceso y registro
Quien no ha iniciado sesión ve esto en la página de la cuenta: entrar a un lado y crear una cuenta al otro. Son los formularios del propio WooCommerce —los mismos campos, las mismas comprobaciones, y cualquier plugin que se enganche a ellos sigue funcionando—, vestidos como el resto de tu tienda.
- La tarjeta de registro sólo sale si la tienda lo permite, en las opciones de creación de cuentas de WooCommerce → Ajustes → Cuentas y privacidad. Si está apagado, el acceso queda solo en una tarjeta.
- Lo que pide el formulario sigue esos mismos ajustes: un campo de nombre de usuario cuando el correo no hace de usuario, y una casilla de contraseña —o una línea que avisa de que se enviará por correo un enlace para crearla—.
- Los campos de nombre y la segunda casilla de contraseña son del plugin, y se encienden en Fancy Etch → Shop: El registro.
- El ojo de cada casilla de contraseña enseña lo escrito. Es el botón del propio WooCommerce, con el mismo estilo que los campos.
- La línea de privacidad sobre «Register» es el texto que pones para el registro en WooCommerce → Ajustes → Cuentas y privacidad.
Para estilarla mientras montas, pon Screen to preview en login.
Ver una pantalla mientras montas
El lienzo no puede identificar a nadie, así que el componente tiene una prop Screen to preview: eliges cualquiera de las siete y la estilizas sin salir del editor.
Cada pantalla puede tener además su propio aspecto. Selecciona el componente
Account, abre su clase —.fe-woo-account-embed— en el panel de CSS de Etch y
anida una regla para esa pantalla:
/* Sólo en los formularios de dirección */
&:has([data-fe-woo-screen="edit-address"]) {
--fe-woo-account-page: var(--white);
}
Las pantallas son las mismas siete de Screen to preview: dashboard,
orders, view-order, downloads, edit-address, edit-account y login.
Sus opciones
Una prop y un grupo de colores: eliges la pantalla que quieres ver mientras montas, y los colores ya leen los tokens de tu tienda.
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Colors → Card background | texto | var(--fe-woo-surface, #ffffff) | |
| Colors → Borders | texto | var(--fe-woo-border, #e8ebef) | |
| Colors → Buttons | texto | var(--fe-woo-accent, #111d2e) | |
| Colors → Button text | texto | var(--fe-woo-accent-color, #ffffff) | |
| Colors → Buttons on hover | texto | var(--fe-woo-accent-hover, color-mix(in srgb, var(--fe-woo-account-accent, #111d2e) 85%, var(--fe-woo-account-accent-color, #ffffff))) | |
| Colors → Button text on hover | texto | var(--fe-woo-accent-color-hover, var(--fe-woo-account-accent-color, #ffffff)) | |
| Screen to preview | elección: dashboard, orders, view-order, downloads, edit-address, edit-account, login | dashboard | Un bloque, todas las pantallas de la cuenta: WooCommerce elige cuál por la URL. Todas están detrás de un acceso —y la propia pantalla de acceso es lo que ve quien no ha entrado—, así que así se miran mientras las estilas. Las tres insignias de estado están en la lista de pedidos. No cambia nada en el sitio. |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-account-page | var(--fe-woo-panel, #f6f7f9) | El fondo de la página, detrás del panel de la cuenta. |
--fe-woo-account-nav-active | var(--fe-woo-accent, #111d2e) | El fondo de la pantalla en la que estás, en la barra lateral. |
--fe-woo-account-nav-active-color | var(--fe-woo-accent-color, #ffffff) | Su texto. |
--fe-woo-account-positive | var(--fe-woo-success, #15803d) | «Completado», «Procesando» — el estado de un pedido que va bien. |
--fe-woo-account-positive-bg | var(--fe-woo-success-soft, #dcfce7) | El fondo pálido que lleva detrás. |
--fe-woo-account-warning | var(--fe-woo-warning, #b45309) | «En espera», «Pendiente de pago». |
--fe-woo-account-warning-bg | var(--fe-woo-warning-soft, #fef3c7) | Su fondo. |
--fe-woo-account-invalid | var(--fe-woo-danger, #b91c1c) | «Fallido», «Cancelado», y un campo que hay que corregir. |
--fe-woo-account-invalid-bg | var(--fe-woo-danger-soft, #fee2e2) | Su fondo. |
--fe-woo-account-neutral | #374151 | «Reembolsado», «Borrador» — terminado, y ni bien ni mal. |
--fe-woo-account-neutral-bg | var(--fe-woo-panel, #f3f4f6) | Su fondo. |