如何在WooCommerce可变产品中隐藏HSN code属性仅显示颜色

以下是几种可行的解决方案，按推荐优先级排序：

方法1：使用代码片段过滤属性（推荐） #

通过WooCommerce钩子在前端隐藏HSN code属性，后台仍完整保留其功能：

1. 找到你的HSN code属性的slug：进入WooCommerce后台「产品 > 属性」，定位到HSN code属性，查看其slug（比如属性名为“HSN code”时，slug通常是hsn-code）。
2. 将以下代码添加到子主题的functions.php文件中，或使用「Code Snippets」这类自定义代码插件来管理：

// 前端产品页隐藏HSN code属性
add_filter( 'woocommerce_product_get_attributes', 'hide_hsn_code_frontend', 10, 2 );
function hide_hsn_code_frontend( $attributes, $product ) {
    $hsn_slug = 'hsn-code'; // 替换为你的HSN属性slug
    if ( isset( $attributes[$hsn_slug] ) && !is_admin() ) {
        unset( $attributes[$hsn_slug] );
    }
    return $attributes;
}

3. 保存设置后，前端产品页就只会显示颜色属性了。

方法2：修改产品模板文件 #

如果你熟悉WordPress主题开发，可以通过修改WooCommerce模板精准控制属性显示：

1. 在你的子主题目录下创建woocommerce/single-product/tabs文件夹。
2. 复制WooCommerce核心目录内的wp-content/plugins/woocommerce/templates/single-product/tabs/description.php文件，粘贴到刚才创建的子主题文件夹中。
3. 打开复制后的文件，找到属性循环的代码段，添加判断跳过HSN code属性：

<?php foreach ( $attributes as $attribute ) : ?>
    <?php // 跳过HSN code属性，替换为你的属性slug ?>
    <?php if ( $attribute->get_name() === 'hsn-code' ) continue; ?>
    <tr>
        <th><?php echo wc_attribute_label( $attribute->get_name() ); ?></th>
        <td><?php echo wp_kses_post( wc_get_attribute_value( $attribute ) ); ?></td>
    </tr>
<?php endforeach; ?>

4. 保存文件即可生效，这种方法不会因WooCommerce更新而失效（前提是使用子主题）。

方法3：CSS隐藏（快速临时方案） #

如果不想修改代码，可以用CSS直接隐藏HSN code属性行：

1. 打开主题自定义面板的「额外CSS」选项。
2. 添加以下CSS代码（根据你的属性文本或class调整）：

/* 按属性文本匹配隐藏 */
.product_attributes tr:has(th:contains("HSN code")) {
    display: none !important;
}

/* 或按属性slug对应的class隐藏（更精准） */
.product_attributes tr.attribute-hsn-code {
    display: none !important;
}

注意：:contains选择器在部分浏览器存在兼容性问题，优先使用属性class的写法。

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