Search
Un botón que abre un diálogo con resultados mientras se escribe, directamente de WooCommerce — sin recargar la página y sin una segunda copia de tu catálogo. Antes de que nadie escriba enseña lo que la tienda haya marcado como destacado.
Sin JavaScript sigue siendo un enlace a la búsqueda del propio sitio, y el formulario de dentro es un GET normal.
Se coloca donde quieras — una cabecera, un menú, una barra lateral. Es un botón, no un componente de catálogo, y por eso tiene pestaña propia.
Apaga Show the button label para dejar sólo la lupa. El texto se queda para los lectores de pantalla y el control por voz, así que el botón conserva su nombre — sólo deja de dibujarse.
A la plantilla de tu catálogo, con un encabezado que dice qué se buscó: La página de resultados.
Encuentra lo que se quiso escribir
Quien compra no escribe el nombre de un producto como lo escribió la tienda. El buscador lo encuentra igual, sin servicios externos y sin índices que reconstruir:
- La puntuación y los acentos no cuentan. «tshirt», «t shirt» y «T-Shirt» son la misma palabra, y también «cafe» y «café».
- Las erratas se perdonan. «hodie», «hoodye» y «hoddy» encuentran Hoodie. Una palabra larga admite más errores que una corta, y una que empieza bien admite uno más: casi nadie se equivoca en las primeras letras.
- Lo exacto va primero. La búsqueda que perdona sólo entra cuando la exacta no encuentra nada, así que una búsqueda que ya funciona nunca se llena de parecidos.
Compara contra tu propio catálogo, guardado en una caché que se renueva cuando cambia un producto.
La página de resultados también perdona. Con Rescue empty searches encendido —lo está de fábrica, en Fancy Etch → Shop— una búsqueda que no encuentra nada se repite con cada palabra corregida contra las palabras de tus productos, y la barra del catálogo lo dice: «Showing results for “hoodie”. Nothing matched “hodie” exactly». Quien vio tres sudaderas en el diálogo y pulsó «See all results» nunca aterriza en una página vacía, y una búsqueda que encontró algo nunca se cambia.
Detalles bajo cada resultado
Un viaje necesita su duración y su fecha, un curso su nivel, un vino su año. Result details los pone bajo el nombre de cada resultado, en una fila y con un divisor entre ellos:
Trekking al Cocuy Un día · Dom 30 Ago · Dificultad: Media
Escribe cada detalle en su línea, o sepáralos con ;, y pon cada campo entre
signos % con la etiqueta que quieras alrededor:
%dias%; %fecha%; Dificultad: %dificultad%
Cada campo se busca allí donde lo guarde tu tienda, en este orden:
- Un atributo del producto —
%color%encuentra el atributo global Color (pa_color) o uno escrito en el propio producto. - Una taxonomía del producto — sus términos, separados por comas:
%product_brand%. - Un campo de ACF, ya con el formato que tiene configurado, así que una fecha se lee como fecha.
- Un campo personalizado — donde guardan los suyos JetEngine, ACPT, Meta Box y casi todos los demás. Usa el nombre del campo, no su etiqueta.
Un detalle con todos sus campos vacíos no se pinta, así que un producto sin dificultad nunca enseña «Dificultad:» sola. Un detalle sin campos —«Envío gratis»— sale siempre.
Etch lee todo lo que va entre llaves en una prop como un dato dinámico suyo, así
que {dificultad} llegaría vacío antes de que el buscador lo viera.
Sólo se pueden leer los campos escritos en esta prop: el sitio firma esa lista al dibujar la página y el buscador no responde de ningún otro, así que los campos privados de tus productos siguen siendo privados. Hasta ocho campos.
El divisor, su espacio, el tamaño y el color son variables:
--fe-woo-search-detail-divider acepta cualquier texto entre comillas —'|',
'/', o '' para ninguno— y los lectores de pantalla se lo saltan.
Sus opciones
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Show while editing | sí / no | on | El diálogo dibujado abierto en el lienzo, para poder estilarlo: flota sobre la página como lo hará, y nada más se mueve. Apágalo cuando el estilo esté resuelto. |
| Button label | texto | Search | |
| Show the button label | sí / no | on | Apagado deja sólo la lupa. El texto se queda para los lectores de pantalla y el control por voz, así que el botón conserva su nombre: sólo deja de dibujarse. |
| Icon | imagen | el icono de fábrica | La lupa del botón. Cualquier SVG, de la biblioteca de medios o pegado como URI data:. Sus colores se cambian por el del icono, así que sigue a la paleta. |
| Placeholder | texto | Search products… | |
| Search in | elección: names, everything | names | Dónde mirar. WooCommerce busca en el nombre y el SKU y en nada más, a propósito; «También las descripciones» añade el extracto y la descripción, que es lo que espera una tienda que escribe qué es una cosa en vez de nombrarla — a costa de una consulta más pesada en un catálogo grande. Las erratas y la puntuación se perdonan igual: «tshirt» encuentra T-Shirt y «hodie» encuentra Hoodie. |
| Show suggestions | sí / no | on | La fila de palabras que se ofrece antes de que nadie escriba. Apagada, el diálogo abre sólo con el campo. |
| Suggestions | texto | — | Qué palabras ofrecer, separadas por comas. Vacío, ofrece las categorías de la tienda. |
| Suggestions text → Size | texto | var(--fe-woo-text-m, 0.88rem) | |
| Suggestions text → Colour | texto | var(--fe-woo-color, #111827) | |
| Show featured products first | sí / no | on | Lo que tiene que decir un buscador vacío. Apagado, el diálogo espera en silencio a que alguien escriba. |
| Result details | texto | — | Detalles bajo el nombre de cada resultado, uno al lado del otro y con un divisor entre ellos. Escribe uno por línea o sepáralos con «;». Escribe un campo entre signos % y la etiqueta que quieras alrededor — «Dificultad: %dificultad%». Un campo puede ser un atributo del producto, una taxonomía, un campo de ACF o un campo personalizado (JetEngine, ACPT…). Un detalle con todos sus campos vacíos no se pinta. |
| Size → Icon size | texto | var(--fe-woo-icon-size, 1.5rem) | |
| Size → Dialog width | texto | 40rem | |
| Size → Thumbnail | texto | 3.5rem | |
| Colors → Icon | texto | currentColor | |
| Colors → Surface | texto | var(--fe-woo-surface, #ffffff) | |
| Colors → Panel | texto | var(--fe-woo-panel, #f6f7f9) | La fila bajo el ratón, el marco de la miniatura y el botón que abre la búsqueda. |
| Colors → Border | texto | var(--fe-woo-border, #e8ebef) | |
| Colors → Accent | texto | var(--fe-woo-accent, #111827) | El contorno y el tinte que toma una sugerencia al elegirla o al pasar el ratón. |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-search-icon-size | var(--fe-woo-icon-size, 1.5rem) | La lupa del botón. Lee --fe-woo-icon-size, el mismo que el carrito y el corazón. |
--fe-woo-search-icon-stroke | var(--fe-woo-icon-stroke, 2) | El grosor de la línea de la lupa. Lee --fe-woo-icon-stroke, el mismo que el carrito y el corazón. |
--fe-woo-search-icon-color | var(--fe-woo-color, #111827) | El color del botón que lo abre. El componente escribe currentColor, así que toma el de la cabecera que lo rodea, como el carrito y el contador de la wishlist. |
--fe-woo-search-width | 40rem | Cuánto mide de ancho el diálogo. |
--fe-woo-search-photo | 3.5rem | La miniatura de cada resultado. |
--fe-woo-search-chip-size | var(--fe-woo-text-m, 0.88rem) | Las sugerencias que se ofrecen antes de que nadie escriba. Salían un paso más grandes que el resto del diálogo — el porqué está anotado en search.css. |
--fe-woo-search-chip-color | var(--fe-woo-search-color, #111827) | Y su texto. |
--fe-woo-search-detail-size | var(--fe-woo-text-s, 0.81rem) | La fila de detalles bajo el nombre de cada resultado. |
--fe-woo-search-detail-color | var(--fe-woo-search-muted, #6b7280) | Su color. Lee el del texto secundario. |
--fe-woo-search-detail-divider | '·' | Lo que va entre dos detalles, entre comillas —'·', '|', '/'— o '' para ninguno. Los lectores de pantalla se lo saltan. |
--fe-woo-search-detail-gap | 0.5rem | El espacio a cada lado del divisor. |