Search & Filter Pro 如何隐藏无匹配项的空筛选UI

S&F Pro原生支持空筛选器类标记，不需要修改插件核心文件就能实现需求，操作步骤如下：

• 开启内置空项标记功能
  进入对应商店页面绑定的S&F筛选表单编辑页，切换到「显示结果」标签，下拉找到高级设置区域，勾选标记无可用选项的筛选字段后保存表单。此时前端所有无对应商品的筛选器外层<li>容器会自动添加默认类名sf-field-empty，筛选器内部无选项的状态也会同步标记。
• 自定义空项类名（可选）
  如果你需要把默认类名改成你提到的empty，直接将下面的代码片段添加到当前子主题的functions.php文件中即可：

  // 自定义S&F Pro空筛选器类名
  add_filter('sf_filter_empty_class', function() {
      return 'empty';
  });
  

• 编写CSS隐藏空筛选器
  类名生效后，直接在主题自定义CSS区域添加如下样式，就能把带空类的筛选器（包含外层li、内部h4筛选标题、空选项区域）全部隐藏，不会再出现只有标题没有选项的情况：

  /* 隐藏无匹配商品的空筛选器 */
  li.sf-field-empty,
  li.empty {
      display: none !important;
  }
  

注意：配置完成后如果样式没生效，先到S&F Pro工具页面清空插件内置缓存，再清空站点/CDN缓存后刷新页面验证即可。

内容的提问来源于stack exchange，提问作者jaji1996