Hiding Empty Filter Options on Initial Page Load

Written by the Divi Engine Documentation Team

Introduction

In this use case, we will show you how to hide empty filter options in Divi Ajax Filter when the page initially loads. This ensures that users only see filter options with items associated with them. Once users start filtering the data, empty categories, tags, or other filter fields will appear if necessary.

Scenario 3 DEMO ⮕ https://ajax-filter-docs.diviengine.com/product-category/shoes/

Steps to Hide Empty Filter Options on Initial Page Load

1. Access the filter module settings: Go to your page, find the filter module, and edit its settings.
2. Set the update method: Ensure the filter method update method is set to "on change".
3. Set "Update filter count and empty options for clicked item" to "NO" (optional): This is the default for this setting, but just double check.
4. Configure empty options for each field: For each field you want to apply this behavior, access the field settings and follow these steps:
• Navigate to Empty Options: Locate the "Empty Options" setting within the field settings.
• Set "Show empty filter options" to "YES": This ensures that filter options with zero count will be displayed.
• Set "Hide empty options on page load" to "YES": This setting ensures that empty options are hidden when the page initially loads.
5. Display filter count (optional): As a convenience, if you have a checkbox radio field, make sure to display the filter count under the Checkbox / Radio tab. This helps users know how many options are available. 

By following these steps, you will successfully configure the Divi Ajax Filter plugin to hide empty filter options on the initial page load. To explore more use cases and learn how to utilize the empty filter options in Divi Ajax Filter, check out other videos on our channel.