如何调整WooCommerce单品页钩子顺序，让标题显示在自定义内容上方

我在WordPress的钩子逻辑里插入了PHP代码块shop_content，现在它显示在woocommerce_single_product_summary钩子之前，也就是H1产品标题的上方。我需要让产品标题显示在shop_content内容的上方，本质是把自定义HTML加到WordPress钩子中，能不能不用jQuery重新排序div，只靠调整钩子实现？

当前代码 #

<div class="<?php echo esc_attr($ozark_product_summary_class) ?>">
    <div class="summary entry-summary gs-product-summary">
        <?php
        /**
         * Product Title
         */
        if (ozark_inherit_option('general_title', 'general_title_product', '1') == '2') {
            remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
        }?>

        <?php if ( is_active_sidebar( 'shop_content' ) ) : ?>
            <div id="shop_description" class="shop-description widget-area" role="complementary">
                <?php dynamic_sidebar( 'shop_content' ); ?>
            </div>
        <?php endif; ?>

        <?php
        /**
         * Hook: woocommerce_single_product_summary.
         *
         * @hooked woocommerce_template_single_title - 5
         * @hooked woocommerce_template_single_rating - 10
         * @hooked woocommerce_template_single_price - 10
         * @hooked woocommerce_template_single_excerpt - 20
         * @hooked woocommerce_template_single_add_to_cart - 30
         * @hooked woocommerce_template_single_meta - 40
         * @hooked woocommerce_template_single_sharing - 50
         * @hooked WC_Structured_Data::generate_product_data() - 60
         */

        // remove product short description 
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
        add_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 6);

        do_action('woocommerce_single_product_summary');
        ?>
        <?php if (get_theme_mod('product_share', '2') == '1') : ?>
            <?php get_template_part('templates/extra/share') ?>
        <?php endif; ?>
    </div>
</div>

完全可以通过调整钩子实现，不需要jQuery。核心是把shop_content的输出逻辑挂载到woocommerce_single_product_summary钩子上，通过优先级控制让它在产品标题之后显示。具体修改如下：

修改步骤 #

1. 删除模板中直接输出shop_content的那段代码（从<?php if ( is_active_sidebar( 'shop_content' ) ) : ?>到<?php endif; ?>的部分）
2. 新增一个自定义函数来处理shop_content的输出
3. 将这个函数添加到woocommerce_single_product_summary钩子，设置优先级为6（比标题的默认优先级5高，确保在标题之后显示）

修改后的完整代码 #

<div class="<?php echo esc_attr($ozark_product_summary_class) ?>">
    <div class="summary entry-summary gs-product-summary">
        <?php
        /**
         * Product Title
         */
        if (ozark_inherit_option('general_title', 'general_title_product', '1') == '2') {
            remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
        }?>

        <?php
        // 自定义函数输出shop_content侧边栏
        function ozark_output_shop_content() {
            if ( is_active_sidebar( 'shop_content' ) ) : ?>
                <div id="shop_description" class="shop-description widget-area" role="complementary">
                    <?php dynamic_sidebar( 'shop_content' ); ?>
                </div>
            <?php endif;
        }
        // 添加到钩子，优先级6（在标题之后）
        add_action('woocommerce_single_product_summary', 'ozark_output_shop_content', 6);

        /**
         * Hook: woocommerce_single_product_summary.
         *
         * @hooked woocommerce_template_single_title - 5
         * @hooked ozark_output_shop_content - 6
         * @hooked woocommerce_template_single_rating - 6
         * @hooked woocommerce_template_single_price - 10
         * @hooked woocommerce_template_single_excerpt - 20
         * @hooked woocommerce_template_single_add_to_cart - 30
         * @hooked woocommerce_template_single_meta - 40
         * @hooked woocommerce_template_single_sharing - 50
         * @hooked WC_Structured_Data::generate_product_data() - 60
         */

        // remove product short description 
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
        add_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 6);

        do_action('woocommerce_single_product_summary');
        ?>
        <?php if (get_theme_mod('product_share', '2') == '1') : ?>
            <?php get_template_part('templates/extra/share') ?>
        <?php endif; ?>
    </div>
</div>

说明 #

• 产品标题默认优先级是5，我们给shop_content的输出函数设置优先级6，所以标题会先渲染，接着是shop_content内容
• 如果你想让shop_content在评分之后显示，只需要把优先级改成11即可（评分当前优先级是6，价格是10）
• 这种方式完全通过WordPress钩子系统实现，不需要前端JS调整DOM顺序，更符合WordPress开发规范

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