Sale prices are the most used marketing technique in the world. Its no secret that a good discount on a product can push the customer over the edge of buying the product they wanted to have for a long time, or make the decision easier when they see the discounted product coming by.

In WooCommerce the sale prices are communicated nicely on the product overview and detail pages, but nowhere in the cart or checkout! In this post I’ll show you how you can show the sale prices in the cart and checkout.

Showing sale prices in the cart

With the code snippet below it will show the product price as it does on the product detail page:

After adding the above code snippet your cart should look something like this:

It looks good and nicely emphasises the sale of the items.

One catch; this does not take in account the tax setting ‘Display prices during cart and checkout’, it will instead take the same value as the ‘Display prices in the shop’ setting to show prices including or excluding taxes.
If this is essential for your store you’d need to further customize the code snippet to represent the correct values.

Showing sale prices in the checkout

For the checkout a separate code snippet is needed, I’ve made this code snippet a bit more expanded and it does follow the settings of tax display. Since the checkout by default doesn’t show product prices at all, only the totals, we just integrate it with that and show the old total price, and the new one:

The code snippet is quite a bit longer then the one for the cart, but its doing a lot too. This will in fact take in account the tax settings for the store (remember the catch I mentioned before). This will look like this in the checkout area:

A little side effect of this code snippet is that it will also modify the total price in the cart, since they share the same filter name:

 

If this is undesired it can be disabled by adding a additional check to the last code snippet, right after the function start

if ( is_cart() ) { return $subtotal; }

 

Pro conversion tip! Running a store wide (temporary) sale? Remember your customer this is sale price they’re seeing is only available for a small window. This will create a sense of urgency and fear of missing out, making them pull the trigger on the purchases faster.

A message like this can be added dynamically through the Advanced Messages plugin.

Bonus: Show the savings in the totals

Okay, just one last thing you can do.. Showing the total savings at the totals table would be perfect. Nobody likes to do the math while it is interesting to know how much you’re saving in total.

It will look something like this in the end:

I hope you found this post useful. If you found yourself using one or multiple code snippets I’d appreciate if you can leave a comment below 🙂

Jeroen Sormani

I'm a professional WordPress plugin developer on a mission to create the best plugins for my clients. I'm specialised in developing general WordPress, WooCommerce and Easy Digital Downloads plugins.

Interested in talking about a WordPress project? Get in touch!

Follow me on Twitter

13 thoughts on “Showing sale prices in the cart – in WooCommerce

amy December 7, 2017 at 10:37 am

hello, where do i put these codes at?
thanks!

Jeroen Sormani April 23, 2018 at 8:33 am

Hi Amy,

I’ve written a post here that elaborates how you can add code snippets to your site: https://aceplugins.com/how-to-add-a-code-snippet/

Cheers,
Jeroen

Daniel February 17, 2018 at 2:00 am

Is there any way to place at “Subtotal” too? In the cart sidebar. Just in the “Subtotal”, not the “Total”.

Great code, thanks.

Phil April 3, 2018 at 3:01 am

Thanks for this! I’m wondering if it’s possible to also add this to the order confirmation email?
Thanks.

Philip May 2, 2018 at 11:41 pm

Great 😀 only the checkout scripts results in a PHP error on line 40 somehow..

Julien June 9, 2018 at 2:37 pm

Amazing code, thank you for sharing Jeroen!

Would you maybe wanna share how to make the sale prices that are not crossed a little bigger then the old price that is crossed or maybe with a extra space between the two prices?

Or maybe show the css mark where to change it in css, I tryed to look up the title to change it in custom css but i only find it all hooked up togheter so if i make 1 bigger all goes bigger 🙂

Butt either way thank you very much really appreaciate your blogs xD

Jeroen Sormani June 11, 2018 at 8:33 am

Hi Julien,

You should be able to target the sale prices only with the .product-price ins CSS selector to make them bigger 😉

Julien June 11, 2018 at 1:23 pm

Thank you Jeroen, you are very helpful! I will directly give it a try!

I’m also trying to figure out how to get a space between the 2 prices so they are not so close on each other but i keep trying, maybe with this .product-price code i’ll get that done too instead of looking into the .php coding of it, i’m already happy with the fact you posted these codes here to help us improve our site and sales xD

Have a great day! Julien

Jeroen Sormani June 11, 2018 at 7:48 pm

There should be a whitespace there by default, this is declared in the `wc_format_sale_price()` function. You can also give the selector some margin to create some additional space.

Julien June 12, 2018 at 3:35 am

I wish i was as good in coding as you are :p But thank you for your kindness in helping! 🙂

Diego September 4, 2018 at 5:44 pm

Excelent!
I used the “YOUR SAVINGS” snippet and it works great.
But i began using the plugin “Woocommece Dynamic Pricing” to give discounts to bulk buys and this snippet doesn’t account for it, it just calculates the Savings from the regular Woocommerce “Sale Price”.
Any ideas on a little upgrade?
Thanks again for the awesome plugins and code snippets, I use your awesome “Advanced Product Labels” plugins too.

Diego September 4, 2018 at 6:45 pm

I posted a Reply earlier today saying it doesn’t work with Dynamic Pricing Plugin, but you just need to change “get_sale_price()” to “get_price()” since that is the final Product price in the cart after the Plugin does it’s calculations, worked like a charm.
I hope i’m not doing something wrong!
Thanks again!!!

Ahmet November 15, 2018 at 8:57 am

Thank you for great snippets Jeroen. I made a product price is free ( normal price: $189 and discounted price is “0”. ) and i directly copy & pasted in functions.php previously checkout page’s that product price displayed “0” but after that code displaying old price not such as your screenshot. By the way total price was true.
Cpuld you please help me
Thnx

Leave a Reply