Product Badges

Las etiquetas de un producto: su descuento, y las demás que enciendas — sin stock, bajo pedido, destacado. Cada una tiene su grupo en el panel, con su interruptor, su texto y sus dos colores.

El descuento se calcula de los precios y se redondea al entero más cercano, igual que el «−20%» que el carrito y el checkout pintan en cada línea, así que la tarjeta y el carrito nunca dicen cosas distintas del mismo producto. Cuando las variaciones rebajan distinto —o unas sí y otras no— dice «Hasta −30%»: una cifra sola prometería ese 30 % en todas. Vacía el texto de «Up to» para enseñar la cifra mayor sin nada delante.

Una etiqueta se ve cuando el producto la tiene y su interruptor está encendido; cuando no toca ninguna, el componente no ocupa nada, así que una tarjeta sin etiquetas no se queda con un hueco. En el constructor se ven todas las que estén encendidas, sea cual sea el producto de muestra, para que siempre haya una que pulsar y estilar.

Props

Prop	Tipo	Por defecto	Qué hace
Discount → Show it	sí / no	on
Discount → «Up to» text	texto	{this.fecommerce.badge_up_to_label}	Sólo sale cuando las variaciones rebajan distinto —«Hasta −30%»— porque una cifra sola prometería ese 30 % en todas. Vacíalo para enseñar la cifra mayor sin nada delante.
Discount → Before the figure	texto	−	El signo menos por defecto, no un guion: WordPress convierte un guion suelto en una raya, «–20%», y a éste lo deja en paz. El carrito y el checkout usan el mismo. Escribe «Ahorra » para leer «Ahorra 30%».
Discount → After the figure	texto	%	Escribe «% menos» para leer «30% menos».
Discount → Background	texto	#b91c1c	Roja por su cuenta, como el precio rebajado: una convención, no un estado, así que cambiar el color de los mensajes de error no repinta todas las rebajas.
Discount → Text	texto	#ffffff
Out of stock → Show it	sí / no	on
Out of stock → Text	texto	{this.fecommerce.badge_out_of_stock_label}
Out of stock → Background	texto	var(--fe-woo-muted, #6b7280)	En gris, que es como se ve «no disponible», con la superficie como texto — la pareja que «Design» ya comprueba como texto apagado sobre la superficie, así que contrasta en cualquier paleta que la tienda haya aprobado.
Out of stock → Text colour	texto	var(--fe-woo-surface, #ffffff)
On backorder → Show it	sí / no	off	Nunca junto a «Sin stock»: un producto bajo pedido se puede comprar, y decirle a quien compra que está agotado es perder la venta.
On backorder → Text	texto	{this.fecommerce.badge_backorder_label}
On backorder → Background	texto	var(--fe-woo-warning-soft, #fef3c7)
On backorder → Text colour	texto	var(--fe-woo-warning, #b45309)
Featured → Show it	sí / no	off	Los productos marcados con la estrella en la lista de productos de WooCommerce.
Featured → Text	texto	{this.fecommerce.badge_featured_label}
Featured → Background	texto	var(--fe-woo-accent, #111827)	La pareja de la marca, la misma en que se leen todos los botones — así que su contraste es el que la tienda ya comprobó en «Design».
Featured → Text colour	texto	var(--fe-woo-accent-color, #ffffff)
Badge style → Text size	texto	var(--fe-woo-text-xs, 0.75rem)
Badge style → Weight	texto	600
Badge style → Padding	texto	0.25rem 0.5rem
Badge style → Corner radius	texto	var(--fe-woo-control-radius, 0.5rem)	Sigue a los botones de la tienda, así que botones en píldora dan etiquetas en píldora. Con 999px son píldoras por su cuenta.
Layout → Direction	elección: row, column	row	Apiladas es la esquina habitual de una foto de producto.
Layout → Alignment	elección: flex-start, center, flex-end	flex-start	A lo largo de la línea si van en fila; a un lado si van apiladas. «End» con «Stacked» las pone en la esquina derecha.
Layout → Gap	texto	0.38rem
Product badges	texto	{this.fecommerce.badge_flags}	Qué etiquetas tiene este producto, como palabras: «discount out-of-stock». 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.
Discount	texto	{this.fecommerce.discount_percent_text}	La cifra sola, sin el signo. En un bucle, igual que la de arriba.

Sus variables propias

Variable	Por defecto	Qué controla
--fe-woo-badges-discount-bg	#b91c1c	La etiqueta de descuento. Roja por su cuenta, como el precio rebajado: una convención, no un estado, así que cambiar «Error» no repinta todas las rebajas.
--fe-woo-badges-discount-color	#ffffff	Su texto.
--fe-woo-badges-out-of-stock-bg	var(--fe-woo-muted, #6b7280)	Sin stock: en gris, que es como se ve «no disponible». La pareja que «Design» ya comprueba como texto apagado sobre la superficie.
--fe-woo-badges-out-of-stock-color	var(--fe-woo-surface, #ffffff)	Su texto.
--fe-woo-badges-backorder-bg	var(--fe-woo-warning-soft, #fef3c7)	Bajo pedido: se puede comprar, tardará más — la pareja de aviso que usan las insignias de pedido de la cuenta.
--fe-woo-badges-backorder-color	var(--fe-woo-warning, #b45309)	Su texto.
--fe-woo-badges-featured-bg	var(--fe-woo-accent, #111827)	Destacado: la pareja de la marca, la misma en que se leen todos los botones.
--fe-woo-badges-featured-color	var(--fe-woo-accent-color, #ffffff)	Su texto.
--fe-woo-badges-size	var(--fe-woo-text-xs, 0.75rem)	El texto de todas las etiquetas.
--fe-woo-badges-weight	600	Su grosor.
--fe-woo-badges-padding	0.25rem 0.5rem	El aire dentro de cada etiqueta.
--fe-woo-badges-direction	row	row una al lado de otra, column apiladas — la esquina habitual de una foto de producto.
--fe-woo-badges-align	flex-start	Dónde se colocan: a lo largo de la línea si van en fila, a un lado si van apiladas. Cada valor significa lo mismo en los dos casos.