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!
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
* @community https://businessbloomer.com/club/
*/
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%;
}
Hi, refering to this article, I wonder whether it is working also in case product’s now price is increased from its was-price.
Hi there, I’m sure a workaround can be found. Right now the snippet assigns the regular price to “WAS” and the sale price to “NOW”.
Thanks for your reply. Is assigning sale price to “Now” available when the price is bigger than the regular price?
Don’t really know, never tried that before!
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
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!
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.
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!
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
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!
Hi, how about now price is up from was price? Is this also workable?
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!
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.
Are your products “simple” and “on sale”?
How can I add the percentage with save price
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!
Ainda funciona perfeitamente!
Muito obrigado por compartilhar.
Deus abençoe!
Cool!
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
This snippet will probably need tweaking to make it compatible with your plugin, sorry
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
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 🙂
Great!!! The code works perfect but I need that to work for variable products how can I achieve that please help! Thanks!
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!
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
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
Hey Attila 🙂 I suggest you take a look at “conditional logic”: https://businessbloomer.com/conditional-logic-woocommerce-tutorial/ and https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Let me know 🙂
Not able to get this code via css
Hey Jamaica, not sure I understand properly – try explain this issue again 🙂
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
Hey Pascal! This should help: https://codex.wordpress.org/I18n_for_WordPress_Developers#Translatable_strings
Hi, great tutorial, what about variable products? I tried changing it to variable but was then displayed value of 0.00
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
Hello Rodolfo,
EXCELLENT SNIPPET AS ALWAYS!
Used it on my website
Regards Leo Jager
Brilliant 🙂
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.
Thanks Damien!