WooCommerce单品页商品标题脱离模板 钩子修改失效如何解决

你当前的商品标题是在主题的index.php文件中直接调用WordPress原生the_title()函数输出的，输出位置在WooCommerce渲染的#woocommerce容器之前，完全不在WooCommerce的模板钩子作用范围内，因此使用WooCommerce专属的商品标题修改钩子不会生效。

方案1：使用WordPress原生钩子快速修改标题 #

如果仅需要修改标题内容，不需要调整标题位置，直接用WordPress原生the_title过滤器即可，添加以下代码到当前主题的functions.php文件中：

add_filter('the_title', 'custom_product_title_modify', 10, 2);
function custom_product_title_modify($title, $post_id) {
    // 仅对前端单品商品页的主标题生效，避免影响其他位置的标题
    if (is_singular('product') && $post_id == get_queried_object_id() && in_the_loop()) {
        // 此处编写自定义标题逻辑，示例为标题添加前后缀
        $title = '[新品] ' . $title . ' 限时特惠';
    }
    return $title;
}

方案2：调整模板结构，适配WooCommerce标准规范 #

如果后续还要对单品页做更多自定义开发，建议调整模板结构，让标题回归WooCommerce的标准渲染流程，操作步骤如下：

1. 复制当前主题的index.php文件，重命名为single-product.php，这是WooCommerce单品页的专属模板文件，优先级高于通用index.php
2. 修改single-product.php的代码，删除手动输出的the_title()，调用WooCommerce标准的单品内容模板：

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php wc_get_template_part('content', 'single-product'); ?>
<?php endwhile; else : ?>
    <p>暂无内容</p>
<?php endif; ?>

<?php get_footer(); ?>

调整完成后，商品标题会自动渲染到#product-xxx容器内部，使用H1标签包裹，后续即可使用WooCommerce标准钩子自定义标题，示例代码如下：

// 移除WooCommerce默认的标题输出
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
// 添加自定义标题输出
add_action('woocommerce_single_product_summary', 'custom_woocommerce_title', 5);
function custom_woocommerce_title() {
    global $product;
    echo '<h1 class="product_title entry-title">自定义标题：' . esc_html($product->get_name()) . '</h1>';
}

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