CODEWITHSUNDEEP
javascriptphpjquerywordpresswoocommerce
user6585401
user6585401

Reputation: 13

Add thousands seperator with total price in WooCommerce product pages

I wanted to add total price in single product page. Unfortunately I'm not a programmer. It means I actually don't know about JavaScript or code well.

So I searched some codes on google and added it in function.php file.

This is the code:

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
}

My problem is the code doesn't show thousands separator. How can I do that?

And I want to add the total price between quantity and add to cart button. Now the total price is before quantity.

Thanks.

Upvotes: 1

Views: 1873

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 254182

Update: I have tested this code and it works perfectly, now.

Explanations. There is 2 parts in your code:

  1. Displaying initial product price with php. I have use here php function number_format() to format price with a thousand coma separator.
  2. Updating total price by the quantity using jQuery. I am using javascript replace() function with a custom in it.

So here is your working code:

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
}

Placing your price in the right location:

Here it is an extract from content-single-product.php template that shows the order (placement) of different elements on page, through hooks:

/**
 * 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' );

As you can see, to correct position for your function is between priority 20 and 30. So I have chose priority 25.

Reference:

Upvotes: 1

Related Questions