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.
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.
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.