Posted on

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        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @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 code?

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 delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

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?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

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

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

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

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

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

  4. Not able to get this code via css

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

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

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

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

  8. 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're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.