Actualización del precio en la página del producto cuando se eligen variaciones con WooCommerce

Tengo un par de problemas para mostrar un precio actualizado de un producto en la página del producto usando WooCommerce.

Básicamente, tenemos una página de creación personalizada que permite al usuario seleccionar diferentes opciones (o variaciones en este caso) y luego, cuando lo agregan a su carrito, se calcula el precio correcto. Todo eso funciona bien.

El problema que tengo es que queremos mostrar el precio en la pantalla a medida que cambian sus opciones.

Entonces, digamos que elegí un artículo azul que mide 6 metros de largo, el precio debería ser de £ 100, pero si elijo el artículo rojo que mide 1 metro de largo, el precio es de £ 10.

Supongo que un poco de jQuery o algo así podría actualizar dinámicamente la página, pero no sé dónde o cómo hago esto.

Tendría que activar una función que asumo al cambiar un cuadro de selección de formulario.

Actualmente, estoy mostrando el precio usando esto…

$product = new WC_Product(538);

echo esc_attr($product->get_price());

De todos modos, creo que está mal, ya que ese es el precio base en lugar del precio de variación, pero de cualquier manera, todavía necesito encontrar una manera de actualizar el precio en la pantalla SIN actualizar.

Aquí está uno de mis elementos de formulario SELECT, aunque hay bastantes de estos en la página.

<select id="frame-depth" class="kad-select" name="attribute_frame-depth" data-attribute_name="attribute_frame-depth"" data-show_option_none="yes">
<option value="Standard depth"  selected="selected">Standard depth</option>
<option value="Extra Deep" >Extra Deep</option>
</select>

¡Cualquier ayuda sería muy apreciada!

Si necesito actualizar la pregunta con más detalles, puedo hacerlo. ¡Solo pensé que lo mantendría simple!

Simón

Lo estoy haciendo más o menos así en JS, haciendo uso de la found_variation evento:

var currentVariation = null;

function calcTotalPrice(variation = null) {
  if (variation) {
    currentVariation = variation;
  }
  if (!currentVariation) {
    var $price = $('#product-price');
    if ($price && $price.length) {
      currentVariation = {
        display_price: $price.val()
      };
    }
  }
  if (currentVariation) {
    var qty = $('#quantity').val();
    var total = currentVariation.display_price * qty;
    $('#total-price-result').html('€ ' + number_format(total, 2, ',', ' '));
  }
}

$('form.variations_form').on('found_variation', function(e, variation) {
  calcTotalPrice(variation);
});
$('#quantity').on('input change', function() {
  calcTotalPrice();
});
$('form.variations_form').on('hide_variation', function() {
  $('#total-price-div').hide();
});
$('form.variations_form').on('show_variation', function() {
  $('#total-price-div').show();
});

Y en el lado HTML/plantilla anulo woocommerce/single-product/add-to-cart/variable.php y edite la parte de precios para que sea similar a esto:

<div id="total-price-div">
    <h4><label>{{ __("Total", "my-text-domain") }}</label></h4>
    <div class="value">
        <span class="total-price"><span id="total-price-result" class="total-price"></span></span>
    </div>
</div>

Espero que esto pueda ayudar a alguien?