Displaying prices in a “Was – Now – Save” format on your WooCommerce store can be an effective marketing tool, especially during sales or promotions. This format helps highlight the savings that customers can achieve by purchasing now, potentially boosting conversion rates. In this guide, we’ll show you how to implement this pricing display using custom code in your theme’s functions.php file, so you don’t need to rely on any additional plugins.
Before you start coding, it’s recommended to use a child theme to ensure your changes remain intact through future theme updates. You can create one using our free WordPress child theme generator.
Step 1: Calculate and Display the “Was – Now – Save” Pricing
First, we need to add a function that calculates the original price, the current sale price, and the amount saved. This function will then modify the price display on your product pages and potentially other listings like categories or search results. Insert the following code into your theme’s functions.php file:
/*
* Snippet: WooCommerce: Display Prices as Was – Now – Save – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1463
* Tested with WooCommerce 10.7.0
* "Display prices as Was Now Save on product pages"
*/
function wcsuccess_display_was_now_save_price_html($price_html, $product) {
if ($product->is_on_sale()) {
$regular_price = wc_get_price_to_display($product, array('price' => $product->get_regular_price()));
$sale_price = wc_get_price_to_display($product, array('price' => $product->get_sale_price()));
$saving_price = wc_price($regular_price - $sale_price);
$price_html = '<p class="price">';
$price_html .= '<span class="was">' . sprintf(__('Was: %s', 'woocommerce'), wc_price($regular_price)) . '</span>';
$price_html .= '<span class="now">' . sprintf(__('Now: %s', 'woocommerce'), wc_price($sale_price)) . '</span>';
$price_html .= '<span class="save">' . sprintf(__('Save: %s', 'woocommerce'), $saving_price) . '</span>';
$price_html .= '</p>';
}
return $price_html;
}
add_filter('woocommerce_get_price_html', 'wcsuccess_display_was_now_save_price_html', 100, 2);
This function intercepts the standard WooCommerce price HTML output and customizes it if the product is on sale. It displays the regular price (Was), the sale price (Now), and calculates the difference to show the savings (Save).
Step 2: Styling the Price Display
To make sure the “Was – Now – Save” prices stand out and are easy to read, add some CSS to style these elements. You can add these styles directly in your child theme’s style.css file or via the WordPress customizer under “Additional CSS”:
.price .was, .price .now, .price .save {
display: block; /* or inline-block, depending on your theme */
font-size: 1.2em;
padding: 5px 0;
}
.price .was {
text-decoration: line-through;
color: #777;
}
.price .now {
color: #C00;
font-weight: bold;
}
.price .save {
color: #4CAF50;
}
These styles differentiate each part of the price display by changing the text style and color, which helps to visually convey the savings message effectively.
Conclusion
By following these steps, you can set up a “Was – Now – Save” price display on your WooCommerce store, enhancing the visual appeal of sales promotions and potentially increasing customer engagement and purchases. This custom code approach keeps your site lightweight by avoiding additional plugins and provides a direct method to control exactly how the price is presented.
Don’t forget, for safe customizations, especially if you are not familiar with coding, use a child theme. Our free WordPress child theme generator is an excellent resource to get you started without much hassle.
Implementing this feature not only improves the shopping experience by making savings clear but also positions your WooCommerce store as a customer-centric site that values transparency in pricing.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
