Change Variant Price Display Coding on Condition - Debut

[Ronald321]

I am trying to change the variant price based on some conditions but I can't seem to find how to change the variant price that is displayed on the product pages.  I got it working with products that do not have variants, but every time the variant option is changed, the default variant price is shown.

Might be something to do with the product-price.liquid or the onselectchange callback in theme.js?

When changing variant (red circle) I want to dynamically change the bold variant price.

Here is a similar topic that was unsolved:

https://community.shopify.com/c/Technical-Q-A/Variant-price-changed-dynamically/m-p/855971

[Ronald321]

I added this code in my theme.js

  if (variant) {
          $(".variant-price").money(variant.price);
      }

To the _onSelectChange callback

    /**
     * Event handler for when a variant input changes.
     */
    _onSelectChange: function() {
      var variant = this._getVariantFromOptions();

      this.container.dispatchEvent(
        new CustomEvent('variantChange', {
          detail: {
            variant: variant
          },
          bubbles: true,
          cancelable: true
        })
      );

      if (!variant) {
        return;
      }
      
      
      
      this._updateMasterSelect(variant);
      this._updateImages(variant);
      this._updatePrice(variant);
      this._updateSKU(variant);
      this.currentVariant = variant;

     
      if (this.enableHistoryState) {
        this._updateHistoryState(variant);
      }
      
      if (variant) {
		$(".variant-title").text(variant.title);
      }
		 
       if (variant) {
          $(".variant-price").money(variant.price);
      }
         
    },

 and added this code to my product-template.liquid section 

        <h4 class="variant-price">{{ current_variant.price | money }}</h4>

Anyone know why this code isn't working??

[Ronald321 · Accepted solution]

Got it to work by placing in:

<p style="color: black;" class="variant-price product__price" id="extraValue" >
{{ current_variant.price | times: 0.75 | money }} + Shipping
</p>

in product-template.liquid (named something different for me)

as well as the script that makes everything work:

{% capture variantsString %}
{% for variant in product.variants %}
"{{ variant.id }}":"{{ variant.price | times: 0.75 | money }} + Shipping"{% if forloop.last != true %},{% endif %}
{% endfor %}
{% endcapture %}
{% assign variantsString = variantsString | prepend : '{' | append : '}' %}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var variantString = JSON.parse({{ variantsString | strip_newlines | json }});
$( document ).ready(function() {
$('select[id*=SingleOptionSelector]:visible').change(function(){
if(variantString[$("select[name='id']").val()]){
$("#extraValue").text(variantString[$("select[name='id']").val()]);
}else{
$("#extraValue").text("Sold Out");
}
});
});
</script>

The overall goal was to display correct pricing to certain customer groups so that is why the "times: 0.75" is included.  I added in a few if statements to repeat the above code and changed the times amount as needed. I created a separate section to put this code in so then I just have to change the product template if it is a variant for the right pricing to show.