CODEWITHSUNDEEP
jquerywoocommerce
yasin taqizade
yasin taqizade

Reputation: 117

WooCommerce display price when quantity selection change

I want to display total price when quantity selection change.

This is the code I found recently.

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

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

But, i use a wordpress template that uses a template builder (such as page builder) to design a product page and this code doesn't work here.

how can i add this code to my custom product page?

Upvotes: 2

Views: 1581

Answers (1)

Rajeev
Rajeev

Reputation: 1498

I hope you added this code to your theme's functions.php file.

Are you able to see this below div in the detailed product page?

<div id="product_total_price"></div>

And if it is reflecting in the frontend, it means that woocommerce hook is working fine. Then we need to check whether the Change function is working or not. For that, add an alert("Test"); inside the Change function like below.

<script>
        jQuery(function($){
            var price = <?php echo $product->get_price(); ?>,
                currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

            $('[name=quantity]').change(function(){
alert("Testing");
                if (!(this.value < 1)) {

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

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

                }
            });
        });
    </script>

Kindly share the product page URL for a better understanding.

Updated code to be replaced in functions.php:

   add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 20 );
add_action( 'woocommerce_before_add_to_cart_form', 'woocommerce_total_product_price', 20 );

function woocommerce_total_product_price() {
global $woocommerce, $product;
// let's setup our divs

echo '<div id="product_total_price" style="margin-bottom:20px;"></%s %s</div>,Product Total: <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(){
                    alert("Testing");
                if (!(this.value < 1)) {

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

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

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

Upvotes: 2

Related Questions