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 (delete "?>" if you have it there). 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.3.

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent 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.

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

  1. Hi Rodolfo,
    Thanks for all the awesome stuff here… ๐Ÿ™‚
    I am trying to display sale end date, but I also need it to work on variations? How can that be done? I believe this wold be a nice add on to your fine selection of snippets

    Have a great day and thx

    Peter

    1. Hi Peter, 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. Hi , i would like disable on the homepage / shop page, just want to show on the single page product, Really appreciate if someone can help me on this.

    1. Hi Nipun, 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!

  3. Hello
    How can I display sales percentage in the form of bracket exactly beside the You Saved Amount like below:

    You Saved: $$$ ($$%)

    How can I make it possible. What should I add inside the existing code in functions.php

    Please provide me some code which I can directly add manually beside the saved price functions.php code

    Thanks & regards
    Harsh Patel

    1. Hi Harsh, 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!

  4. Hi, how about now price is up from was price? Is this also workable?

    1. Hi KJ, 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!

  5. Snippet didn’t seem to work.

    Added it using the snippets plugin and put the css in my custom css file.

    Maybe this no longer works or doesn’t work with the Shoptimizer theme.

    1. Are your products “simple” and “on sale”?

  6. 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!

  7. Ainda funciona perfeitamente!

    Muito obrigado por compartilhar.

    Deus abenรงoe!

    1. Cool!

  8. 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

  9. 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 ๐Ÿ™‚

  10. 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

  11. 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

  12. Not able to get this code via css

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

  13. 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?

    Regards,

    Pascal

  14. 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

  15. Hello Rodolfo,
    EXCELLENT SNIPPET AS ALWAYS!
    Used it on my website
    Regards Leo Jager

  16. 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 shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published.