在“添加到购物车”上方添加消息，说明 - '以 7 英镑添加 0.5 米'为例

Question

我有一家面料商店，我需要它向顾客清楚地说明他们添加到购物篮中的数量。该产品定为1/2米价格。所以 1 份库存就是半米布料。

https://thefabricboutique.co.uk/product/jennifer-cotton/

我需要在添加到购物车上方注明。

为（价格）添加 (X) 米。

(x) - 数量所表示的一半。 （3个数量=1.5米） （价格）- 随着数量的增加而提高价格。 （3 份，7 英镑 = 21 英镑）

这是一次获得价格的尝试，但我只是在努力完成它！任何帮助都会很棒，谢谢。

我尝试了此代码，它适用于价格，但在数量更改之前似乎货币符号已下降。

add_action( 'woocommerce_before_add_to_cart_quantity', 'qty_front_add_cart' );
 
function qty_front_add_cart() {
    global $woocommerce, $product;
    // let's setup our divs
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Total price:','woocommerce'),'<span class="price">'.wc_get_price_to_display($product).'</span>');
    ?>
        <script>
            jQuery(function($){
                var price = <?php echo wc_get_price_to_display($product); ?>,
                    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 
}

Answer 1

要完成代码，您可以以与回显价格 div 相同的方式回显另一个 HTML 元素 (

id="product_total_price"

)。然后你可以在 JavaScript 中添加另一个变量和计算函数。

此代码将在“添加到购物车”按钮上方显示总价和总米数（数量的一半），并在数量发生变化时更新这些值：

// Add a function to the 'woocommerce_before_add_to_cart_quantity' action hook
add_action( 'woocommerce_before_add_to_cart_quantity', 'qty_front_add_cart' );

// Define the function
function qty_front_add_cart() {
    // Access the global product object
    global $product;

    // Display the total price message
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Total price:','woocommerce'),'<span class="price">'.get_woocommerce_currency_symbol().wc_get_price_to_display($product).'</span>');
    // Display the initial meter message
    echo sprintf('<div id="product_total_meter" style="margin-bottom:20px;">%s</div>',__('Add 0.5 meters for ','woocommerce').'<span class="meter_price">'.get_woocommerce_currency_symbol().wc_get_price_to_display($product).'</span>');

    // JavaScript code
    ?>
        <script>
            // When the document is ready
            jQuery(function($){
                // Get the product price from PHP and assign to JavaScript variable
                var price = <?php echo wc_get_price_to_display($product); ?>,
                    currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

                // When the quantity input field changes
                $('[name=quantity]').change(function(){
                    // If the new quantity is not less than 1
                    if (!(this.value < 1)) {
                        // Calculate the total price and assign to variable
                        var product_total = parseFloat(price * this.value);
                        // Calculate the total meters and assign to variable
                        var product_meter = parseFloat(this.value) / 2;

                        // Update the total price on the page
                        $('#product_total_price .price').html( currency + product_total.toFixed(2));
                        // Update the total meters on the page
                        $('#product_total_meter .meter_price').html('Add ' + product_meter.toFixed(1) + ' meters for ' + currency + product_total.toFixed(2));
                    }
                });
            });
        </script>
    <?php
}

代码应添加到您的

functions.php

文件的底部，您的子主题。

我已经测试了这段代码，它对我来说有效。此外，即使数量发生变化，我的货币符号仍然保持不变。