The Visibility setting allows you to set up the responsive behavior for your preset. There are 5 available options:
- Visible will display the preset on all the pages selected in the Display On section, and on any screen width.
- Visible on screens narrower than the Responsive width will display the current preset only when the viewer’s device screen is smaller than the pixel value specified by the Responsive width option of your preset.
- Visible on screens wider than the Responsive width will only display the filters of your preset on screens wider than the Responsive width option of your preset.
- Controlled by “Filters” button option will insert the “Filters” toggle button on any filterable page (WooCommerce shop, archive pages, pages with filterable [products] shortcodes). The preset will remain hidden until its visibility gets toggled by a click on the “Filters” button, and will then open in an off-canvas sidebar, or under the toggle button.
Presets that are set to the Controlled by “Filters” button visibility are automatically inserted into any filterable page covered by their Display on section! Please don’t insert this type of preset by means of widget or shortcode.
The “Filters” toggle button will not get displayed on non-filterable pages!
- Visible on screens wider than the Responsive width, controlled by “Filters” button on narrower screens is an advanced responsive option allowing to display the filters in their regular position on wider screens, and open the preset by a click on the “Filters” button on the smaller screens of handheld devices.
“Filters” button
Please consult this article if you need to change the insertion point of your “Filters” button.
Go to Appearance > Customize > annasta Filters > “Filters” Toggle Button admin section to customize the “Filters” button appearance. To achieve the “sticky” effect enable the Fix page position option.
To change the icon displayed inside the button, add the following custom CSS in annasta Filters > Style settings > Custom CSS (replace the content value with the Unicode of any Font Awesome 5 Free icon of your choice):
.awf-togglable-preset-btn i.fa-bars::before {
content: "\f1de";
}