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 * @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%; }