Change the price display on variable products

The price display on WooCommerce variable products is by default a range of prices, from the price of the lowest variation to the highest one. In some cases it might be beneficial to the store to not display the higher end of the range because that might deter some customers from visiting the product page. To negate such a possibility we’re going to change the way the price is displayed on variable products.

Install and activate a child theme

The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.

All code below will be placed in our child theme’s functions.php file. If the file is empty the code will go just below the opening <?php tag, otherwise, if it has contents, the code should be placed at the end of the file, before the closing ?> PHP tag if it exists.

Change the price display

Our task today is very simple. We will be replacing the default price range displayed on variable productsAll we need is some code that gets the minimum and maximum prices, makes sure they are different and then replaces them with our chosen output.

add_filter( 'woocommerce_get_price_html', 'cssigniter_change_variable_price_display', 10, 2 );
function cssigniter_change_variable_price_display( $price, $product_obj ) {
global $product;

if ( 'variable' !== $product->get_type() || 'product_variation' === $product_obj->post_type ) {
return $price;

$prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
// Translators: %s is the lowest variation price.
$price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %s', 'your-text-domain' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

return $price;

We hook our code on woocommerce_get_price_html and in line 11 we create the new string which will be presented to our customers. In our case this will be “From:” along with the price. You can easily change it to something else by replacing the 'From: %s' with something else, for example 'Starting at: %s' just make sure you include the argument %s which will be replaced with the price.

The new string of text on the product listing page.

The new string of text in the single product view.

Wrapping up

In today’s tutorial we have easily replaced the default variable price range display with something more tailored to our store. The replacement string can be easily modified and translated if needed. Did you find this guide useful? Let us know in the comments below.

Related Articles


  1. Tom says:

    I get an error code when trying to add this to Theme functions on the child theme.

    1. Nik says:

      Hello Tom.
      Can you tell us what sort of error you are getting?

  2. Becks says:

    This is great – thank you. However when I actually choose my variation at the bottom of the page, just before adding to cart, it displays “From: $x” instead of the actual variation price. How do I fix this? Thanks!

    1. Nik says:

      I have just tested this locally and it appears to be working normally as seen here
      Could you please double check the code, or delete and re-paste it and see if anything changes?

  3. Emilia says:

    It is overwriting the price and when I elect a specific size it still says from XXX instead of displaying the concrete size

    I was thinking to add and if statement and checking if none of options is selected return overwritten price with from else return regular price .

    But I don’t know how to write it
    can you help

    1. Nik says:

      I have modified the code a bit, now it should only affect the main price display below the title on variable products and not the variation price that appears after selecting the preferred product configuration from the drop downs. Give it a shot and let me know if it works for you.

  4. Michael says:

    Hi, snipped worked just amazing, I tryed a couple of plugins that works fine but when I create an elementor template for single products the plugins didn’t work, thats when this code work cause it works with elementor, but since the last woocommerce I’m having an error every time I edit a variable product, this is the error that I received via email:

    There is an error type E_ERROR in line 1876 from file /home/*****/public_html/wp-content/themes/rehub-theme/functions.php. Error Message: Uncaught Error: Call to a member function get_type() on null in /home/****/public_html/wp-content/themes/rehub-theme/functions.php:1876
    Stack trace:
    #0 /home/jmeeuxgf/public_html/wp-includes/class-wp-hook.php(308): cssigniter_change_variable_price_display(‘

    1. Nik says:

      I’m not sure if this is something we can help with, however could you paste the entire error code in a gist so we can take a look?

Leave a Reply

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