> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# ws-filters

> ws-filters bundles all dynamically generated and custom filters of a search or category page and controls their layout, order, and visibility.

`<ws-filters>` is the central control component for the filter presentation in the storefront. All `ws-filter` instances that are available for the search result or category are integrated in this component.

***

## Requirement

* The component must be present when `<ws-filter>` is used.
* `ws-filters` contains all filters (`ws-filter`).
* `ws-filters` may only appear **once** per page/view.

***

## Component

`<ws-filters>` is the central container component in which all `ws-filter` instances are embedded.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filters>
  ...

  <ws-filter type="checkbox" multiple="true" name="color"></ws-filter>
  <ws-filter type="checkbox" multiple="true" name="size"></ws-filter>

  ...
</ws-filters>
```

### Hide filter options (`hide-universal-options`)

The `hide-universal-options` feature hides filter options that apply to all products in the current result set. Such options effectively have no filter effect, since they don't restrict the result. Hiding them improves clarity in the filter list.

**How it works**

A filter option is hidden when its hit count equals the total number of products in the result set. Example: In the "Pet food" category there are 100 products. All 100 products are suitable for dogs. When the "Animal type" filter is selected, the "Dog" option is hidden because it has no filter effect – all products already apply.

The feature is disabled by default and must first be activated as follows:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filters hide-universal-options="true">
  ...
</ws-filters>
```

***

## Visibility of filters (hiding)

<Info>
  From `ws-search-component-1.9.1.js`, the [visibility](/en/ws-search/integration-in-die-templates-storefront/sichtbarkeit-von-elementen-an-komponenten-koppeln) attribute provides a native replacement for this workaround. The approach described here is still usable.
</Info>

Whether a filter is visible is not controlled via `<ws-filters>` itself but through HTML elements inside `<ws-filters>` that carry the `filter-container` attribute.

HTML elements inside `ws-filters` that carry the `filter-container` attribute control whether filters are hidden when they

* return no values and/or
* do not apply to the current search result or category.

### Note on the correct HTML structure

For hiding to work **per filter**, each `ws-filter` must be inside its own wrapper with `filter-container`.

If `filter-container` is placed only once around all filters, the entire filter group can disappear as soon as a single filter returns no values or does not apply.

**❌ Wrong (one wrapper for all filters):**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filters>
  ...
  <div filter-container>
    ...
    <ws-filter> ... </ws-filter>
    <ws-filter> ... </ws-filter>
    <ws-filter> ... </ws-filter>
    ...
  </div>
  ...
</ws-filters>
```

**✅ Correct (wrapper per filter):**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filters>
  ...
  <div filter-container>
    <ws-filter></ws-filter>
  </div>

  <div filter-container>
    <ws-filter></ws-filter>
  </div>

  <div filter-container>
    <ws-filter></ws-filter>
  </div>
  ...
</ws-filters>
```

***

## HTML & CSS

`<ws-filters>` does not provide its own styles for the layout. The structure (wrapper/container) and styling are implemented in the template.

Additional HTML code (e.g. headings, dropdown structure) can be added inside `<ws-filters>`.

***

## Filter component `ws-filter`

For the integration and configuration of the individual filters (e.g. filter types, attributes, and template integration), please read the documentation on the [ws-filter WebComponent](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filter).