75
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( __( '', '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; }WAS %1$sNOW %2$sSAVE %3$s
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%; }