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