[WooCommerce在选择数量更改时显示价格

Question

我想在数量选择更改时显示总价。

这是我最近找到的代码。

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 15 );
function woocommerce_total_product_price() {
global $woocommerce, $product;
// let's setup our divs
echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Product Total:','woocommerce'),'<span class="price">'.$product->get_price().'</span>');
?>
    <script>
        jQuery(function($){
            var price = <?php echo $product->get_price(); ?>,
                currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

            $('[name=quantity]').change(function(){
                if (!(this.value < 1)) {

                    var product_total = parseFloat(price * this.value);

                    $('#product_total_price .price').html( currency + product_total.toFixed(0));

                }
            });
        });
    </script>
<?php
}

但是，我使用的是wordpress模板，该模板使用模板构建器（例如页面构建器）来设计产品页面，此代码在这里不起作用。

我如何将此代码添加到我的自定义产品页面？

Answer 1

我希望您将此代码添加到主题的functions.php文件中。

您能否在详细的产品页面的div以下看到此内容？

<div id="product_total_price"></div>

并且，如果它反映在前端，则意味着woocommerce钩子工作正常。然后，我们需要检查“更改”功能是否正常工作。为此，添加一个alert（“ Test”）;在下面的“更改”功能中。

<script>
        jQuery(function($){
            var price = <?php echo $product->get_price(); ?>,
                currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

            $('[name=quantity]').change(function(){
alert("Testing");
                if (!(this.value < 1)) {

                    var product_total = parseFloat(price * this.value);

                    $('#product_total_price .price').html( currency + product_total.toFixed(0));

                }
            });
        });
    </script>

请分享产品页面URL，以更好地理解。