如何将WooCommerce单品页附加信息改为非表格形式并调整字号？

架构老林

2026-8-15

实现方法

1. 替换默认表格式附加信息输出

WooCommerce默认用表格渲染附加信息，我们可以通过过滤器woocommerce_display_product_attributes改写输出结构，改成行式布局。把下面的代码加到主题的functions.php文件或自定义插件中：

add_filter('woocommerce_display_product_attributes', 'custom_product_attributes_display', 10, 2);
function custom_product_attributes_display($product_attributes, $product) {
    $attributes_html = '';
    
    // 遍历所有产品属性
    foreach ($product_attributes as $attribute) {
        $attributes_html .= '<div class="custom-product-attribute">';
        $attributes_html .= '<span class="attribute-label">' . wp_kses_post($attribute['label']) . '</span>';
        $attributes_html .= '<span class="attribute-value">' . wp_kses_post($attribute['value']) . '</span>';
        $attributes_html .= '</div>';
    }
    
    return $attributes_html;
}

这段代码会把每个属性拆成包含标签和值的独立容器，替代原有的表格结构。

2. 添加CSS调整布局与字体

在主题的自定义CSS（外观→自定义→额外CSS）中添加以下样式，匹配目标样式并调整字体大小：

/* 附加信息整体样式 */
.custom-product-attribute {
    margin-bottom: 10px;
    font-size: 14px; /* 按需修改字体大小 */
    display: flex;
    justify-content: space-between;
}

/* 属性标签样式 */
.custom-product-attribute .attribute-label {
    font-weight: 600;
    color: #222;
}

/* 属性值样式 */
.custom-product-attribute .attribute-value {
    color: #555;
}

如果参考图是标签与值上下排列的样式，可替换成这段CSS：

.custom-product-attribute {
    margin-bottom: 15px;
    font-size: 14px;
}
.custom-product-attribute .attribute-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}