Display customer savings

- [Instructor] If you regularly have sales on your site, one of the things that can really help users, is to show them the amount that they're saving with the sale. Instead of showing a sale price of $12, with a crossed out 16, also show them that they're saving $4. Before I jump into the code, I want to share some pricing psychology. When you're displaying the amount saved, you want to display what appears to be the bigger number, and to do this, you want to use the rule of 100. The rule of 100 says that anything under $100 should be displayed with a percentage off.

Anything above $100, and you should display the value discount. So, for a $16 supplement, you should say 25% off instead of $4 off. Now if you're selling $5,000 TV's, you want to say $1,250 off. It sounds really impressive. Since our products are less than $100, we're gonna display them in percentages, but you can easily tweak the code we're about to write to display the absolute value if you want to.

I've opened up the themes functions.php file, and we're gonna start by writing a comment. Display Amount Saved. We're gonna start by adding a filter, followed by the hook name woocommerce_sale_price_html. This is what is rendered when we display the sale price. Then we're gonna write the function that'll modify this: hplussports_sale_price_html. Don't forget to fix your typos. We need to add a priority of 10 here, because we need to tell the next parameters-- Very important, we need to tell WordPress that we need to send two parameters onto the next function.

The next function is going to be function, copy this, paste it there, and we need to pass in both of those parameters. The first parameter is html. This is what's going to be rendered in the browser. The second parameter is going to be product, and this is information about the product that we can use to help us calculate the sale price. Before we write anything, we need to figure out the actual percentage saved. We're gonna calculate that first, and then write the string. We're gonna save that in a variable called $percentage.

And we're gonna start this by using the php function called round, which will round this to the nearest dollar. We wanna say 25%. We don't wanna say saved 25.4%. After round, we're gonna add a couple parentheses here, 'cause we're gonna need to do a little bit of math. We're gonna start with $product regular_price. What I'm doing here is I'm taking the value, the parameter that we've passed in here: product, and I'm using an attribute of that variable right here. The regular price that was passed along with it.

And I'm going to subtract that from $product, I believe it's sale_price, and then we're gonna close this parenthesis right here. Now, we're going to divide all of this by the product regular price. $Product regular_price. That'll get us something like .25. The last thing we need to do, is multiply this by 100 so that we get 25. Now that we've got the actual number, we can write what the sale price is going to look like.

We're gonna start with the existing sale price. Return $html concatenated with sprintf. Sprintf is fancy functionality that helps us write a string with a placeholder. That way, if we ever need to, the string can be translated, and then the number can be dropped in after the translation. That's what sprintf does. Open parentheses. And then we're going to use the regular WordPress translation functions like we've used earlier. Open the string, we wanna leave a space here so it comes one space after the other sales price functionality, Save percent sign s, and the percent sign s is the placeholder.

And then after this, we're gonna type woocommerce, which is used for translation. Now that we have the words written out, we need the actual value that'll be put into that placeholder spot, which we've already calculated above: $percentage. And we just need to concatenate it with the actual percentage sign. End that with a semicolon, save the file, and go back to the front end. Let's refresh the page, and now it says "USD $12.00 Save 25%" and this will help convince our users that this is a very good deal.