在 WooCommerce 单品页面显示总价,商品原价 *​​ 最小数量

Posted

技术标签:

【中文标题】在 WooCommerce 单品页面显示总价,商品原价 *​​ 最小数量【英文标题】:Display the total price on the WooCommerce single product page with the original product price * minimum quantity 【发布时间】:2021-02-19 03:40:37 【问题描述】:

我正在寻找创建一个 php 代码 sn-p 以在 WooCommerce 单一产品页面上显示总价格以及原始产品价格 * 最小数量

基于WooCommerce - auto update total price when quantity changed 答案代码,这是我目前所拥有的:

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>',__('Prezzo Totale:','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


问题是在查看单个产品页面时,它显示的是一种产品数量的价格。 change 事件在数量发生变化时发生,因此在此事件发生之前不进行任何计算。

我有一个 B2B 网站,所以当客户查看单个产品页面时,他们会立即看到最低数量,那么如何立即获得每个产品最低数量的总价格?

【问题讨论】:

【参考方案1】:

以下代码在加载页面时考虑了产品数量,然后在更改产品数量时更新价格。

通过代码中添加的注释标签进行解释

function action_woocommerce_single_product_summary() 
    global $product;
    
    // Getters
    $price = $product->get_price();
    $currency_symbol = get_woocommerce_currency_symbol();
    
    // let's setup our div
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>', __('Product Total:','woocommerce'), '<span class="price">' . $currency_symbol . $price . '</span>' );
    ?>
    <script>
    jQuery(function($) 
        // jQuery variables
        var price = <?php echo $price; ?>, 
            currency = '<?php echo $currency_symbol; ?>',
            quantity =  $( '[name=quantity]' ).val();
            
        // Code to run when the document is ready
        var product_total = parseFloat( price * quantity );
        $( '#product_total_price .price' ).html( currency + product_total.toFixed( 2 ) );
            
        // On change
        $( '[name=quantity]' ).change( function() 
            if ( ! ( this.value < 1 ) ) 
                product_total = parseFloat( price * this.value );

                $( '#product_total_price .price' ).html( currency + product_total.toFixed( 2 ) );
            
        );
    );
    </script>
    <?php


// We are going to hook this on priority 31, so that it would display below add to cart button.
add_action( 'woocommerce_single_product_summary', 'action_woocommerce_single_product_summary', 31, 0 );

【讨论】:

【参考方案2】:

$product-&gt;get_price() 将返回 1 个产品的价格。

您可以使用get_min_purchase_quantity() 并首次乘以价格。

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 );
function woocommerce_total_product_price() 
    global $woocommerce, $product; 
    // let's setup our divs 
$price = $product->get_price();
$min_qnty = $product->get_min_purchase_quantity();
$initial_price = floatval($price) * intval ($min_qnty);
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Prezzo Totale:','woocommerce'),'<span class="price">'.$initial_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

【讨论】:

【参考方案3】:

我有一个类似的问题,并在周围找到了很多答案,但是我根据之前的答案和在线资源编写的这个是唯一一个在最小数量和页面重新加载问题没有显示正确总价的情况下完美运行

p>
// Priority 31 is placed below the 'add to cart' button
add_action( 'woocommerce_single_product_summary', 'action_woocommerce_single_product_summary', 31, 0 );

function action_woocommerce_single_product_summary() 
    global $product;
    
    $price = $product->get_price();
    $currency_symbol = get_woocommerce_currency_symbol();
    $min_qnty = $product->get_min_purchase_quantity();
    $initial_price = floatval($price) * intval ($min_qnty);
    
    // leave the span class 'prezzo' as it is or it won't render the price
    echo sprintf('<div id="product_total_price">%s %s</div>', __('Total:','woocommerce'), '<span class="prezzo">' . $currency_symbol . $initial_price . '</span>' );
    ?>
    <script>
    jQuery(function($) 
        // vars
        var price = <?php echo $price; ?>, 
            currency = '<?php echo $currency_symbol; ?>',
            quantity =  $( '[name=quantity]' ).val();
            
        var product_total = parseFloat( price * quantity );
        $( '#product_total_price .prezzo' ).html( currency + product_total.toFixed( 2 ) );
            
        // On change
        $( '[name=quantity]' ).change( function() 
            if ( ! ( this.value < 1 ) ) 
                product_total = parseFloat( price * this.value );

                $( '#product_total_price .prezzo' ).html( currency + product_total.toFixed( 2 ) );
            
        );
    );
    </script>
    <?php

【讨论】:

以上是关于在 WooCommerce 单品页面显示总价,商品原价 *​​ 最小数量的主要内容,如果未能解决你的问题,请参考以下文章

仅在所有 WooCommerce 单品上显示价格后缀

WooCommerce 单品页面中基于尺寸的价格计算

php 为XL WooCommerce销售触发插件更改Oxygen主题的WooCommerce单品页面位置

将基于 ACF 字段的自定义“添加到购物车”按钮添加到 WooCommerce 单品页面

仅在 Woocommerce 结帐页面中将文本附加到总价

在产品页面上显示运费 - WooCommerce