Add to Cart
El formulario con su selector de cantidad. Añade por REST —sin recargar la página— y sigue funcionando como un formulario normal sin JavaScript.
Sabe lo que tiene delante: un producto agrupado recibe un enlace «Ver productos», uno externo su propio botón, y un variable sin selector al lado enlaza a su ficha en vez de fingir que se puede añadir.
Sus opciones
Cada componente se configura desde el panel de propiedades de Etch. El de añadir al carrito es el que más tiene que decir:
Fíjate en el grupo Colors: cada uno lee un token de tienda —
var(--fe-woo-accent, #1f2937)— así que un componente que no toques ya sigue la
paleta que hayas puesto en Fancy Etch → Design.
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Button label | texto | {this.fecommerce.single_add_to_cart_text} | Deja el enlace para usar las palabras de WooCommerce, ya traducidas. Dice «Añadir al carrito» incluso en un producto variable, porque el selector está aquí mismo: «Elegir opciones» es para los listados que no lo llevan. |
| Quantity label | texto | Quantity | |
| Show the quantity label | sí / no | on | Quítala en una tarjeta de producto, donde la palabra encima de un − 1 + cuesta una línea entera y no dice nada que el control no diga. Sólo se esconde a la vista: la etiqueta sigue atada al campo, así que el número conserva su nombre accesible. |
| Decrease button label | texto | Decrease quantity | |
| Increase button label | texto | Increase quantity | |
| Size preset | elección: full, compact | full | Compacto hace el selector de cantidad y el botón un tamaño más pequeños, que es lo que pide una tarjeta de catálogo. Un producto agrupado enseña un botón a su ficha en vez de su lista: tres selectores de cantidad son demasiado para una tarjeta, y es en su ficha donde se eligen. Si el selector se ve o no, lo decide el interruptor de abajo. |
| Show the quantity picker | sí / no | on | Apagado deja sólo el botón. La cantidad se envía igual —una—, con o sin JavaScript. |
| Colors → Background | texto | var(--fe-woo-accent, #1f2937) | |
| Colors → Text | texto | var(--fe-woo-accent-color, #ffffff) | |
| Colors → Hover background | texto | var(--fe-woo-accent-hover, color-mix(in srgb, var(--fe-woo-accent, #1f2937) 85%, var(--fe-woo-accent-color, #ffffff))) | |
| Colors → Button text on hover | texto | var(--fe-woo-accent-color-hover, var(--fe-woo-atc-color, #ffffff)) | |
| Colors → Borders | texto | var(--fe-woo-border, #e8ebef) | Las líneas entre las filas de un producto agrupado, y el contorno de una fila que hay que abrir para elegir. |
| Size → Corner radius | texto | var(--fe-woo-control-radius, 0.5rem) | |
| Size → Horizontal padding | texto | 1.25rem | |
| Size → Control height | texto | 2.75rem | Se aplica igual al botón y al selector de cantidad. |
| Product id | texto | {this.fecommerce.id} | Viene del producto que se está enseñando. Dentro de un bucle sigue sola a cada producto si el elemento del bucle se llama «this»; con cualquier otro nombre, átala a ese nombre. |
| Product name | texto | {this.fecommerce.name} | Viene del producto que se está enseñando. Dentro de un bucle sigue sola a cada producto si el elemento del bucle se llama «this»; con cualquier otro nombre, átala a ese nombre. |
| Product URL | texto | {this.fecommerce.permalink} | Viene del producto que se está enseñando. Dentro de un bucle sigue sola a cada producto si el elemento del bucle se llama «this»; con cualquier otro nombre, átala a ese nombre. |
| Minimum quantity | texto | {this.fecommerce.min_quantity} | Viene del producto que se está enseñando. Dentro de un bucle sigue sola a cada producto si el elemento del bucle se llama «this»; con cualquier otro nombre, átala a ese nombre. |
| Maximum quantity | texto | {this.fecommerce.max_quantity_attr} | Viene del producto que se está enseñando. Dentro de un bucle sigue sola a cada producto si el elemento del bucle se llama «this»; con cualquier otro nombre, átala a ese nombre. |
| Product buyable | texto | {this.fecommerce.buyable} | Si este producto puede ir al carrito con nada más que un id y una cantidad. Uno agrupado o externo no puede, y entonces esto enseña un enlace a donde sí se compra en vez de un formulario que sólo fallaría. |
| Product buy url | texto | {this.fecommerce.add_to_cart_url} | A dónde lleva el enlace cuando el producto no se puede comprar aquí. |
| Unavailable label | texto | {this.fecommerce.add_to_cart_text} | Lo que dice ese enlace: «Ver productos», «Comprar en…», «Leer más». |
| Product kind | texto | {this.fecommerce.type} | El tipo de producto de WooCommerce. Un producto agrupado no se compra: se compran sus hijos, una cantidad cada uno, así que esto cambia el formulario por esa lista. |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-atc-bg | var(--fe-woo-accent, #1f2937) | El fondo del botón. |
--fe-woo-atc-hover-bg | var(--fe-woo-accent-hover, color-mix(in srgb, var(--fe-woo-atc-bg, #1f2937) 85%, var(--fe-woo-atc-color, #ffffff))) | El fondo al pasar el ratón. Se calcula del acento si no lo pones. |
--fe-woo-atc-hover-color | var(--fe-woo-accent-color-hover, var(--fe-woo-atc-color, #ffffff)) | Su texto — la pareja viaja junta, así que un hover más claro puede llevar texto más oscuro. |
--fe-woo-atc-padding-inline | 1.25rem | Cuánto respira el botón a los lados. La altura la fija el tamaño de control. |
--fe-woo-atc-font-weight | var(--fe-woo-button-weight, 500) | El grosor de la etiqueta. |
--fe-woo-atc-min-size | var(--fe-woo-control-size, 2.75rem) | La altura del botón. Cámbiala sólo si quieres desalinearlo del selector a propósito. |
--fe-woo-atc-status-color | var(--fe-woo-success, #15803d) | «Añadido al carrito». |
--fe-woo-atc-error-color | var(--fe-woo-danger, #b91c1c) | Lo que haya salido mal en su lugar. |
--fe-woo-atc-feedback-size | var(--fe-woo-text-l, 0.94rem) | El tamaño de esos dos mensajes. |