baldursson

I also needed a solution for this, and came up with what I thought was an innovative piece of code 🙂

You can see if a variation has been selected by looking at the “add to cart” button. When a variation hasn’t been selected yet, it has the class wc-variation-selection-needed.

By using a MutationObserver (Browser Compatibility), I detected changes to the state of the form by observing attributes of the “add to cart” button. When it has the class wc-variation-selection-needed, I display the price range, otherwise I hide it.

The result: When a variation is selected I see the proper price, when it isn’t I see the price range instead. Here is some code you can use:

var cartButton = document.querySelector('.variations_button');	

var observer = new MutationObserver(
    function(mutations) {
        priceChangeCallback(mutations);
    }
);

var config = {
    attributes: true
};

observer.observe(cartButton, config);

function priceChangeCallback(mutations) {
    if (!!document.querySelector('.wc-variation-selection-needed')) {
        document.querySelector('.price-range').classList.remove('hidden');
    } else {
        document.querySelector('.price-range').classList.add('hidden');
    }
}