In WooCommerce, variable products offer flexibility by allowing customers to choose from different variations such as size, color, or style. However, the default price range display for variable products may not always align with your store’s needs or desired presentation. In this guide, we’ll show you how to customize the price range display to suit your product offerings better and enhance the shopping experience for your customers.
/**
* Snippet Name: Change Variable product type price range display
* Snippet Author: wpsnippets.dev
*/
//Change the price range display for variable product type
function wps_custom_variable_product_price_range( $price, $product ) {
if ( $product->is_type( 'variable' ) ) {
$min_price_regular = $product->get_variation_regular_price( 'min', true );
$max_price_regular = $product->get_variation_regular_price( 'max', true );
$min_price_sale = $product->get_variation_sale_price( 'min', true );
$max_price_sale = $product->get_variation_sale_price( 'max', true );
// Format the price range
$formatted_min_price = wc_price( $min_price_sale ) . $product->get_price_suffix();
$formatted_max_price = wc_price( $max_price_sale ) . $product->get_price_suffix();
$price = sprintf( __( 'From %s to %s', 'woocommerce' ), $formatted_min_price, $formatted_max_price );
}
return $price;
}
add_filter( 'woocommerce_variable_sale_price_html', 'wps_custom_variable_product_price_range', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wps_custom_variable_product_price_range', 10, 2 );
Code Explanation
- This code snippet defines a function custom_variable_product_price_range that modifies the price display for variable products.
- It retrieves the minimum and maximum regular prices and sale prices for variations.
- The prices are formatted using wc_price to include the appropriate currency symbol and suffix.
- The function is hooked into both woocommerce_variable_sale_price_html and woocommerce_variable_price_html filters to modify the sale price and regular price display, respectively.