Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Get price value from span tag and append it inside a div after multiplying with a number – Woocommerce

I have this html on the checkout page of my website

<tr class="order-total">
    <th>Total</th>
    <td><strong><span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">$</span>24,500.00</span></strong> 
    </td>
</tr>

I have to multiply this price(24,500) with 0.0198 and show it in side a div which is on the same page in another section. This is what I have tried:

jQuery('.woocommerce-Price-amount.amount').load(function () {
  var totprice = jQuery('.woocommerce-Price-amount.amount').val();
  var leaseprice = totprice * 0.0198;
  jQuery(".leaseprice_container").append(leaseprice);    
});

The section where I am trying to show the leaseprice has this html:

<div class="leaseprice_container">
    <p><strong>Prices are in USD.</strong></p>
</div>
Tags:

4

Answers


  1. 0

    There is no .load on an html element. One would use

    $("selector").load("url",function() {...})

    to load data from the backend

    A span does not have .val()

    Try this

    var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

const totprice = $('.woocommerce-Price-amount').text().replace(/($|,)/g, "");

const leaseprice = totprice * 0.0198;

console.log(totprice,leaseprice)

$(".leaseprice_container p strong").prepend(formatter.format(leaseprice)+" ")
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr class="order-total">
  <th>Total</th>
  <td><strong><span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">$</span>24,500.00</span></strong>
  </td>
</tr>
<div class="leaseprice_container">
  <p><strong>Prices are in USD.</strong></p>
</div>
    Login or Signup to reply.
  2. 0
    • You need to use the jQuery() function which is shorthand for document.load.
    • You need to get the text() of the span because only inputs have values.
    • You need to remove everythign that isn’t a number from the text so Javascript can use it as a number. (.replace(/[^d.-]/g, ''))
    jQuery(function() {
  var totprice = jQuery('.woocommerce-Price-amount.amount').text().replace(/[^d.-]/g, '');;
  var leaseprice = totprice * 0.0198;
  jQuery(".leaseprice_container").append(leaseprice);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<tr class="order-total">
  <th>Total</th>
  <td><strong><span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">$</span>24,500.00</span></strong>
  </td>
</tr>

<div class="leaseprice_container">
  <p><strong>Prices are in USD.</strong></p>
</div>
    Login or Signup to reply.
  3. 0

    I used a regex to remove all not number characters, then do all the calculation in integer, and then returning to the real decimal base, in order to avoid rounding errors.

    var price = Number.parseInt($('.woocommerce-Price-amount.amount').text().replace(/[D]/g, ''));
var leaseprice = price * 198 / 1000000;
$(".leaseprice_container .price").text(leaseprice);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr class="order-total">
    <th>Total</th>
    <td><strong><span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">$</span>24,500.00</span></strong> 
    </td>
</tr>

<div class="leaseprice_container">
    <span class="woocommerce-Price-currencySymbol">$</span><span class="price"></span>
    <p><strong>Prices are in USD.</strong></p>
</div>
    Login or Signup to reply.
  4. 0

    You can ge the value using text() and not val(), which is for input elements, you can trim it and replace the $ sign and the comma with an empty character in order to have a correct float number format in order to make parseFloat() to work. Then you can place the result in the section you want:

    $(document).ready(function(){
    var totprice = parseFloat($(".woocommerce-Price-amount.amount")
                               .text()
                               .trim()
                               .replace('$','')
                               .replace(',',''));
    var leaseprice = totprice * 0.0198;
    $(".leaseprice_container strong").text(leaseprice);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search