Catalog Filters
La columna de filtros entera en un componente: precio, muestras de color, atributos, valoración y categorías, en ese orden. Cada grupo se puede colocar también por su cuenta — ver Filtros.
¿Usas los dos?
Si colocas un grupo por su cuenta y Catalog Filters, apaga ese grupo aquí o saldrá dos veces.
Sus opciones
Cada grupo se puede apagar aquí — que es lo que se hace cuando ese grupo se coloca por separado.
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Heading | texto | Filters | Escribe «none» para quitarlo y poner tu propio encabezado encima: el «limpiar todo» se va con él, y cada grupo conserva su «Limpiar». Vacío no es lo mismo: vacío es también lo que llega cuando nadie lo ha tocado, así que significa «deja el encabezado como está». |
| Groups → Price range | sí / no | on | |
| Groups → Rating | sí / no | on | |
| Groups → Categories | sí / no | on | |
| Groups → Attributes | texto | all | «all», o los nombres de los atributos separados por comas — color,talla. Un atributo sin términos en uso no aparece. |
| Colour attributes | elección: all, except | all | |
| Several chosen at once | elección: or, and | or | «Cualquiera» es lo que quiere decir casi todo el mundo al marcar dos. El widget de WooCommerce viene con «todos». |
| Counts | elección: yes, brackets, no | yes | |
| Folding → Fold the group | sí / no | off | Convierte el título en un desplegable, así una columna larga se lee como una lista de encabezados. Un grupo que esté filtrando algo se abre siempre, diga lo que diga el estado de abajo. |
| Folding → It starts | elección: open, closed, first | open | |
| Show more → Choices before it | texto | 0 | Cuántas opciones enseña un grupo antes de que el resto se vayan detrás del botón. 0 las enseña todas. Estén escondidas o no, todas están en la página: sin JavaScript no se pierde ninguna. |
| Show more → Its wording | texto | — | Vacío es «Ver 12 más», traducido. Escribe el tuyo con {count} donde va la cifra. |
| Show more → And once open | texto | — | Vacío es «Ver menos», traducido. |
| Pill size → Text size | texto | 0.88rem | |
| Pill size → Padding | texto | 0.31rem 0.63rem | Vertical y horizontal, como lo escribe CSS: «0.31rem 0.63rem». |
| Count text → Size | texto | 0.88em | |
| Count text → Colour | texto | var(--fe-woo-muted, #6b7280) | |
| Colours → Field background | texto | var(--fe-woo-surface, #ffffff) | |
| Colours → Chosen background | texto | var(--fe-woo-panel, #f6f7f9) | |
| Colours → Borders | texto | var(--fe-woo-border, #e8ebef) | |
| Colours → Chosen | texto | var(--fe-woo-accent, #111827) | Todo lo elegido: casillas marcadas, contornos de muestras y el rango de precio. |
| Colours → Text on the chosen one | texto | var(--fe-woo-accent-color, #ffffff) | La marca de dentro de una casilla y la etiqueta de un filtro elegido. |
| Colours → Stars | texto | #b45309 | La parte llena de cada fila de valoración. |
| Colours → Empty stars | texto | #d1d5db | El resto de las cinco, para que la fila se lea como una nota y no como una palabra. |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-filters-count-color | var(--fe-woo-filters-muted, #6b7280) | El «(12)» que va detrás de cada valor. |
--fe-woo-filters-count-size | 0.88em | Su tamaño, relativo a la etiqueta de al lado. |
--fe-woo-filters-title-size | var(--fe-woo-text-xl, 1.13rem) | El tamaño del encabezado de cada grupo — «Precio», «Color». |
--fe-woo-filters-title-color | var(--fe-woo-filters-color, #111827) | Y su color. |
--fe-woo-filters-label-size | 1em | El texto de cada elección. En el filtro de precio, que no tiene elecciones que etiquetar, son las dos cifras del deslizador y los campos «Min» y «Max». |
--fe-woo-filters-label-color | var(--fe-woo-filters-color, #111827) | Y su color. Lo elegido conserva el suyo: el tinte y la marca dicen más que un tono. |
--fe-woo-filters-star | #b45309 | Una estrella llena en el filtro de valoración. |
--fe-woo-filters-star-empty | #d1d5db | El resto de las cinco, para que la fila se lea como una nota. |
--fe-woo-filters-swatch-size | 2.25rem | Cuánto mide cada muestra de color. |
--fe-woo-filters-pill-size | var(--fe-woo-text-m, 0.88rem) | El texto de una pastilla — así se dibuja un atributo sin muestras. |
--fe-woo-filters-pill-padding | 0.31rem 0.63rem | Su espaciado: vertical y horizontal, como lo escribe CSS. |
--fe-woo-filters-chosen-bg | color-mix(in srgb, var(--fe-woo-filters-accent, #111827) 10%, transparent) | El tinte detrás de lo que está elegido. |