WooCommerce Change Variable Product Price Range Display


There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About this Solution

If you wish to customise how variable product prices are displayed on both the Product Archive and Single Product templates, then this guide is for you. In this example, we remove the dash between the two prices and add the test “From” and “to” for a better user experience. This custom text makes it a little clearer that there are product variations which will determine the price of the product.

* Snippet Name:		Customise the price range display of variable products with text
* Snippet Author:	ecommercehints.com
add_filter( 'woocommerce_get_price_html', 'ecommercehints_change_variable_price_range_display', 10, 2 );
function ecommercehints_change_variable_price_range_display( $price, $product ) {

    if( ! $product->is_type('variable') ) return $price;
    $prices = $product->get_variation_prices( true );

    if ( empty( $prices['price'] ) )
    return apply_filters( 'woocommerce_variable_empty_price_html', '', $product );

    $min_price = current( $prices['price'] );
    $max_price = end( $prices['price'] );

    return apply_filters( 'woocommerce_variable_price_html', 'From ' . wc_price( $min_price ) . $product->get_price_suffix() . " to " . $max_price, $product );

Snippet Benefits

  • Customise the view of prices on variable products on the product archive and single product templates.
WooCommerce Conversion Rate Optimisation (CRO) eBook
100 WooCommerce Conversion Rate Optimisation Tips

Leave a Reply

If you are going to write code in the comments, please wrap it between code tags.

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

Other Recent Guides

Subscribe To Emails

Get exclusive WooCommerce tips that I only share with email subscribers

Join hundreds of other subscribers