Carrito
La página de carrito entera, revestida. Cupones, envíos e impuestos siguen funcionando — debajo está la maquinaria propia de WooCommerce.
Se puede partir: apaga Include the totals o Include the coupon field y usa los componentes sueltos para montar la maqueta tú.
| Componente | Qué es |
|---|---|
| Cart | La página entera |
| Cart Items | Sólo la lista de productos |
| Cart Coupon | El campo de descuento |
| Cart Totals | Los totales y el botón de finalizar |
Cart va en la página que WooCommerce tenga puesta como carrito. Y si usas una pieza, apaga esa misma pieza en el componente entero — si no, la página tiene dos campos de cupón, y los scripts de WooCommerce buscan el primero.
Un descuento se ve de principio a fin. Una línea rebajada enseña su precio normal tachado, el que se paga y el porcentaje —«$18.00 $16.00 −11%»—, y bajo el total, cuánto se ahorra el pedido entero. Las mismas cifras que el minicarrito y el checkout, con la misma cuenta, así que los tres nunca discrepan sobre un producto. El carrito propio de WooCommerce sólo enseña el precio pagado. La frase bajo el total es la que escribes una vez en Fancy Etch → Shop → Savings wording.
Guardar un cambio de cantidad
Por defecto, cambiar una cantidad pulsa «Actualizar carrito» por el comprador un momento después, así nadie pierde un cambio por irse sin pulsarlo — el mini carrito ya se comporta así. Lo que corre es la actualización propia de WooCommerce, con sus hooks y sus cupones, y el botón se queda donde está para quien lo busque. Se apaga en Fancy Etch → Shop para conservar el comportamiento clásico.
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Include the totals | sí / no | on | Encendido, donde los pone WooCommerce. Apágalo sólo si vas a colocar el componente Cart Totals en otro sitio de la página — si no, acabas con dos. |
| Include the coupon field | sí / no | on | Encendido, debajo de la tabla del carrito. Apágalo si vas a colocar el componente Cart Coupon en otro sitio: dos campos de cupón comparten el mismo id, y WooCommerce lee el que aparezca primero en el documento. |
| 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-cart-accent, #111d2e) 85%, var(--fe-woo-cart-accent-color, #ffffff))) | |
| Colors → Button text on hover | texto | var(--fe-woo-accent-color-hover, var(--fe-woo-cart-accent-color, #ffffff)) |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-cart-thumbnail-size | 4.5rem | La foto del producto en cada línea. |
--fe-woo-cart-header-size | var(--fe-woo-text-xs, 0.75rem) | Los encabezados de columna de la tabla. |
--fe-woo-cart-remove | #6b7280 | La × que quita una línea. |
--fe-woo-cart-sale-bg | #dcfce7 | La insignia junto a un precio rebajado («−11%»). |
--fe-woo-cart-sale-color | #15803d | Su texto. |
--fe-woo-cart-positive | var(--fe-woo-success, #15803d) | La frase bajo el total que dice cuánto se ahorra. |
--fe-woo-cart-progress | #0f766e | La barra de un objetivo de envío gratis. |
--fe-woo-cart-track | var(--fe-woo-border, #e8ebef) | La parte sin llenar de esa barra. |
--fe-woo-cart-column | 20rem | Cuánto mide la columna de totales al lado de la lista. |
--fe-woo-cart-max-width | none | Un techo para el carrito entero. none lo deja llenar su contenedor. |
Las piezas
Colocadas por su cuenta, para maquetar la página de carrito tú. Leen las mismas variables que el componente entero.