Tips, WooCommerce Tutorials

How to Change the Variable Product Price Range in WooCommerce

Chances are, if you have variable products in your WooCommerce store, then you also have varying prices to go with them.

For example, you stock three different variations of the same bag, except the white version is $5 cheaper. So on your product page, the price is displayed as:

$12.99 – $17.99

This is less than ideal because the product page is showing a higher range of prices. Buyer psychology indicates that to encourage users to click and potentially purchase, showing the price in a different way could be the answer.

Fortunately, changing the variable product price range from this:

Variable Product Price Range from

To this:

Variable Product Price Range to this

Couldn’t be easier!

Update your variable product price range

Below is a piece of code which will allow you to make this simple change in the easiest way possible.

If you’re not sure where to put this code, you can try using the Code Snippets plugin, or add it to your theme or child theme’s functions.php file.

/**
 * Format price range.
 *
 * @param string $price
 * @param float  $from
 * @param float  $to
 *
 * @return string
 */
function iconic_format_price_range( $price, $from, $to ) {
    return sprintf( '%s: %s', __( 'From', 'iconic' ), wc_price( $from ) );
} 
 
add_filter( 'woocommerce_format_price_range', 'iconic_format_price_range', 10, 3 );

That’s really all you need!

We’re modifying the formatted price using the woocommerce_format_price_range filter, which accepts 3 parameters:

  • $price The current formatted price as a HTML string.
  • $from A float value of the “from” price.
  • $to A float value of the “to” price.

So all we need to do is return the “from” price, prefixed with our “From:” text. To do this we’re using the sprintf() function which allows us to use placeholders.

The only thing this method doesn’t do is show RRP prices when the “from” price is discounted. If you want to do that, things get a bit more complicated. You can use the following code instead of the one above.

/**
 * Change price format from range to "From:"
 *
 * @param float $price
 * @param obj $product
 * @return str
 */
function iconic_variable_price_format( $price, $product ) {

    $prefix = sprintf('%s: ', __('From', 'iconic'));

    $min_price_regular = $product->get_variation_regular_price( 'min', true );
    $min_price_sale    = $product->get_variation_sale_price( 'min', true );
    $max_price = $product->get_variation_price( 'max', true );
    $min_price = $product->get_variation_price( 'min', true );

    $price = ( $min_price_sale == $min_price_regular ) ?
        wc_price( $min_price_regular ) :
        '<del>' . wc_price( $min_price_regular ) . '</del>' . '<ins>' . wc_price( $min_price_sale ) . '</ins>';

    return ( $min_price == $max_price ) ?
        $price :
        sprintf('%s%s', $prefix, $price);

}

add_filter( 'woocommerce_variable_sale_price_html', 'iconic_variable_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'iconic_variable_price_format', 10, 2 );

You can easily change the ‘From:’ prefix by modifying the $prefix variable in the function. To remove it completely, just change it to $prefix = '';

You’ll now have one singular price displaying on your product, category and shop pages. If you have any difficulty implementing this code, just leave us a comment.

Want to take this a step further?

Try the 14-day free trial of WooCommerce Show Single Variations and display product variations in your WooCommerce shop pages as though they were simple products.

Get Free Trial
Avatar

James is the founder of Iconic and an experienced WooCommerce plugin developer. He has been featured on numerous WordPress publications.

He is a keen photographer and currently shoots using his favourite mirrorless camera, a Fuji X-T20.

94 Responses

Avatar

Added the code using Code Snippet and nothing happened. I still see just $1 - $100, instead of From: $1

Thanks

Avatar

Hi! I am trying to display both price variations with separate titles on separate lines (like this https://online.berklee.edu/courses) Is there a way to modify this code to accomplish that? Thank you!

Avatar

I used this code, it works just fine without multi-currency plugin but when multi-currency plugin is enabled, it just screws up the prices. Any suggestions on how to fix that?

Avatar
Emmanuel D 1 year ago

Hi,

I used your code for my site, it works perfect but I'm wondering if there is a way to make the "From $" change to the variation price?, like I need the price from to change to whatever variation price is.

Thanks

Avatar

Hi there i have a bit different problem , at start i wanted to remove the price range , i found the code here ( thanks btw) and it works fine but the problem is when i change to a variation that has a different size it still shows the min price . Any suggestion how to show it's variation's price (as single not in range) here is the code i am using :

function iconic_variable_price_format( $price, $product ) {

$prefix = '';

$min_price_regular = $product->get_variation_regular_price( 'min', true );
$min_price_sale = $product->get_variation_sale_price( 'min', true );
$max_price = $product->get_variation_price( 'max', true );
$min_price = $product->get_variation_price( 'min', true );

$price = ( $min_price_sale == $min_price_regular ) ?
wc_price( $min_price_regular ) :
'' . wc_price( $min_price_regular ) . '' . '' . wc_price( $min_price_sale ) . '';

return ( $min_price == $max_price ) ?
$price :
sprintf('%s%s', $prefix, $price);

}

add_filter( 'woocommerce_variable_sale_price_html', 'iconic_variable_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'iconic_variable_price_format', 10, 2 );

Avatar
Eleonora 1 year ago

Hi,
Thanks for the solution: I used the second one.

I have a little issue when I update a product prices...
The disconted price it's ok, but the regular price doesn't update.

So I have old regular price new discounted price.

How can I solve this?
Thank you very much, regards

Avatar
Palance 1 year ago

Wanted to say thank you for creating/publishing this code snippet. My client asked me how to not show the full range of their Product Variation, i.e. $100 - $1,000, rather wanted "Starting at $100". Per WooCommerce's Support, you cannot do this natively w/in WooCommerce, and they pointed me to your code snippet. Worked perfectly! Thank you.

Avatar
Jhimross Olinares 1 year ago

Awesome! We are glad to hear that it helps :)))

Avatar
Madalina 1 year ago

Hi
This works great on my products with variations.
But it does not work when I put in sale prices, then I have both regular prices and sale prices.
Can you advice on how to solve this or maybe display the two prices (regular price and sale price) on separate lines?

Avatar
Madalina 1 year ago

I have tried the following two functions, but no change:

1 – To remove regular price range
if ( $prod_price !== $regular_price ) {
$prod_price = ‘ ’ . $prod_price . $v_product->get_price_suffix() . ‘’;
}

2 – To show Regular and Sale price in separate lines
if ( $prod_price !== $regular_price ) {
$prod_price = ‘’.$regular_price.$v_product->get_price_suffix() . ‘ ’ .
$prod_price . $v_product->get_price_suffix() . ‘’;
}

Any ideas?

Avatar

hello everyone
after 3 days reading all articles about woocommerce customize CSS code I can’t find any solution to move price label
I need to place the price label under the add to card bottom, I’m using wpbakery page builder beside woocommerce plugging, add to card element added to my page but I can’t move the price place or any other thing like font size, space between the bottoms
I changed the add to cart button text to (Kapıda Ödeme) by the way
please help me to resolve this problem

The page I need help with: https://www.swellperuk.com/?us_portfolio=s-well-monofilament-medikal-peruk-dogal-renk-onu-dantel-peruk

Avatar
Jhimross Olinares 1 year ago

I think what you need here is a Custom CSS that will change the order of your elements in your product page like the order:- https://www.w3schools.com/cssref/css3_pr_order.asp

Since you also mentioned that most of your layout is using your page builder WPBakery, I would suggest contacting their support which I believe can really help you about this.

Avatar

Hi
Thank you for this code snippet. It works very well. But I use a wholesale pro suite plugin and when I display the Regular Price From below the wholesale price, the format does not work as expected. What would I need to change or add in the code snippet to make the price format look like this for variable products:
From: $9.99 (wholesale price)
Regular Price From: $13.99 (regular price)

Thanks
Lyse

Avatar

Hi and thanks for your post.

One of my variation's price is $0 and obviously the result is "From: $0".
Do you how can I start with the next variation's price (more than zero)?

Please let me know and thank you very much.

Avatar
krishna Ale 2 years ago

Very helpful but I am back with one more query,

How can I replace " - " to " / " on variable price range?

$40-$80 to $40 / $80

Thank you in advance!

Avatar
krishna Ale 2 years ago

I tried this but didn't work for me, the icon is changed but shows same price twice for single variant products.

function iconic_variable_price_format( $price, $product ) {

$prefix = sprintf('%s ', __('', 'iconic'));

$min_price_regular = $product->get_variation_regular_price( 'min', true );
$max_price_regular = $product->get_variation_regular_price( 'max', true );
$max_price = $product->get_variation_price( 'max', true );
$min_price = $product->get_variation_price( 'min', true );

$price = wc_price( $min_price_regular ) . ' / ' . wc_price( $max_price_regular ) . '';

return ( $min_price == $max_price ) ?
$price:
sprintf('%s%s', $prefix, $price);

}

add_filter( 'woocommerce_variable_price_html', 'iconic_variable_price_format', 10, 2 );

Avatar
James Kemp admin 2 years ago

Hey, this is actually a lot less complicated. Give this a go:

/**
 * Format price range.
 *
 * @param string $price
 * @param $from
 * @param $to
 *
 * @return string
 */
function iconic_format_price_range( $price, $from, $to ) {
	return str_replace( '–', '/', $price );
}

add_filter( 'woocommerce_format_price_range', 'iconic_format_price_range', 10, 3 );

Note: '–' should be '&ndash ;' (without the space after dash), but the comments system is converting it to HTML.

Avatar
Emmanuel D 2 years ago

Hi,

It works amazing, I want to know how can I hace the size of the variation price and as well mine is below the short description, and I want it above the "available" right below the text, does someone know how to do it and also modify the size just of the "from"?

Avatar

Firstly thanks for sharing this tutorial. I want to change the product price on display for which I use this code and created a function name change_product_price_display but I don't know where I am doing wrong and getting unknown error. I have seen this code here https://www.cloudways.com/blog/change-woocommerce-price-display/ and according to people it's working but not working for me. Can you help me please?

function change_product_price_display( $price ) {
$price .= ' At Each Item Product';
return $price;
}
add_filter( 'woocommerce_get_price_html', 'change_product_price_display' );
add_filter( 'woocommerce_cart_item_price', 'change_product_price_display' );

Avatar
Sam Bean 2 years ago

Is there a way to display the actual price of variations in the shop page? Rather than showing the low to high price ($9.00 - $23.00)

Here is a mock-up - https://www.dropbox.com/s/wdizknpehdrstmp/pumpkin%20Capture5.png?dl=0

Avatar

hi
Thanks for this,I want show custom price select in variable section rather than min price. how can edit code?

Avatar

In a recent update it stopped showing in some products... any idea? I haven't been able to find a reason why it shows in some and not in others.

Avatar

So far I found a fix... but it means going through all the products... if I go into the variations and make a change (anything at all) and save them, something gets updated that makes it work again.

I dont know if there was a recent change on a WooCommerce function os data structure related to variations but this is makeing it work again.

Avatar

Hi !

I would like to display range price instead of regular price only if range price is available.

Any idea ?

Thanks

Avatar

yes, its by default available in woocommerce. if you add Single Product it will show regular price and if you add as Variable Product it will show price as price range

Avatar

Thanks for this, this works great - is there any way to remove the colon after the 'from'.

I would prefer it was just 'From £123', rather than 'From: £123'.

Avatar
James Kemp admin 2 years ago

Hey Shaq, you can just change line 9 from:

$prefix = sprintf('%s: ', __('From', 'iconic'));

To:

$prefix = sprintf('%s ', __('From', 'iconic'));

Hope this helps!

Avatar

not works if I use dynamic pricing

Avatar
James Kemp admin 2 years ago

Yes, you might need some additional code to get it working with a plugin like that. i'd assume they have their own way of doing it.

Avatar

Awsome mate, finally got a solutio for this. I've spend hours looking at various plugins and themes hoping to find one which will do the trick. Turns out I just needed the little snippet of code you provided above!

Avatar

Thanks, it worked but the suffix "+GST" disappears. Here in Australia we have GST tax, and on our store the prices are given GST exclusive, so we put "+GST" on the end of price. Your script works, but causes the suffix to disappear, can you help a noob out with how to make sure the suffix stays in place after the price?

Avatar
Will Shearer 3 years ago

Hi, a bit late to the party, but can this be done for a single category? say you have a category of variable pricing where you want "price per person" (let's call the category "Tours") then have a category of "gift cards" or something else inanimate with a $prefix of "Prices From"?

Avatar

Nice snippet man. Thanks for posting.

One note (Flatsome): if a variation is on sale the original price of the variable displays crossed out. Not necessarily a bad thing I guess.

Also for wpml types you can translate 'from' here rather than in the translator.

if(ICL_LANGUAGE_CODE=='en') {

$prefix = sprintf('%s: ', __('From', 'iconic'));

}elseif(ICL_LANGUAGE_CODE=='de'){

$prefix = sprintf('%s: ', __('ab', 'iconic'));
}

Avatar

Is there a way to show the Highest Price instead of the Range? For example a restaurant that sells half sizes as an option but wants the Full size to be shown first?

Avatar
James Kemp admin 3 years ago

Yes, just modify the code to use max in place of min

Avatar

Hi
i want show varialbe price like this From $12.99 To $13

how to show this item?

Avatar

Hi there. Thanks for the code. Works well on my variable product. Is it possible to achieve this "From:" pricing for Grouped product that has simple products linked to it?

Avatar

Hello
thank you
I'm looking for a way to show the price of my variable products " from $ - to $ " show, not as a straight line, but I do not know what to do.
Thanks for advising me.
Thanks...

Avatar

I just want to add "from" and "to" with before the variable price product in this way: from $ - to $ for example : from 20$ to 30$

Avatar
dzulfriday 3 years ago

Most of my product only has 2 variants. What if I don't want to show it differently? Instead of show it like "From: XXX", I want to show it like this:
- Variant A: $XX.XX
- Variant B: $XX.XX

I don't want my customers need to use the variant drop down first just to know the price.

Avatar
Lorraine Glanz 3 years ago

I'm battling to customize my WooCommerce site. I struggled with the issue of only showing the lowest price on variable products.
The plugins and other posts have the irritating "from" text before the price, which is just not acceptable to me.
Your post was the first one I came across that dealt with this "from" issue.
Thank you very much. It worked for me.

Avatar
James Kemp admin 3 years ago

Glad to hear it - any other issues just let me know!

Avatar
Igor Dovečer 3 years ago

Is it possible to update this plugin to only show min prices of available variable products (if variable product stock quantity is >0, otherwise ignore it).
Tnx.

Avatar
Bence Takács 3 years ago

Displayed correctly on Product Category Pages but on Product Page (if it has variations and it is on-sale) one can see two different prices being displayed: one for the selected variant and one which is the output of the script above.

I can fix that with the following css hack:

div.product-type-variable > div.entry-summary > p.price {
display: none;
}

Avatar
James Kemp admin 3 years ago

Yes, but once a variation is selected the price is no longer "From"?

Avatar
Bence Takács 3 years ago

That's right: now on the Product Category page I can see the "From:" and inside the product I can see the price only for the selected variation (I set defaults for not having an 'empty' price field). So everything is nice and dandy :-)

(You can see the two-price displayed here: https://businessbloomer.com... one below the "Product Title" and one below "woocommerce_single_variation" field. I disabled the first one with the css)

I'm wondering how could I achieve the same goal with modification only in php: is there a way to not display the price under 'product title' in case we are on a 'product page' and product type is 'variable'...

Avatar
Thomas Strunk 3 years ago

Wow that worked like a charm! Thank you so much! Do you know how to remove the cents part? Like to have it show only $45 instead of $45.00 ? All of the prices are an even dollar amount without any $44.99 cents or anything like that on the site, so it does not look as clean with the .00 after all of them ;-) They where not on there before so I am guessing there is some part of that code I need to tweak to not have it add that back on there ;-) If you can let me know what part to change or add that would be AWESOME! Thank you so much!

Avatar

This code works great! One thing I'm trying to modify that I just cant quite get is I would like this to only happen on the shop and category pages. Then display regularly with the min and max on the single product pages. Is there a simple way to make that happen within the function?

Thanks!

Avatar

Hello,

awesome . But i have a question. On my website also the price per gramm is shown. Like: 12,99 Euro-13,99Euro / kg
How can i edit this so it is also shown like: from 12,99 /kg?

you have a idea?

Thank you very much

Avatar
Chris Wingfield 4 years ago

Is this still working for people ? As I've added it and I still have the same issue. Many Thanks is advance. PS Flatsome Theme.

Avatar
James Kemp admin 4 years ago

Hey Chris,

I just tested with Flatsome 3 and it still appears to be working. Have you tried disabling other plugins to see if there's a conflict somewhere?

Avatar
Gudmundur Orn Isfeld 4 years ago

Hey thanks for the snippet! It is the only one that works with currency converter that I have tried!
My price is showing with a line crossed over it, do you have any idea how to fix that or what it might be?
Thanks again!!!

Avatar
Barry Johnson 4 years ago

I added this and it blew up my site. WHERE in the functions.php should it be entered please?

Avatar
James Kemp admin 4 years ago

Hey Barry, I just updated the post to suggest using the Code Snippets plugin. Just create a snippet, and click "Save and Activate". You can also set it to show on the frontend only. https://en-gb.wordpress.org...

Avatar
Barry Johnson 4 years ago

great. I just sent you a message...do you guys do custom/hourly project work?

Avatar
Capucine Roussel 4 years ago

Hello!
I wanted to know how to make this work with your plugin Show Single Variations. At the moment, on the category page the "From : xxx" appears under the original variable product but under the variations, the price of that specific variation appears. I would like the same "From : xxx" to appear under each variation. Can you help?
Thanks!
Just updating my comment as it seems to be pushed down the page by older posts... Any chance you could look into this? Thanks

Avatar

Thank you for the snippet, works just fine.
Could you please advice on how to make prefix to be the same style with the digits? Prefix now is outside that span class.

Avatar
James Kemp admin 4 years ago

Hey, you'd be best off wrapping the output in another container, as it'll be hard to reliably get it into the price span.

Avatar

Hi,
Thank you for the snippet. Is there a way to modify it s it could
also show price without tax? I have set it up in Woocommerce >>
Settings >> Taxes >> Suffixes and for the simple products it
shows well but for the price in this snippet unfortunately not. Do you have some handy idea how to modify your original snippet to show this suffix?
Thanks,
J.

Avatar
Markus Westerberg 3 years ago

Hi. I'd also like to know how to fix this.

Avatar

Hi, I have a similar issue, please see if you can help:
I have to display the minimum price with and without tax (simultaneously).
On single products, all works well, and shows both (I'm using the sufix that we can configure in Woocommerce settings).
But, on variable products, it only shows both after the user selects a variation from the dropdown menu.
Before the user makes a selection, only one of the prices (in my case without tax) is shown: it appears "From [minimum price], just as I wanted, but, only with the price without tax, and I need it to be like this:
"From:
[minimum price without tax] (exc tax)
[minimum price with tax] (inc tax)"
Can someone help to know how to adapt the code above or any similar one to work in this case? Thank you!

Avatar
Concerned Citizen 4 years ago

Thanks for this. Needed the opposite numbers (max vs min) and this did the trick.

Avatar
Narelle Eustace Holly 4 years ago

Using woocommerce currency switcher, the pricing shows 0.00 when using another currency other than the base currency???

Anyway of fixing this???

Avatar

Works just fine with Aelia Currency Switcher

Avatar
Mireille 4 years ago

Is it possible to make the "from" smaller than the price and a different color?

Avatar
James Kemp admin 4 years ago

Definitely! You could do it with inline CSS, or better yet, add a class to the from text:

$prefix = sprintf('%s: ', __('From', 'iconic'));

then use CSS like so:

.iconic-from-label {
font-size: 12px;
color: #ccc;
}

Avatar
Cameron Manesh 4 years ago

How would I go about adding a class to the from text? I'm a bit of a noob when it comes to this kind of stuff.

Avatar
Mireille 4 years ago

How exactly do I add a class to the from text? I'm always scared to add stuff to the function.php myself because I don't want to crash my site...

Avatar
James Kemp admin 3 years ago

Sorry all, it stripped out the span I added - please see the amended version above.

Avatar
MELISSA SMITH 2 years ago

I modified mine to "Starting at" rather than "From" and it worked great, but I do need the color changed to match that of my prices. I would like to know how to add a class? There isn't a way to just include color change in the initial code? My color is #bf0101 and I do not need font size changed.

Avatar

This is exactly what I was looking for, Thanks! But when added the code in my child themes function.php the price looks like this: "From: 116,118kr0kr". Any suggestions?

Avatar
James Kemp admin 4 years ago

Wow... that doesn't look right. What currency are you using?

Avatar

I am using SEK (Swedish kr). I think I found out what the problem was. For some reason you can not use a variable product with the same price.

Avatar

Maybe you copied the code from IE Edge. Open this site with Firefox to copy the code.

Avatar
James Kemp admin 4 years ago

Ah, is that proving to be an issue? Perhaps it doesn't encode the quotes correctly?

Avatar

I added this code and my whole website is blank now.

It's certainly done!

Avatar
James Kemp admin 4 years ago

Hey, are you on Woo 3.0.*?

Avatar
Phone Case 4 years ago

I am on Woo 3.0, and, while the rest of my site is fine, the prices on the product page are certainly blank now! Suggestions, please?

Leave a Reply

Your email address will not be published. Required fields are marked *