WordPress/WooCommerce如何添加截图所示的多个产品标题

云原生阿岚

2026-8-28

WooCommerce 多产品标题实现方案

参考效果如下：
多产品标题参考示例

你要实现的多产品标题（一般是主标题+多个卖点/规格副标题的组合效果），可以根据自己的技术能力选以下三种方式实现：

主题自带功能（零代码，优先选）
如果你用的是Flatsome、WoodMart、Astra、Porto这类主流商用WooCommerce主题，基本都自带产品副标题/自定义标题模块：直接进入主题自定义设置，找到WooCommerce产品页/产品卡片相关设置项，开启多标题/副标题功能，之后在单个产品编辑页就能直接填入多个标题内容，还能直接调整标题的字号、颜色、显示位置，不需要额外操作。
插件实现（低代码，适合新手）
安装启用Advanced Custom Fields这类自定义字段插件，给产品（product）内容类型新建2-3个文本字段，设置字段在产品编辑后台展示。编辑产品时直接在对应字段填入额外标题内容，再配合你用的页面编辑器（Elementor、古腾堡、WPBakery都支持），把自定义字段动态插入到产品主标题下方的位置，简单调整样式就能匹配截图效果。不想折腾字段配置的话，也可以直接搜WooCommerce产品副标题类的专用插件，安装后直接填内容即可。
手动代码实现（无插件，轻量化）
如果你不想装多余插件，可以把功能代码加到当前子主题的functions.php文件中，分两步走：
1. 先在产品编辑后台添加多标题输入框，代码如下：

// 注册产品多标题元框
add_action('add_meta_boxes', 'wc_register_multi_title_metabox');
function wc_register_multi_title_metabox() {
    add_meta_box(
        'wc_multi_product_titles',
        '额外产品标题',
        'wc_render_multi_title_input',
        'product',
        'normal',
        'high'
    );
}

// 渲染多标题输入表单
function wc_render_multi_title_input($post) {
    wp_nonce_field('wc_save_multi_titles', 'wc_multi_title_nonce');
    $title_1 = get_post_meta($post->ID, '_wc_extra_title_1', true);
    $title_2 = get_post_meta($post->ID, '_wc_extra_title_2', true);
    echo '<p style="margin:12px 0"><label style="display:block;margin-bottom:4px">第一行额外标题</label><input type="text" name="wc_extra_title_1" value="'.esc_attr($title_1).'" style="width:100%"></p>';
    echo '<p style="margin:12px 0"><label style="display:block;margin-bottom:4px">第二行额外标题</label><input type="text" name="wc_extra_title_2" value="'.esc_attr($title_2).'" style="width:100%"></p>';
}

// 保存多标题数据
add_action('save_post_product', 'wc_save_multi_title_data');
function wc_save_multi_title_data($post_id) {
    if (!isset($_POST['wc_multi_title_nonce']) || !wp_verify_nonce($_POST['wc_multi_title_nonce'], 'wc_save_multi_titles')) return;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (isset($_POST['wc_extra_title_1'])) update_post_meta($post_id, '_wc_extra_title_1', sanitize_text_field($_POST['wc_extra_title_1']));
    if (isset($_POST['wc_extra_title_2'])) update_post_meta($post_id, '_wc_extra_title_2', sanitize_text_field($_POST['wc_extra_title_2']));
}

把输出代码加到你需要显示多标题的模板位置，比如产品详情页标题下方、产品列表卡片的标题区域，代码如下：

// 输出额外产品标题
$extra_title_1 = get_post_meta(get_the_ID(), '_wc_extra_title_1', true);
$extra_title_2 = get_post_meta(get_the_ID(), '_wc_extra_title_2', true);
if (!empty($extra_title_1)) echo '<div class="wc-extra-title fs-14 text-gray">'.esc_html($extra_title_1).'</div>';
if (!empty($extra_title_2)) echo '<div class="wc-extra-title fs-12 text-lightgray mt-4">'.esc_html($extra_title_2).'</div>';

最后给对应标题类加几行CSS，调整字号、颜色、间距，匹配你想要的视觉效果就行。

操作提示：改代码前先备份站点的主题文件和数据库，避免代码写错导致站点异常。如果你用页面编辑器搭建产品模板，不需要手动改模板文件，直接在编辑器里给主标题下方加两个文本模块，动态绑定前面创建的自定义字段即可。

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