WooCommerce可变产品价格x数量变化

Question

我想显示数量变化时可变产品的价格。我已经尝试了一切，但是失败了。以下代码适用于简单产品，但不适用于可变产品：

<script>
    jQuery(document).ready(function($){
    var prodprice = <?php echo $product->get_price();?>;
    $("[name='quantity']").on('change',function(){
    <?php if($product->is_type( 'simple' )) { ?>
         $( "div.product-type-simple div.entry-summary > p.price > span.woocommerce-Price-amount > bdi" ).html( '<div>$ '+ (this.value * prodprice).toFixed(2) +'</div>' );
    
    <?php } elseif ($product->is_type( 'variable' )){?>
        $( "div.product-type-variable div.woocommerce-variation-price > span.price > span.woocommerce-Price-amount > bdi" ).html( '<div>$ '+ (this.value * <?php echo $product->get_display_price(); ?>).toFixed(2) +'</div>' );
        <?php }?>
            });
});
</script>

该代码获取第一个变化值的价格（并且价格也发生了变化），但是当我从Select标记中选择第二个变化时，价格没有变化（实际上第一个变化价格仍然显示）。

但是，如果我删除elseif语句部分，它将同时显示两个变动价格。

简而言之，此代码对于简单产品而言是完美的，但对于可变产品而言则不是。