WooCommerce单价格区间变体产品选选项后价格消失问题求助

我实现了WooCommerce变体产品选择选项时价格自动同步到顶部的功能，但遇到一个问题：单价格区间的可变产品在选择选项后，顶部价格会消失，而多价格区间的产品能正常工作。

问题代码 #

当前使用的测试代码如下：

add_action( 'wp_footer', 'dcms_add_script_footer' );

function dcms_add_script_footer() {
    if ( ! is_product() ) return;
    ?>
        <script>
        jQuery(function ($) {

            $('.variations_form').on('woocommerce_variation_has_changed', function () {
                const container_price_top = 'p.price';
                const container_price_bottom = '.woocommerce-variation-price';

                $(container_price_top).empty();

                setTimeout(function(){
                    if ( $(container_price_bottom).is(":visible") ){
                        const content = $(container_price_bottom).html();
                        $(container_price_top).html(content);
                        $(container_price_bottom).hide();
                    }
                }, 500);
            });

        });
        </script>
    <?php
}

问题原因 #

代码逻辑存在缺陷：

• 每次变体切换时先清空了顶部p.price的内容
• 仅当底部.woocommerce-variation-price可见时才复制内容到顶部，但单价格区间的产品选择选项后，WooCommerce不会显示这个底部价格容器（因为价格无变化），导致顶部价格被清空后没有内容填充，最终价格消失。

修复后的代码 #

调整逻辑，保留原顶部价格内容作为 fallback，同时兼容可见/不可见的底部价格容器：

add_action( 'wp_footer', 'dcms_add_script_footer' );

function dcms_add_script_footer() {
    if ( ! is_product() ) return;
    ?>
        <script>
        jQuery(function ($) {

            $('.variations_form').on('woocommerce_variation_has_changed', function () {
                const container_price_top = 'p.price';
                const container_price_bottom = '.woocommerce-variation-price';
                
                setTimeout(function(){
                    // 获取底部价格容器的内容，不管是否可见
                    const variationContent = $(container_price_bottom).html();
                    
                    if (variationContent && variationContent.trim() !== '') {
                        // 如果有变体价格内容，替换顶部价格
                        $(container_price_top).html(variationContent);
                        $(container_price_bottom).hide();
                    }
                    // 如果没有变体价格内容，保留原顶部的价格区间内容，不做清空操作
                }, 300); // 缩短超时时间，提升响应速度
            });

        });
        </script>
    <?php
}

修改说明 #

1. 移除了初始的$(container_price_top).empty();操作，避免内容丢失
2. 不再判断底部价格容器是否可见，改为直接检查是否有有效内容
3. 仅在获取到有效变体价格内容时才替换顶部价格，否则保留原价格区间
4. 缩短超时时间，优化用户体验

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