如何在WooCommerce商品目录页带图标展示轮胎商品属性？

步骤1：准备图标资源 #

优先用内联SVG图标（避免外链依赖），或者将图标图片上传到主题的images目录。提前把轮胎属性和对应图标做好映射，比如承载重量用秤形图标、速度等级用速度表图标。

步骤2：修改属性展示代码 #

找到你之前在Stack Overflow使用的属性展示代码，替换成以下带图标映射的版本（代码添加到主题functions.php或自定义代码插件中）：

add_action('woocommerce_after_shop_loop_item_title', 'display_tire_attributes_with_icons', 15);
function display_tire_attributes_with_icons() {
    global $product;
    
    // 属性名与对应图标映射（替换成你需要的SVG或本地图片标签）
    $attributes_map = array(
        'Kandevõime (KG)' => '<svg class="attr-icon" viewBox="0 0 24 24" width="16" height="16" fill="#666"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>',
        'Keskava' => '<svg class="attr-icon" viewBox="0 0 24 24" width="16" height="16" fill="#666"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'
    );
    
    foreach ($attributes_map as $attr_name => $icon) {
        $attribute_value = $product->get_attribute($attr_name);
        if (!empty($attribute_value)) {
            echo '<div class="tire-attribute">';
            echo $icon . '<span class="attr-text">' . esc_html($attribute_value) . '</span>';
            echo '</div>';
        }
    }
}

如果想用本地图片图标，把SVG标签替换成：

'<img src="' . get_stylesheet_directory_uri() . '/images/weight-icon.png" class="attr-icon" alt="Kandevõime">'

步骤3：添加排版样式 #

把以下CSS代码加到主题自定义CSS面板或style.css文件中，优化图标与属性值的排版：

.tire-attribute {
    display: inline-flex;
    align-items: center;
    margin-right: 18px;
    font-size: 14px;
}
.attr-icon {
    margin-right: 5px;
}
.attr-text {
    font-weight: 500;
}

注意事项 #

• 确保$attributes_map中的属性名和商品后台设置的属性名称完全一致（包括括号、空格）
• 不要直接修改WooCommerce核心文件，避免更新丢失代码
• 可根据需求调整图标尺寸、颜色和间距样式

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