WooCommerce产品捆绑包：将捆绑价格移至标题下方并修正价格区间

需求说明 #

使用WooCommerce及WooCommerce Product Bundles插件，需将产品捆绑包的价格（含初始价格区间）显示在页面顶部产品标题下方；当用户选择捆绑内的产品选项时，顶部价格需同步更新为对应组合的实际价格。

修改后的代码实现 #

add_action('woocommerce_single_product_summary', 'bundle_price_display_under_title', 5);
function bundle_price_display_under_title() {
    global $product;

    // 仅针对捆绑包产品生效
    if ( ! $product->is_type('bundle') ) return;

    // 隐藏默认的捆绑包价格位置
    ?>
    <style>
        .woocommerce-bundle-form .price { display: none !important; }
    </style>
    <?php

    // 输出顶部价格容器
    echo '<p class="bundle-top-price price">' . $product->get_price_html() . '</p>';
}

add_action('woocommerce_before_add_to_cart_form', 'bundle_top_price_update_script');
function bundle_top_price_update_script() {
    global $product;

    if ( ! $product->is_type('bundle') ) return;
    ?>
    <script>
        jQuery(function($) {
            // 监听捆绑包表单刷新事件（选择产品选项时触发）
            $('form.cart').on('woocommerce_bundle_add_to_cart_form_refreshed', function(event, data) {
                // 更新顶部价格
                if (data.price_html) {
                    $('.bundle-top-price').html(data.price_html);
                }
            });
        });
    </script>
    <?php
}

代码说明 #

• 第一个函数bundle_price_display_under_title：
  • 通过woocommerce_single_product_summary钩子（优先级5，确保在标题之后、其他元素之前输出）添加顶部价格容器
  • 隐藏默认的捆绑包价格区域
  • 初始输出捆绑包的价格区间
• 第二个函数bundle_top_price_update_script：
  • 使用WooCommerce Product Bundles专属的woocommerce_bundle_add_to_cart_form_refreshed事件，监听用户选择捆绑内产品的操作
  • 获取更新后的价格HTML并替换顶部价格容器的内容

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