'Programmatically changing Price of variation product in WooCommerce

I'm trying to programmatically change the price of variation products. I managed to find that in woocommerce/templates/single-product/add-to-cart/variation.php has underscore.js

In this I am focused on the below line.

<div class="woocommerce-variation-price">{{{ data.variation.price_html }}}</div>

My question is how does one programmatically assign this div an ID from function.php? What would the woocommerce hook be? I've tried using javascript, but this is only displayed once all the inputs have been selected and I'm detecting length doesn't work when it isn't displayed.

function updatePrice(label) {
   
    let displayPrice = document.getElementsByClassName("woocommerce-variation-price");
    console.log(displayPrice);
    if(displayPrice.children.length != 0) {
        console.log(displayPrice.children);
    }
    else {
        console.log("Not Found");
    }
}

Focusing on the function when doing the check on displayPrice I get an error saying Uncaught TypeError: Cannot read properties of undefined (reading 'length') This is because it doesn't exist until all options are selected. Any advise?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source