Woocommerce – Replacing Price Range When Variation Selected

I think it would be necessary to rewrite add-to-cart-min.js. Apart from the difficulty thereof, there would be an on-going maintenance burden every time the master copy gets updated by the theme author.

Alternatives include:
– not showing the range at all, perhaps with a note that a price will be shown when a variation is selected
– setting a default variation in the variation setup section
– get it to show “Prices from ￡123”, the 123 being the minimum for the relevant parent product.

Haha Lorro, thanks in advance ??

Getting rid of it completley would be fine.

Is it an option to then make the final price display below the short description? In a fashion this still gives the desired result.

KR

James

To hide the range of prices, try this in your custom css:

.entry-summary > div > .price {display:none}

No, you couldn’t show the variation price below the short description without hacking add-to-cart-min.js.

For the case where all variations are the same price, the variation price is hidden (on the assumption it will display under the short description) To force the variation price to be displayed in its normal place, you would use this in functions.php for your child theme:

// show variation price even if all variations are the same price
add_filter('woocommerce_show_variation_price', function() {return true;});

Thanks Lorro, thí would work perfectly, the only isue í that the price doén’t display on single products, example: https://olsonbaker.com/product/asteroid-petrol-glass/

What do you think?

Um. Ok, please remove the custom css which hides the upper price. Instead we can hide the variable price range for variable products only with this snippet:

// don't show variable price range under title
add_filter( 'woocommerce_variable_sale_price_html', 'hide_variable_prices', PHP_INT_MAX, 2 );
add_filter( 'woocommerce_variable_price_html', 'hide_variable_prices', PHP_INT_MAX, 2 );
function hide_variable_prices() {return '';}

We still need to force the lower price to display for variable products where the price is the same for all variations:

// show variation price under add-to-cart, even if all variations are the same price
add_filter('woocommerce_show_variation_price', function() {return true;});

perfecto! ?? Thanks Lorro!!

Hi Lorro

I’ve just realised that the prices on the shop pages have all dissappered, can we retrieve them?

To hide the variable price range on product pages only, try:

// don't show variable price range under title, product pages only
add_filter( 'woocommerce_variable_sale_price_html', 'hide_variable_prices', PHP_INT_MAX, 2 );
add_filter( 'woocommerce_variable_price_html', 'hide_variable_prices', PHP_INT_MAX, 2 );
function hide_variable_prices($html) {
  if ( is_product() ) {
    return '<p class="variable_price">Select an option to show its price.</p>';
  } else {
    return $html;
  }
}

Sorted ?? Thanks Lorro!

Hi lorro

I have the same problem
I did your solution but it is not perfect
IN the shop page it displays from price to price (scr shot https://i.imgur.com/X5Kc7qe.png)
I wanna display default price only (1 price) on shop page
Would you please show me how to do it??

Thank you very much

I have the same issue as nd89vn – would really appreciate the solution!

Thanks a lot in advance.

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

baldursson (@baldursson) Where do you put this code?