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

Woocommerce – jQuery – Unable to select value of an element added using elementor

I have this code in elementor custom code

<script>
jQuery(document).ready(function($){
    $('#ship-price').on('click', function(){
            var originalPrice = $('#product-price').val();
            console.log(originalPrice);
            //
            var shipPrice = $('#ship-price').val();          
            console.log(shipPrice);
    });
});
</script>

I’m trying to select two elements that I’ve added using elementor and where I have assigned a css id. It will occur that I’m unable to read the product price and ship price values.

What I need to achive is to show a different product price that is loaded using woocommerce, after the user click. How I can fix the problem?

UPDATE
this is the html of the product price

<div class="elementor-element elementor-element-2cf415f elementor-widget elementor-widget-heading" data-id="2cf415f" data-element_type="widget" id="product-price" data-widget_type="heading.default">
                <div class="elementor-widget-container">
            <h2 class="elementor-heading-title elementor-size-default"><span class="woocommerce-Price-amount amount"><bdi>499,00&nbsp;<span class="woocommerce-Price-currencySymbol">€</span></bdi></span>*</h2>        </div>
                </div>

And this is the rendered html for the ship price I need to get

<div id="elementor-tab-content-3201" class="elementor-tab-content elementor-clearfix elementor-active" data-tab="1" role="region" aria-labelledby="elementor-tab-title-3201" style="display: block;"><ul>
<li><a href="#" id="ship-price-a">70€ + IVA</a> ...</li>
<li><a href="#" id="ship-price-b">79€ + IVA</a> ...</li>
</ul></div>
Tags:

2

Answers


  1. 0

    The product price seems to be within a heading element () and the ship price is within an anchor element (). To get the content of these elements, you should target the original price using find() and this to get the ship price and use text() instead of val().

    Demo:

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<div class="elementor-element elementor-element-2cf415f elementor-widget elementor-widget-heading" data-id="2cf415f" data-element_type="widget" id="product-price" data-widget_type="heading.default">
    <div class="elementor-widget-container">
        <h2 class="elementor-heading-title elementor-size-default"><span class="woocommerce-Price-amount amount"><bdi>499,00&nbsp;<span class="woocommerce-Price-currencySymbol">€</span></bdi></span>*</h2>
    </div>
</div>

<div id="elementor-tab-content-3201" class="elementor-tab-content elementor-clearfix elementor-active" data-tab="1" role="region" aria-labelledby="elementor-tab-title-3201" style="display: block;">
    <ul>
        <li><a href="#" id="ship-price-a">70€ + IVA</a> ...</li>
        <li><a href="#" id="ship-price-b">79€ + IVA</a> ...</li>
    </ul>
</div>

<script>
  $(document).ready(function(){
    $('#ship-price-a, #ship-price-b').on('click', function(){
        console.clear();
        var originalPrice = $('#product-price').find('.woocommerce-Price-amount').text();
        console.log(originalPrice);

        var shipPrice = $(this).text();
        console.log(shipPrice);
    });
  });
</script>
    Login or Signup to reply.
  2. 0

    a) Since your Id’s are not straightforward so use * to match them

    b) Also, none of your prices is inside the input element, they are inside some HTML elements so use .text() rather than .val()

    c) Product price is coming under the child element of the #product-price element so you have to modify that code too.

    Working snippet:

    jQuery(document).ready(function($) {
  $('a[id*=ship-price]').on('click', function(event) {
    event.preventDefault();
    var originalPrice = $('#product-price').find('.woocommerce-Price-amount').text().replace(/[^0-9]/gi, '');
    console.log(originalPrice);

    var shipPrice = $(this).text().replace(/[^0-9]/gi, '');
    console.log(shipPrice);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="elementor-element elementor-element-2cf415f elementor-widget elementor-widget-heading" data-id="2cf415f" data-element_type="widget" id="product-price" data-widget_type="heading.default">
  <div class="elementor-widget-container">
    <h2 class="elementor-heading-title elementor-size-default"><span class="woocommerce-Price-amount amount"><bdi>499,00&nbsp;<span class="woocommerce-Price-currencySymbol">€</span></bdi>
      </span>*</h2>
  </div>
</div>

<div id="elementor-tab-content-3201" class="elementor-tab-content elementor-clearfix elementor-active" data-tab="1" role="region" aria-labelledby="elementor-tab-title-3201" style="display: block;">
  <ul>
    <li><a href="#" id="ship-price-a">70€ + IVA</a> ...</li>
    <li><a href="#" id="ship-price-b">79€ + IVA</a> ...</li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search