You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

技术问询:如何在WordPress的WooCommerce中为产品分类添加类文章内容

如何在WooCommerce产品分类中添加类似文章的内容

嘿,我来帮你搞定这件事~有几种不同的方法,你可以根据自己的需求和技术能力选择:

方法1:用后台自带的分类描述(最简单)

其实WooCommerce的产品分类本身就支持添加带格式的内容,只是默认可能没开启可视化编辑器:

  • 打开WordPress后台,进入「产品」→「分类」
  • 找到你要编辑的分类,点击「编辑」按钮
  • 点击页面右上角的「屏幕选项」,勾选「可视化编辑器」
  • 现在你就能看到和编辑文章一样的可视化编辑器了,可以随意添加文本格式、图片、列表、链接这些内容
  • 编辑完成后点击「更新」,前端分类页面就会显示这段描述(如果你的主题支持显示分类描述的话)

如果你的主题没默认显示分类描述,那可以试试下面的代码方法。

方法2:用代码钩子自定义内容位置(灵活可控)

如果需要把内容放在分类页面的顶部、底部或者产品列表的前后,用WordPress的钩子函数就可以实现。把下面的代码添加到你的子主题functions.php文件里(不要直接修改父主题,避免更新丢失):

示例:在分类页面顶部添加内容

add_action('woocommerce_before_main_content', 'add_custom_content_to_category_top', 10);
function add_custom_content_to_category_top() {
    // 判断当前是否是产品分类页面
    if (is_product_category()) {
        // 获取当前分类的信息
        $current_category = get_queried_object();
        
        echo '<div class="category-top-content">';
        // 可以直接输出分类的描述(就是方法1里编辑的内容)
        echo wpautop($current_category->description);
        // 也可以添加自定义的HTML内容,比如:
        echo '<h3>欢迎来到我们的' . $current_category->name . '专区!</h3>';
        echo '<p>这里有你需要的所有相关产品,快来看看吧~</p>';
        echo '</div>';
    }
}

示例:在产品列表底部添加内容

把钩子换成woocommerce_after_shop_loop就行:

add_action('woocommerce_after_shop_loop', 'add_custom_content_to_category_bottom', 10);
function add_custom_content_to_category_bottom() {
    if (is_product_category()) {
        echo '<div class="category-bottom-content">';
        echo '<p>如果找不到合适的产品,欢迎联系我们的客服哦!</p>';
        echo '</div>';
    }
}

方法3:添加自定义分类字段(多内容区域)

如果需要给分类添加多个独立的内容区块(比如一个顶部介绍,一个底部说明),可以添加自定义字段:

第一步:添加自定义编辑器字段到分类后台

// 在分类编辑页面添加自定义内容字段
add_action('woocommerce_product_category_edit_form_fields', 'add_category_custom_content_field');
function add_category_custom_content_field($term) {
    // 获取已保存的自定义内容
    $custom_content = get_term_meta($term->term_id, '_category_extra_content', true);
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="category_extra_content">分类额外内容</label></th>
        <td>
            <?php 
            // 调用WordPress可视化编辑器
            wp_editor($custom_content, 'category_extra_content', array(
                'textarea_rows' => 6,
                'media_buttons' => true // 允许添加图片
            )); 
            ?>
            <p class="description">在这里添加分类的额外内容,支持所有文章编辑的格式</p>
        </td>
    </tr>
    <?php
}

// 保存自定义字段的内容
add_action('woocommerce_update_product_category', 'save_category_custom_content_field');
function save_category_custom_content_field($term_id) {
    if (isset($_POST['category_extra_content'])) {
        // 安全过滤内容后保存
        update_term_meta($term_id, '_category_extra_content', wp_kses_post($_POST['category_extra_content']));
    }
}

第二步:在前端显示自定义内容

add_action('woocommerce_before_shop_loop', 'display_category_custom_content', 10);
function display_category_custom_content() {
    if (is_product_category()) {
        $term_id = get_queried_object_id();
        $custom_content = get_term_meta($term_id, '_category_extra_content', true);
        
        if (!empty($custom_content)) {
            echo '<div class="category-custom-content">' . $custom_content . '</div>';
        }
    }
}

方法4:用插件(不用写代码)

如果你不想碰代码,可以用像Advanced Custom Fields(ACF)这类插件:

  • 安装并激活插件后,创建一个「编辑器」类型的字段组
  • 设置字段组的规则为「分类 → 等于 → 产品分类」
  • 然后在产品分类编辑页面就能看到这个新的编辑器字段,编辑内容后,用插件提供的函数在主题里调用这个字段的内容(或者用插件的短代码)

内容的提问来源于stack exchange,提问作者Ngọc Nguyễn Thị

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.07 22:22:28