如何在WooCommerce中修改widget的innerHTML以给分类列表添加促销标识

推荐方案：钩子代码实现（无需修改核心/分类名称） #

该方案完全通过WordPress原生钩子实现，不会修改分类原生名称，升级主题、插件不会丢失配置。

步骤1：添加代码到站点 #

将以下两段代码添加到当前主题的functions.php文件中，或者通过「代码片段」类插件插入：

代码1：给商品分类添加促销文本自定义字段

// 商品分类新增促销文本设置项
add_action('product_cat_add_form_fields', 'wc_add_cat_sale_field');
function wc_add_cat_sale_field() {
    ?>
    <div class="form-field">
        <label for="cat_sale_text">促销文本</label>
        <input type="text" name="cat_sale_text" id="cat_sale_text" placeholder="例：ON SALE! -50%">
        <p class="description">填写后将在分类列表小工具中该分类旁显示对应促销标签</p>
    </div>
    <?php
}

add_action('product_cat_edit_form_fields', 'wc_edit_cat_sale_field', 10, 1);
function wc_edit_cat_sale_field($term) {
    $sale_text = get_term_meta($term->term_id, 'cat_sale_text', true);
    ?>
    <tr class="form-field">
        <th scope="row"><label for="cat_sale_text">促销文本</label></th>
        <td>
            <input type="text" name="cat_sale_text" id="cat_sale_text" value="<?php echo esc_attr($sale_text); ?>" placeholder="例：ON SALE! -50%">
            <p class="description">填写后将在分类列表小工具中该分类旁显示对应促销标签</p>
        </td>
    </tr>
    <?php
}

// 保存促销文本配置
add_action('edited_product_cat', 'wc_save_cat_sale_field', 10, 1);
add_action('create_product_cat', 'wc_save_cat_sale_field', 10, 1);
function wc_save_cat_sale_field($term_id) {
    if (isset($_POST['cat_sale_text'])) {
        update_term_meta($term_id, 'cat_sale_text', sanitize_text_field($_POST['cat_sale_text']));
    }
}

代码2：将促销文本插入到分类列表小工具输出中

// 分类列表小工具追加促销标签
add_filter('wp_list_categories', 'wc_append_sale_tag_to_cat_widget', 10, 2);
function wc_append_sale_tag_to_cat_widget($output, $args) {
    // 仅对WooCommerce自带分类列表小工具生效
    $is_wc_cat_widget = isset($args['taxonomy']) && $args['taxonomy'] === 'product_cat' 
        && isset($args['widget_id']) 
        // PHP8.0+用下面一行
        && str_contains($args['widget_id'], 'woocommerce_product_categories');
        // 低于PHP8.0替换上面一行为：&& strpos($args['widget_id'], 'woocommerce_product_categories') !== false;
    if (!$is_wc_cat_widget) return $output;
    // 匹配所有分类项ID
    preg_match_all('/class="cat-item cat-item-(\d+)"/', $output, $matches);
    if (empty($matches[1])) return $output;
    foreach ($matches[1] as $term_id) {
        $sale_text = get_term_meta($term_id, 'cat_sale_text', true);
        if (!$sale_text) continue;
        $sale_tag = ' <span class="cat-sale-tag">' . esc_html($sale_text) . '</span>';
        // 插入到分类名称后
        $output = preg_replace('/(cat-item-' . $term_id . '.*?<a.*?>.*?)(<\/a>)/i', '$1' . $sale_tag . '$2', $output);
    }
    return $output;
}

步骤2：配置促销分类 #

进入WordPress后台→「商品」→「分类」，编辑需要添加促销标识的分类，在「促销文本」输入框填入需要显示的内容（如ON SALE! -50%）后保存即可生效。

步骤3：自定义促销标签样式 #

可以将以下CSS添加到主题自定义CSS（后台「外观」→「自定义」→「额外CSS」）中，调整促销标签的显示效果：

.cat-sale-tag {
    color: #d9534f;
    font-size: 0.85em;
    font-weight: 700;
    margin-left: 6px;
    /* 可选额外样式 */
    background: #ffebee;
    padding: 2px 5px;
    border-radius: 3px;
}

注意事项 #

• 该方案仅针对WooCommerce自带的分类列表小工具生效，如果你使用的是第三方主题/插件自定义的分类列表，只需修改代码中判断小工具的条件即可适配。
• 所有配置完全独立于分类原生名称，修改/删除促销文本不会影响分类本身的设置。

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