Question

当数量发生变化时，我需要在产品页面中显示总价格如果您在购物车中添加产品数量，这与购物车中的行价相同我还是WooCommerce的新手，所以我不知道从哪里开始。但如果有人可以帮助我找到正确的方向，我想我可以自己管理。

所以，我的想法是我应该怎么做。

我认为我的jquery会是这样的。

jQuery(document).ready(function($){
    $('.qty').on('change',function(){
         // grab the price
         var price = $('[itemprop="price"]').attr('content');
         var total_price = price * this.value;
         console.log(price, this.value, total_price);
    });
})

粘贴在控制台上时可以正常工作。但我不确定将此代码放在WooCommerce上的哪个位置。

Answer 1

你几乎就在那里......试试这个，把它粘贴在你的functions.php

中

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 );
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(2));

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

来源：http://reigelgallarde.me/programming/show-product-price-times-selected-quantity-on-woocommecre-product-page/

Answer 2

这在产品种类繁多的页面上对我有用

//allow this particular AJAX function for logged in users
add_action('wp_ajax_myajax', 'woocommerce_total_product_price');

//allow this particular AJAX function for non-logged in users
add_action('wp_ajax_nopriv_myajax', 'woocommerce_total_product_price');

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 );
function woocommerce_total_product_price() {
    global $woocommerce, $product;
    // let's setup our divs
    echo sprintf('<div id="product_total_price" style="margin:20px auto;">%s %s</div>',__('Product Total:','woocommerce'),'<span class="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 price = jQuery('.single_variation_wrap .woocommerce-Price-amount.amount bdi').first().contents().filter(function() {
                            return this.nodeType == 3;
                        }).text().replace(',','');

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

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

                    }
                });
            });
            
            function addCommas(nStr) {
                nStr += '';
                var x = nStr.split('.');
                var x1 = x[0];
                var x2 = x.length > 1 ? '.' + x[1] : '';
                var rgx = /(\d+)(\d{3})/;
                while (rgx.test(x1)) {
                    x1 = x1.replace(rgx, '$1' + ',' + '$2');
                }
                return x1 + x2;
            }
        </script>
    <?php
}

Answer 3

您需要记住初始价格值。

因为当你减少数量时（增加它之后），你的代码会返回错误的结果。

这里有一个更完整的代码：

jQuery(document).ready(function($){

  // grab the price
  var initial_price = $('[itemprop="price"]').attr('content');

  $('.qty').on('change',function(){
     var total_price = initial_price * this.value;
     console.log(initial_price, this.value, total_price);
  });

})

您还需要在页面上打印之前格式化价格：

在价格之后（或之前）添加货币符号;
设置小数位数（例如$ 99.9或$ 99.99）（您可以使用toFixed()方法）;
等

这取决于你的任务。

希望它有所帮助。

Answer 4

这里的答案仅对我有部分帮助，因为我同时拥有简单和可变的产品，所以我将@Reigel和@aphoe的答案结合起来：

<?php 

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 );

function woocommerce_total_product_price() {
    global $woocommerce, $product;
    $product_type = $product->get_type(); ?> 

    <script>
        function addCommas(nStr) {
            nStr += '';
            const x = nStr.split('.');
            let x1 = x[0];
            const x2 = x.length > 1 ? '.' + x[1] : '';
            const rgx = /(\d+)(\d{3})/;
            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + ',' + '$2');
            }
            return x1 + x2;
        }

        function resetVariations() {
            jQuery('.reset_variations').click(function() {
                jQuery('.current-price').html('');
            });
        }

        function updateCurrentPrice(productType) {
            jQuery(function($){                
                let price = <?php echo $product->get_price(); ?>;
                const currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

                $('[name=quantity]').change(function(){
                    if (!(this.value < 1)) {
                        if (productType === 'variable') {
                            price = jQuery('.single_variation_wrap .woocommerce-Price-amount.amount bdi').first().contents().filter(function() {
                                return this.nodeType == 3;
                            }).text().replace(',','');
                        }

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

                        $('.current-price').html( currency + addCommas(product_total.toFixed(2)));
                    }
                });
            });
        }

        updateCurrentPrice('<?php echo $product_type; ?>');
        resetVariations();
    
    </script>
    <?php
}

Answer 5

我认为最好依赖于低于元素 innerText 的值提供的事件和数据。

我的解决方案如下（如果产品显示在弹出窗口中，即动态加载，它也有效）

add_filter( 'formatted_woocommerce_price', function($formatted, $row, $decimals, $decimal_separator, $thousand_separator ) {
  return is_product() ? '<span class=number>' . $formatted . '</span>' : $formatted;
},10, 5);

add_action('woocommerce_after_add_to_cart_quantity', function() {
global $product;
if (!$product->is_single()) return;
?>
    <input type="hidden" name="simple-product-price" value="<?php echo $product->get_price() ?>">

<?php
});

和 javascript 中的某个地方：

$('body').on('change', '[name=quantity]', function(e) {
    const form = this.closest('form')
    const priceinput = form.querySelector('[name=simple-product-price]')
    let unitprice = 0
    if (priceinput) {
      unitprice = priceinput.value
    } else {
      const data = JSON.parse(form.dataset['product_variations'])
      const currentvariation = form.querySelector('[name=variation_id]')
      if (!currentvariation) return
      const variation = data.find(variation => variation.variation_id == currentvariation.value)
      if (!variation) return
      unitprice = variation.display_price
    }
    const total = (unitprice * e.target.value).toFixed(2)
    form.querySelector('.single_variation_wrap .woocommerce-Price-amount .number').innerText = total
  })

数量选择更改时，WooCommerce显示总价

5 个答案: