Checkout
El checkout clásico de WooCommerce, revestido: contacto, dirección, envío y pago en una columna; el pedido en la otra. Todas las pasarelas y todos los hooks de otros plugins siguen funcionando, y enseña el recibo de «gracias» después de pagar, en la misma página.
Y el recibo, en la misma página, una vez pagado el pedido:
| Componente | Qué es |
|---|---|
| Checkout | El conjunto |
| Checkout Form | El checkout sin su resumen |
| Checkout summary | El panel «Tu pedido», suelto |
Para montar tus dos columnas, coloca Checkout Form y Checkout summary uno al lado del otro.
Esto reviste el checkout clásico, que es un formulario distinto. En una tienda que use el bloque de checkout de WooCommerce, este componente estilizaría algo que tus clientes no llegan a ver — la pantalla de ajustes y el panel del builder lo avisan cuando lo detectan.
Saltarse la página de carrito
Fancy Etch → Shop puede quitar una pantalla de en medio: /cart lleva al
checkout, el mini carrito ofrece sólo «Finalizar compra», y el resumen del pedido
del checkout pasa a ser editable — con stepper y botón de eliminar en cada línea.
Las tres cosas van juntas a propósito. Quitar la página de carrito sin dejar corregir una cantidad donde se aterriza deja sin salida a quien añadió dos de lo que no era.
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Screen to preview | elección: form, receipt, failed | form | Este bloque son dos pantallas: WooCommerce pinta el checkout antes de pagar y el recibo de «gracias» después, en la misma página. El lienzo nunca tiene un pedido pagado, así que así se mira el recibo mientras lo estilas. No cambia nada en el sitio. |
| Colors → Card background | texto | var(--fe-woo-surface, #ffffff) | |
| Colors → Borders | texto | var(--fe-woo-border, #e8ebef) | |
| Colors → Place order button | 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-checkout-accent, #111d2e) 85%, var(--fe-woo-checkout-accent-color, #ffffff))) | |
| Colors → Button text on hover | texto | var(--fe-woo-accent-color-hover, var(--fe-woo-checkout-accent-color, #ffffff)) | |
| Include the order summary | sí / no | on | Apagado deja sólo el formulario, para poder colocar el panel de «Tu pedido» aparte con el componente Checkout summary. Pon exactamente un resumen en la página: con dos, WooCommerce refresca el que el navegador encuentre primero. |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-checkout-invalid | var(--fe-woo-danger, #b91c1c) | Un campo que hay que corregir. |
--fe-woo-checkout-positive | var(--fe-woo-success, #15803d) | Un cupón que se ha aplicado. |
--fe-woo-checkout-sale-bg | #dcfce7 | La insignia de una línea rebajada. |
--fe-woo-checkout-sale-color | #15803d | Su texto. |
--fe-woo-checkout-danger | var(--fe-woo-danger, #b91c1c) | Un pago fallido, o una línea que no se puede comprar. |
--fe-woo-checkout-danger-bg | var(--fe-woo-danger-soft, #fee2e2) | El fondo pálido que lleva detrás. |
Las piezas
Colocadas por su cuenta, para maquetar el checkout tú. Leen las mismas variables que el componente entero.