WooCommerce 产品上方的水平产品筛选器：分列与单行

侧边栏筛选器会占去商店三分之一的宽度，在手机上还会把产品挤到页面很靠下的位置。把水平产品筛选器放在 WooCommerce 产品上方，则能让产品网格占满整个宽度，并让所有选项一目了然：一排下拉菜单，或者分为两到四列的筛选区块。HUSKY 没有单独的“水平模式”。布局取决于两件事：筛选器所在位置的宽度，以及其区块的 CSS。下文介绍把筛选器放在产品上方的三种方法、内置的分列布局、实现单行排列的 CSS，以及常见布局问题的修复方法。

筛选器放在哪里，决定了它的布局

每个筛选区块（分类、颜色、尺寸、价格）都是一个带有 woof_container 类的块。在侧边栏小工具中，由于小工具很窄，这些块会纵向堆叠。而在宽阔的区域中打印时，同样的块可以并排放置，插件还自带了把它们排成多列的类。把筛选器放在产品上方有三种方式：

产品上方的自动筛选器

1. 前往 WooCommerce → 设置 → Products Filter → 选项 (Options)，把自动设置筛选器 (Set filter automatically) 设为是 (Yes)；如果希望手机使用不同的筛选器，则设为是，但仅限桌面端 (Yes, but only for desktop)。保存。
2. 刷新页面并打开设计 (Design) 标签页。有两个选项只有在保存第一步之后才会出现：默认隐藏自动筛选器 (Hide auto filter by default) 和自动筛选器的皮肤 (Skins for the auto filter)。
3. 把默认隐藏自动筛选器 (Hide auto filter by default) 设为否 (No)。设为是 (Yes)（默认值）时，访客只会看到一个打开/关闭按钮，筛选器以覆盖在产品之上的面板形式展开。这同样是一个有效的选择；该按钮通过自动筛选器关闭/打开图片 (Auto filter close/open image) 和自动筛选器关闭/打开文字 (Auto filter close/open text) 来设置样式。如果想要从屏幕边缘滑入的面板，请参阅滑出式产品筛选器。
4. 选择皮肤：Flat white、Flat grey 或 Flat dark，分为 1、2、3 或 4 列。默认 (Default) 是简洁的皮肤，每行三个区块。
5. 从商店侧边栏中移除 HUSKY 小工具，避免页面出现两个筛选器，并在主题中把商店切换为全宽布局。4 列皮肤因此被标注为“无侧边栏”：四个至少 150px 宽的区块无法与侧边栏并排放下。

在幕后，插件会在 WooCommerce 动作 woocommerce_before_shop_loop 上以优先级 2 输出 [woof sid="flat_grey woof_auto_3_columns" ...]，位于通知、结果数量和排序下拉菜单之前。使用这个动作会带来两个结果：

• 主题或页面构建器模板必须运行该动作。经典主题和 WooCommerce 自带的归档模板会运行；许多构建器的归档模板和自定义产品网格则不会，此时什么都不会显示。这种情况请改用短代码。
• 当某个筛选组合没有找到任何内容时，WooCommerce 的归档模板会运行 woocommerce_no_products_found，而不是 woocommerce_before_shop_loop。页面刷新之后，自动筛选器会和产品一起消失，访客只会看到“没有产品”的提示，无法更改所选条件。在 AJAX 模式下，表单会保留在页面上。下一节的短代码代码段可以处理这种情况。

分列显示的短代码筛选器

[woof] 的 sid 属性会变成筛选表单上的 CSS 类。sid="flat_grey woof_auto_4_columns" 会输出 woof_sid_flat_grey（提供灰色配色）和 woof_auto_4_columns（把区块排成四列）。插件样式表中的列类如下：

每个区块都是最小宽度为 150px 的行内块，因此在窄屏幕上，区块会自动折行成更少的列。第一个词不一定要是皮肤：[woof sid="topbar woof_auto_3_columns"] 保留插件的中性外观，并为您提供类 woof_sid_topbar，用于您自己的 CSS。

分列需要空间。小工具区域的宽度只有侧边栏那么宽，所以请把短代码放在全宽的位置：全宽 Elementor 或 Divi 区段中的短代码小工具、位于 [products] 或 [woof_products] 上方的页面（参见自定义页面上的筛选器），或者商店模板。如果不使用自动设置筛选器 (Set filter automatically)，而要在商店页和产品归档页的产品上方输出它，请把它挂接到插件使用的同一个动作上：

/*
 * HUSKY: filter in columns above the products on the shop and product archives.
 * Child theme functions.php or a code snippets plugin.
 * Keep "Set filter automatically" = No, otherwise the page shows two filters.
 */
function my_husky_top_filter() {
    if (is_shop() || is_product_taxonomy()) {
        echo do_shortcode('[woof sid="flat_grey woof_auto_4_columns"]');
    }
}
add_action('woocommerce_before_shop_loop', 'my_husky_top_filter', 1);

// WooCommerce skips woocommerce_before_shop_loop when nothing is found:
// keep the filter on the "no products" page too.
add_action('woocommerce_no_products_found', 'my_husky_top_filter', 5);

is_product_taxonomy() 涵盖分类、标签和属性归档页。优先级 1 很重要：开启尝试对商店启用 AJAX (Try to ajaxify the shop) 时，插件会在同一动作的优先级 2 打开由 AJAX 替换的区域，在此之后输出的筛选器会位于该区域内部，并在第一次筛选后消失。有一个限制：移动模式会在手机上用一个打开筛选器 (Open filter) 按钮取代筛选器，而在 3.4.6 版本中，它无法找到 sid 包含两个词的表单。如果需要移动模式，请给表单设置只有一个词的 sid，并用下一节的 CSS 构建布局；详情见移动端筛选器指南。

[woof_front_builder] 短代码是无需代码的替代方案。它在页面本身上构建筛选表单，其布局 (Layout) 选项包含默认筛选区块宽度 (Default filter section width)：25% 表示每行四个区块，50% 表示两个。每个区块还可以用自己的区块宽度 (Section width) 覆盖它。关于在产品网格上方插入筛选器的常见问题，展示了如何在商店产品上方输出这样的表单。

所有筛选器排成一行

分列适合复选框列表。如果想要纤细的一栏，请在结构 (Structure) 标签页中把各区块切换为紧凑的视图类型：下拉菜单 (Drop-down)、多选下拉菜单 (Multi drop-down)、下拉菜单中的单选/复选框 (Radio/Checkbox in drop-down)（复选框位于下拉面板内，参见扩展页面），或者用于分类的层级下拉菜单 (Hierarchy drop-down)。下拉菜单会把筛选器的名称显示为第一个选项，因此您可以在每个区块的附加选项（齿轮图标）中通过显示标题标签 (Show title label) 关闭区块标题，省出一行的高度。然后让 flexbox 来排列这些块。对于用 [woof sid="topbar"] 放置的表单：

/*
 * HUSKY: filter sections in one row above the products.
 * Advanced → Code → Custom CSS code, or the theme's Additional CSS.
 */
.woof_sid_topbar .woof_redraw_zone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.woof_sid_topbar .woof_container {
    flex: 1 1 180px;      /* share the row, never narrower than 180px */
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;    /* drop-down panels must not be cut off */
}
.woof_sid_topbar .woof_submit_search_form_container {
    flex: 0 0 auto;       /* Filter and Reset buttons at the end of the row */
    margin: 0;
}
.woof_sid_topbar .chosen-container,
.woof_sid_topbar .select2-container {
    width: 100% !important;
}
@media (max-width: 767px) {
    .woof_sid_topbar .woof_container,
    .woof_sid_topbar .woof_submit_search_form_container {
        flex-basis: 100%;
    }
}

在 1200px 宽的内容区域中，一行可以容纳五六个下拉菜单；更多的会折到第二行，而不是被挤压。筛选 (Filter) 按钮只有在自动提交 (Autosubmit) 关闭时才存在，重置 (Reset) 只有在选择了某些内容之后才出现，所以按钮块经常是空的，此时它在行内不占任何空间。宽度低于 768px 时，每个区块占满整行宽度。若要把同样的规则应用于自动筛选器，请把 .woof_sid_topbar 替换为其皮肤的类，例如 .woof_sid_flat_grey，对于默认 (Default) 皮肤则是 .woof_sid_auto_shortcode。

单个筛选器的术语按行或按列排列

一长列尺寸或品牌是问题的另一半。对于复选框和单选按钮，请在结构 (Structure) 中打开该区块的附加选项，把在一行中显示项目 (Display items in a row) 设为是 (Yes)：这些项目会并排排列并自动折行。它适用于没有子分类的术语；带有子级的父级仍占独立一行，以便其子分类可以在它下方展开。

如果要固定的列数，请对某个区块的列表使用 CSS 网格：

/* Sizes in three equal columns. Replace pa_size with your taxonomy slug. */
.woof .woof_container_pa_size ul.woof_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 12px;
}

每个区块都带有类 woof_container_ 加上其分类法别名：woof_container_product_cat、woof_container_pa_color、woof_container_pa_size。子分类列表有自己的类，因此网格只作用于第一级。如果想缩短过长的列表，请在同一附加选项中设置区块最大高度 (Max height of the block)；这样列表会有自己的滚动条。更多选择器见用 CSS 设置筛选器样式指南。

修复错乱的水平布局

• 先找出类名。把高级 (Advanced) → 选项 (Options) → 显示区块辅助按钮 (Show blocks helper button) 设为是 (Yes)。管理员随后会在每个带有 sid 的筛选器上方看到一个显示区块辅助 (show blocks helper) 链接；点击后，每个区块会标出它的类（例如 woof_container_pa_color），并输出表单的类。之后请把它关闭，具体做法见关于辅助按钮的常见问题。
• 区块仍然堆叠。容器太窄（小工具区域或较窄的构建器列），或者旧的自定义 CSS 给 .woof_container 设置了宽度或浮动。添加新规则之前请先移除之前的尝试：基于浮动和基于 flex 的规则混用，会产生不可预料的结果。
• 标题被白框遮盖，列表被截断。默认 (Default) 自动皮肤把每个区块限制为 250px 高并带有自己的滚动条，而主题常常给内容区域内的区块添加浮动、背景或固定高度。请为您的表单重置它们，例如 .woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }，或者切换到 Flat 皮肤。
• 下拉面板在产品后面打开。给表单设置它自己的层叠级别：.woof_sid_topbar { position: relative; z-index: 20; }。
• 构建器布局。在 Elementor 或 Divi 中，请把短代码放在产品上方全宽区段内的短代码小工具或模块中。网格本身必须是筛选器能够控制的类型；参见筛选 Elementor 循环网格。
• 编辑 CSS 后没有变化。清除页面缓存以及所有合并或优化过的 CSS，然后在退出登录的状态下测试。

演示站点上使用的 CSS 中有更多现成的筛选器布局示例。

检查清单

• 每个页面一个筛选表单：移除侧边栏小工具，或者在使用短代码时关闭自动设置筛选器 (Set filter automatically)。
• 如果希望栏始终可见，请把默认隐藏自动筛选器 (Hide auto filter by default) 设为否 (No)。
• 筛选器位于全宽容器中；若要四列，商店不要有侧边栏。
• 列来自 sid 中的 woof_auto_N_columns 类；如果需要移动模式，则使用单个词的 sid 加 CSS。
• 单行栏使用下拉菜单视图类型；较长的复选框列表使用在一行中显示项目 (Display items in a row) 或网格。
• 已清除缓存；已在退出登录状态下，分别用桌面端和手机检查页面。

如果布局仍然错乱，请在 HUSKY 支持论坛上发起一个主题，附上页面链接和您添加的 CSS，我们会查看。