如何在WordPress所有WooCommerce页面应用样式一致的店铺筛选器？

• 匹配原生筛选器的容器类
  用浏览器开发者工具（右键筛选器→检查元素）查看原生店铺筛选器的外层容器CSS类（比如flatsome-widget、woocommerce-widget-layered-nav这类），然后在你新建的Widget编辑界面，给Widget添加相同的类名（通常在Widget设置里有“CSS类”输入框）。

• 复用UX Blocks的筛选器模块
  确保新建Widget里的筛选器是直接插入UX Blocks提供的筛选器组件，而非手动编写HTML或用其他第三方组件。如果用短代码调用，要保证短代码参数和原生页面使用的完全一致，包括样式相关的参数（比如style="flat"）。

• 自定义CSS强制统一样式
  如果上述方法无效，添加全局CSS覆盖差异：

  /* 统一筛选器标题样式 */
  .custom-filter-widget .widget-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 15px;
  }
  /* 统一筛选器选项列表 */
  .custom-filter-widget .wc-layered-nav-list li {
    margin-bottom: 8px;
  }
  .custom-filter-widget .wc-layered-nav-list a {
    color: #666;
    transition: color 0.3s ease;
  }
  .custom-filter-widget .wc-layered-nav-list a:hover {
    color: #0073aa;
  }
  /* 统一容器内边距与背景 */
  .custom-filter-widget {
    padding: 15px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }
  

  将custom-filter-widget替换为你新建Widget的容器类，然后把代码粘贴到「外观→自定义→额外CSS」中。

• 适配不同页面的侧边栏布局
  部分WooCommerce页面（如分类页、搜索页）的侧边栏容器类可能不同（比如sidebar-left/sidebar-right），可添加CSS适配：

  .sidebar-left .custom-filter-widget,
  .sidebar-right .custom-filter-widget {
    width: 100%;
    box-sizing: border-box;
  }
  

• 清除缓存
  修改后清除Flatsome主题缓存（「Flatsome→高级→清除缓存」）、UX Blocks缓存，以及浏览器缓存，确保新样式生效。

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