- Help Center Home
- Getting started
- Introducing FacetWP
- Installation and updates
- FAQ
- How it works
- What are facets?
- Facet types
- Built-in facet types
- Checkboxes
- Dropdown
- Radio
- fSelect
- Hierarchy
- Slider
- Search
- Autocomplete
- Date Range
- Number Range
- Star Rating
- Proximity
- Pager + load more
- Sort
- Reset
- User Selections
- Add-on facet types
- Map
- Hierarchy Select
- Range List
- Time Since
- A-Z Listing
- Color
- Custom facet types
- Custom facet types
- Indexing
- Listing templates
- Extras & integrations
- Add-on features and extras
- Using FacetWP with …
- Built-in integrations
- Advanced Custom Fields
- WooCommerce
- SearchWP
- WP-CLI
- Add-on integrations
- Blocks
- Bricks
- Elementor
- Beaver Builder
- WP Recipe Maker and Tasty Recipes
- Relevanssi
- WPML and Polylang
- Meta Box
- Flatsome (theme)
- External integrations
- Breakdance
- Document Library Pro
- Listify (theme)
- Listable (theme)
- WPGraphQL
- Tips & tricks
- WordPress multi-site
- WP All Import
- WebToffee Import Export
- WP Job Manager
- Easy Digital Downloads
- EDD Reviews
- Intuitive Custom Post Order
- Custom Taxonomy Order
- Post Types Order
- Genesis framework
- WP External Links
- ElasticPress
- Yoast SEO
- All in One SEO (Pro)
- The Events Calendar Pro
- Google Analytics 4
- Image Optimization by Optimole
- Meow Lightbox
- Cookiebot
- Caching, hosting & security
- WP Rocket
- Cloudflare
- WP Engine
- New Relic
- WordPress REST API Authentication
- All-In-One Security (AIOS)
- Fast Velocity Minify
- Incompatibilities
- Incompatible plugins and themes
- Troubleshooting
- Troubleshooting guide
- Using the right query
- Common issues
- Common indexing issues
- Get support
- Developers
- Hooks reference
- Indexing hooks
- Querying hooks
- Output hooks
- facetwp_facet_display_value
- facetwp_facet_html
- facetwp_facet_render_args
- facetwp_facet_pager_link
- facetwp_facet_sort_options
- facetwp_template_html
- facetwp_shortcode_html
- facetwp_render_params
- facetwp_render_output
- facetwp_builder_item_value
- facetwp_builder_dynamic_tags
- facetwp_builder_dynamic_tag_value
- Advanced hooks
- Deprecated hooks
- JavaScript reference
- Shortcodes reference
- FacetWP REST API
- How FacetWP works
- The FacetWP URL
- FacetWP speed and limits
- Tutorials
- Code snippets
- Feedback
- What’s new
- Changelog
- News & announcements
Is there a button, tab, or toggle/switch facet type?
No, but most facet types can easily be styled to your liking, as long as their functionality works for your use case. They consist of simple HTML, like nested <div>
and <span>
elements. Even the ones that look like they use real HTML form elements, for example, the Checkboxes and Radio facet types, use simple CSS background images for their icons.
Some styling examples:
- To display single-select facet choices as buttons or pills, you could re-style a Radio facet. This example shows how to display a Radio facet as a horizontal row of buttons/pills.
- To display single-select facet choices as tabs, you could also re-style a Radio facet. This example shows how to display a Radio facet as a horizontal row of tabs.
- To display multiple-select facet choices as toggles or switches, you could re-style a Checkboxes facet. This example shows how to use SVG icons to make checkbox choices look like toggle switches.
- Facet types
- The Checkboxes facet type
- The Radio facet type
- The facetwp_facet_html hook
- The facetwp_shortcode_html hook
- The facetwp_facet_display_value hook
- Custom facet types
If you need to change a facet’s or facet type’s HTML to accomplish what you want, you can use the facetwp_facet_html hook. Or, if you need access to the facet’s container element, you can use the facetwp_shortcode_html hook instead.
To customize the HTML of the individual facet choices, you can use the facetwp_facet_display_value hook. For example, to display facet choices as images.
And if you need full control, you can even create your own custom facet type.
See also
Last updated: July 11, 2024