WooCommerce单产品页面：将带百分比的折扣金额移至显示价格下方

改动说明 #

原代码将折扣信息显示在产品摘要区域，要移至页面底部价格下方，需替换挂载钩子并调整可变产品的实现逻辑：

1. 简单产品：切换钩子至产品区域底部的挂载点，确保内容显示在页面靠下位置；
2. 可变产品：不再通过过滤器追加到价格HTML中，改为通过独立钩子在页面底部渲染，并添加JS监听变体切换事件，动态更新折扣信息。

调整后的完整代码 #

// 简单产品：在页面底部显示折扣信息
add_action( 'woocommerce_after_single_product_summary', 'simple_product_saving_amount', 20 );
function simple_product_saving_amount() {
    global $product;
    if( $product->is_type('simple') && $product->is_on_sale() ) {
        $regular_price = (float) wc_get_price_to_display( $product, array('price' => $product->get_regular_price() ) );
        $active_price  = (float) wc_get_price_to_display( $product, array('price' => $product->get_sale_price() ) );
        $saved_amount  = $regular_price - $active_price;
        $percentage    = round( $saved_amount / $regular_price * 100 );
        
        echo '<p id="saving_total_price">'. __( "You Save" ) .': ' . wc_price($saved_amount) . ' ('.$percentage.'%)</p>';
    }
}

// 可变产品：在页面底部显示折扣信息，并监听变体切换更新
add_action( 'woocommerce_after_single_product_summary', 'variable_product_saving_amount', 20 );
function variable_product_saving_amount() {
    global $product;
    if( $product->is_type('variable') ) {
        // 初始化显示默认变体的折扣信息
        $default_variation = $product->get_default_attributes();
        if( !empty($default_variation) ) {
            $variation_id = $product->get_matching_variation( $default_variation );
            $variation = wc_get_product( $variation_id );
            if( $variation && $variation->is_on_sale() ) {
                $saved_amount  = wc_get_price_to_display( $variation, array('price' => $variation->get_regular_price() ) ) - wc_get_price_to_display( $variation );
                $percentage    = round( $saved_amount / wc_get_price_to_display( $variation, array('price' => $variation->get_regular_price() ) ) * 100 );
                
                echo '<p id="variable_saving_total_price">'. __( "You Save" ) .': ' . wc_price($saved_amount) . ' ('.$percentage.'%)</p>';
            } else {
                echo '<p id="variable_saving_total_price" style="display:none;"></p>';
            }
        } else {
            echo '<p id="variable_saving_total_price" style="display:none;"></p>';
        }

        // 添加JS监听变体切换，动态更新折扣信息
        ?>
        <script>
        jQuery(document).ready(function($){
            $('form.variations_form').on('show_variation', function(event, variation){
                if( variation.on_sale ) {
                    var saved_amount = variation.display_regular_price - variation.display_price;
                    var percentage = Math.round( (saved_amount / variation.display_regular_price) * 100 );
                    $('#variable_saving_total_price').html('<?php echo __( "You Save" ); ?>: ' + wc_price(saved_amount) + ' (' + percentage + '%)').show();
                } else {
                    $('#variable_saving_total_price').hide();
                }
            });

            $('form.variations_form').on('hide_variation', function(){
                $('#variable_saving_total_price').hide();
            });
        });
        </script>
        <?php
    }
}

代码解释 #

• 简单产品：通过woocommerce_after_single_product_summary钩子（优先级20），在产品描述、评论等区域之后渲染折扣信息，确保位于页面底部价格模块下方；
• 可变产品：
  • 页面加载时自动渲染默认选中变体的折扣信息，无默认变体则隐藏元素；
  • 借助WooCommerce内置的变体切换事件，实时计算并更新当前选中变体的折扣数据，保持信息与用户选择同步。

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