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!

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

/**
 * @snippet       WAS NOW SAVE Price Format
 * @how-to        Get tutoraspire.com FREE
 * @sourcecode    https://tutoraspire.com/?p=73551
 * @author        Tutor Aspire
 * @compatible    WooCommerce 3.5.1
 * @donate $9     https://tutoraspire.com
 */

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

function tutoraspire_simple_product_price_format( $price, $product ) {

if ( $product->is_on_sale() && $product->is_type('simple') ) {
$price = sprintf( __( '
WAS %1$s
NOW %2$s
SAVE %3$s
', '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%;
}