Question

我想在单个商品页面中添加总价。不幸的是，我不是程序员。这意味着我实际上并不了解JavaScript或代码。

所以我在谷歌上搜索了一些代码并将其添加到function.php文件中。

这是代码：

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 29 );
function woocommerce_total_product_price() {
    global $woocommerce, $product;
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('price total','woocommerce'),'<span class="price">'.$product->get_price().'</span>'.'KRW');
    ?>
        <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(product_total.toFixed(0));

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

我的问题是代码没有显示千位分隔符。我怎么能这样做？

我想在数量和添加到购物车按钮之间添加总价格。现在总价格在数量之前。

感谢。

Answer 1

更新：我已经测试了这段代码，现在它完美无缺。

释。您的代码中有两部分：

使用php显示初始产品价格。我在这里使用php函数 number_format() 来用一千个昏迷分隔符来格式化价格。
使用jQuery按数量更新总价。我正在使用javascript replace() 功能，其中包含自定义 regex 。

所以这是你的工作代码：

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 25 );
function woocommerce_total_product_price() {
    global $woocommerce, $product;
    $product_price = number_format($product->get_price());


    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('price total','woocommerce'),'<span class="price">'.$product_price.'</span>'.' KRW');
    ?>
        <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);
                        var product_total_formated = product_total.toFixed(0).replace(/(\d)(?=(\d{3})+$)/g, "$1,");

                        $('#product_total_price .price').html(product_total_formated);

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

将价格放在正确的位置：

此处是 content-single-product.php 模板的摘录，通过摘要显示页面上不同元素的顺序（展示位置）：

/**
 * woocommerce_single_product_summary hook.
 *
 * @hooked woocommerce_template_single_title - 5
 * @hooked woocommerce_template_single_rating - 10
 * @hooked woocommerce_template_single_price - 10
 * @hooked woocommerce_template_single_excerpt - 20
 * @hooked woocommerce_template_single_add_to_cart - 30
 * @hooked woocommerce_template_single_meta - 40
 * @hooked woocommerce_template_single_sharing - 50
 */
do_action( 'woocommerce_single_product_summary' );

正如您所看到的，要更正功能的位置，请在优先级 20 和 30 之间。所以我选择了优先级 25 。

参考：

How can I format numbers as money in JavaScript?

在WooCommerce产品页面中添加总价格数千个分隔符

1 个答案: