如何在代码中渲染WooCommerce的Product Filter – Attributes Gutenberg区块并指定筛选属性？

嘿，我刚好折腾过这个需求，给你捋下纯代码渲染WooCommerce Product Filter - Attributes区块的具体步骤，亲测可行～

首先，Gutenberg区块本质是通过区块名称+属性配置来渲染的，我们需要构造好目标区块的属性，再调用WordPress官方的区块渲染函数来输出。

具体实现代码 #

在你的自定义archive-product.php文件的指定位置，插入以下代码：

// 1. 构造筛选区块的属性配置
$filter_attrs = array(
    // 配置要筛选的产品属性，可添加多个
    'attributes' => array(
        array(
            'attribute' => 'pa_color', // 替换为你的属性slug，注意前缀pa_
            'display_type' => 'list', // 显示方式：list（列表）/ dropdown（下拉）
            'show_counts' => true, // 是否显示对应产品数量
            'show_available' => true, // 仅显示有库存的属性选项
            'hierarchical' => false, // 是否启用层级显示（适合嵌套属性）
        ),
        array(
            'attribute' => 'pa_size', // 第二个筛选属性，按需添加
            'display_type' => 'dropdown',
            'show_counts' => true,
            'show_available' => true,
        ),
    ),
    'queryType' => 'active', // 筛选范围：active（当前页面结果）/ archive（全存档）
    'heading' => '筛选产品', // 区块标题，可选
);

// 2. 将属性转为区块所需的JSON格式
$block_config = wp_json_encode(array(
    'blockName' => 'woocommerce/product-filter-attributes',
    'attrs' => $filter_attrs,
));

// 3. 渲染区块
echo do_blocks("<!-- wp:woocommerce/product-filter-attributes {$block_config} /-->");

关键参数说明 #

• 属性slug：WooCommerce的全局属性slug会自动添加pa_前缀，比如后台创建的“颜色”属性slug是color，这里就要写pa_color，可以在WooCommerce「产品 > 属性」页面查看每个属性的slug。
• display_type：控制属性的展示样式，列表样式适合少选项的属性，下拉框适合多选项的属性。
• show_available：设为true时，会自动隐藏没有对应在售产品的属性选项，提升用户体验。
• queryType：选active时，筛选会基于当前存档页的产品结果（比如分类页只筛选该分类下的产品），选archive则会筛选所有产品，根据你的需求调整。

注意事项 #

• 确保你的WooCommerce版本在6.0以上（这个区块是WooCommerce 6.0+引入的）。
• 如果不确定属性配置是否正确，可以先在后台添加该区块并配置好，然后查看页面源代码，找到区块的注释代码，对比你构造的JSON结构是否一致，这样能快速排查问题。
• 用do_blocks()渲染的好处是，WordPress会自动加载区块所需的样式和脚本，避免手动引入资源导致的样式缺失或功能异常。

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