WooCommerce: Display Prices as “Was $$$ – Now $$$ – Save $$$”

Many retailers use this price tag strategy quite successfully. And displaying the amount of savings can increase your ecommerce store conversion rate as well πŸ™‚

So, turning simple product default pricing from “$30 $20″ to “Was $30 – Now $20 – Save $10” is quite easy. With a little CSS you can also style the display and customize it according to your brand guidelines!

WooCommerce: changing the display of single product pricing

Part 1 – PHP Snippet: Display Prices as “Was, Now, Save” for Simple Products on Sale

 * @snippet       WAS NOW SAVE Price Format
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=73551
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/

add_filter( 'woocommerce_get_price_html', 'bbloomer_simple_product_price_format', 10, 2 );

function bbloomer_simple_product_price_format( $price, $product ) {
	if ( $product->is_on_sale() && $product->is_type('simple') ) {
		$price = sprintf( __( '<div class="was-now-save"><div class="was">WAS %1$s</div><div class="now">NOW %2$s</div><div class="save">SAVE %3$s</div></div>', 'woocommerce' ), wc_price ( $product->get_regular_price() ), wc_price( $product->get_sale_price() ), wc_price( $product->get_regular_price() - $product->get_sale_price() )  );		
	return $price;

Part 2 – CSS Snippet: Display Prices as “Was, Now, Save” for Simple Products on Sale

.was, .now, .save {
width: 50%;
padding: 0.5em 1em;
text-align: center;

.was {
background: #636363;
color: white;

.now {
background: #acacac;
color: black;

.save {
background: #eee;
color: red;
font-size: 120%;

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials. You can start learning how to customize WooCommerce without unnecessary plugins. Watch me code and learn by example!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

23 thoughts on “WooCommerce: Display Prices as “Was $$$ – Now $$$ – Save $$$”

  1. How can I add the percentage with save price

    1. Hi Brown, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Ainda funciona perfeitamente!

    Muito obrigado por compartilhar.

    Deus abençoe!

    1. Cool!

  3. Hi,
    i tried this code and it works very well but i am using wholesale plugin and when users log in, it is not showing correct price.
    How can I make sure that the filter is not used, when users are logged in e.g. as Wholesale user. Thank you

    1. This snippet will probably need tweaking to make it compatible with your plugin, sorry

  4. Nice code Rodolfo, I note that when using the recently viewed widgets, this pricing grid also appears in the side column which is not ideal.

    Just a heads up…Possible to point me in the right direction form the ‘hook’ to mod for the widget so I can exclude conditionally?

    I’ll wite the code, just don’t know what to look for.

    Thanks for all the work you do

    1. Hello Simon πŸ™‚ I guess the “woocommerce_get_price_html” filter runs everywhere. So you need to find a way to exclude the template “content-widget-product.php” within the add_filter function. Hope this helps πŸ™‚

  5. Great!!! The code works perfect but I need that to work for variable products how can I achieve that please help! Thanks!

    1. Or another solution that works for me is just to display save price below the original woo price for simple and variable products. That would be amazing. Thanks!

      1. Hey Todor, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  6. Hi Rodolfo,
    Thanks for this nice code.
    A have a question:
    Can you help me if I would like to use only on single product page?
    Is it possible to disable on all other place?
    Thanks, Attila

  7. Not able to get this code via css

    1. Hey Jamaica, not sure I understand properly – try explain this issue again πŸ™‚

  8. Hi Rodolfo,

    Always a great pleasure to read your blog items. I have a simple question, how do you translate texts ( when a shop is multisite language) with these snippets? I have referred to this url: https://businessbloomer.com/translate-single-string-woocommerce-wordpress/, but how would you do this for the snippet in this item?



  9. Hi, great tutorial, what about variable products? I tried changing it to variable but was then displayed value of 0.00

    1. Hey Matt, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  10. Hello Rodolfo,
    Used it on my website
    Regards Leo Jager

  11. A much better method that the one I wrote. I parsed the $price html with strstr() and preg_match_all() to get the data and then created a new string. It is probably more efficient to call the $product member functions like you did.

Questions? Feedback? Support? Leave your Comment Now!

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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