In online stores managed by WooCommerce, we often encounter the challenge of displaying prices correctly for products with variations. By default, WooCommerce shows a price range from the lowest to the highest, which can be confusing for customers. In this article, I’ll present a snippet that allows displaying the minimum price of a variable product with the “From” label.
Problem: Displaying price ranges for variable products
In the default WooCommerce setting, when we have products with different price variations, the store shows a price range, e.g., “20 zł – 50 zł” (please note I’m using Polish currency here). This can be misleading, as customers may not immediately understand which price applies to which variant.
The solution is to display the minimum price with the “From” label, which is clearer.
Below is a PHP snippet that we can add to our WordPress project. This snippet will allow for more intuitive price displays both on product cards and in widgets, such as on the homepage.
add_filter('woocommerce_variable_price_html', 'ezpage_variation_price_from', 10, 2);
function ezpage_variation_price_from($price, $product) {
// Get min/max prices - regular and sale
$min_var_reg_price = $product->get_variation_regular_price('min', true);
$min_var_sale_price = $product->get_variation_sale_price('min', true);
$max_var_reg_price = $product->get_variation_regular_price('max', true);
$max_var_sale_price = $product->get_variation_sale_price('max', true);
// New price, unless all variations have the same prices + add "From"
if (!($min_var_reg_price == $max_var_reg_price && $min_var_sale_price == $max_var_sale_price)) {
if ($min_var_sale_price < $min_var_reg_price) {
$price = sprintf(__('From <del>%1$s</del><ins>%2$s</ins>', 'woocommerce'), wc_price($min_var_reg_price), wc_price($min_var_sale_price));
} else {
$price = sprintf(__('From %1$s', 'woocommerce'), wc_price($min_var_reg_price));
}
}
// Return the price
return $price;
}The result after running the code is as follows. Please note that the screenshots in this article are from the Polish version of the snippet implementation. In your version, if you use the above code, the variable product prices will be displayed starting with “From”.
How the snippet works:
- Adding the filter: The snippet begins by adding the
woocommerce_variable_price_htmlfilter using theadd_filterfunction, which allows modifying the way variable product prices are displayed. - Retrieving minimum and maximum prices: Using the
get_variation_regular_priceandget_variation_sale_pricemethods allows retrieving the minimum and maximum regular and sale prices for product variations. - Conditional price formatting: If the variation prices are not equal, the code formats the price by adding the “From” label. In the case of a sale price, the regular price is crossed out, and the sale price is displayed next to it.
- Returning the modified price: Finally, the function returns the modified
$price, which is displayed on the product card as well as in any other place with variable pricing.
Why use this modification?
The snippet helps in better presenting prices for variable products in WooCommerce, which can improve the clarity of your offerings and make it easier for customers to understand the prices. This is particularly useful in stores offering products in different price configurations, where minimizing confusion related to prices can increase conversions and customer satisfaction.
