Aktualisieren des Preises auf der Produktseite, wenn Variationen mit WooCommerce ausgewählt werden

Ich habe ein paar Probleme mit der Anzeige eines aktualisierten Preises für ein Produkt auf der Produktseite selbst mit WooCommerce.

Grundsätzlich haben wir eine benutzerdefinierte Builder-Seite, die es dem Benutzer ermöglicht, verschiedene Optionen (oder Variationen in diesem Fall) auszuwählen, und wenn er sie dann in seinen Warenkorb legt, wird der richtige Preis berechnet. Das funktioniert alles prima.

Das Problem, das ich habe, ist, dass wir den Preis auf dem Bildschirm anzeigen möchten, während sie ihre Optionen ändern.

Nehmen wir also an, ich habe einen blauen Artikel ausgewählt, der 6 Meter lang ist, der Preis sollte 100 £ betragen, aber wenn ich den roten Artikel wähle, der 1 Meter lang ist, beträgt der Preis 10 £.

Ich vermute, ein bisschen jQuery oder etwas könnte die Seite dynamisch aktualisieren, aber ich weiß nicht, wo oder wie ich das mache.

Es müsste eine Funktion ausgelöst werden, von der ich annehme, dass sie ein Formularauswahlfeld ändert.

Derzeit zeige ich den Preis mit diesem …

$product = new WC_Product(538);

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

Ich denke, das ist sowieso falsch, da dies eher der Grundpreis als der Variationspreis ist, aber so oder so muss ich noch einen Weg finden, den Preis auf dem Bildschirm OHNE Aktualisierung zu aktualisieren.

Hier ist eines meiner AUSGEWÄHLTEN Formularelemente, obwohl es einige davon auf der Seite gibt.

<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>

Jede Hilfe wäre sehr willkommen!

Wenn ich die Frage mit weiteren Details aktualisieren muss, kann ich dies tun. Ich dachte nur, ich würde es einfach halten!

Simon

Ich mache es ungefähr so ​​in JS und verwende die found_variation Veranstaltung:

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();
});

Und auf der HTML/Template-Seite überschreibe ich woocommerce/single-product/add-to-cart/variable.php und bearbeiten Sie den Preisteil so, dass er ungefähr so ​​aussieht:

<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>

Ich hoffe das kann jemandem helfen?