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' );
function cssigniter_change_variable_price_display( $price ) {
	global $product;

	if ( 'variable' !== $product->get_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

4 comments

  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:

      Hello.
      I have just tested this locally and it appears to be working normally as seen here https://i.imgur.com/4u6g8HL.png
      Could you please double check the code, or delete and re-paste it and see if anything changes?

Leave a Reply

Your email address will not be published.