Show sale percentage and savings on WooCommerce products
Sales are a great tool store owners have at their disposal to attract customer interest and sell more products. WooCommerce of course offers the ability to put products on sale by adding a sale price along with the product’s regular price. Then on the front end it makes sure the customer notices on-sale products by adding a sale badge with the word SALE on it and showing the regular price with a strike-through next to the sale price.
What if we were to make this a bit more intriguing to your customers though? How about instead of just a simple word, we display the percentage of the discount on the sale badge, and additionally we display a small text next to the single product price with the amount of money the user saves while the product is on sale? Sounds good? Let’s see how we can achieve it.
Install and activate a child theme
The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.
Replace the SALE banner
If you are using one of our Ignition Framework based themes you can skip this section, this functionality is already built into the framework and can be enabled under Customizer > WooCommerce > Product Catalog > Show the percentage of discount on the sale badge.
Below you will find a screenshot of on sale products as they appear by default on the shop listing page of the Storefront theme.
We start by filtering the output of the WooCommerce’s sale flash banner, with the following function:
In this function we use a regular expression to find and store the opening and closing tags of the sale flash banner, along with its original content. Lines 24 & 25 is where most of the work is done through two helper functions.
The first function returns the percentage of the product’s discount. This could be a range of percentages because grouped and variable products can have different sale percentages per grouped product or variation.
The second function cleans up the percentage values received by the previous function and generates the text that will be placed in the sale flash banner.
In line 27 of cssigniter_woocommerce_sale_flash_percentage above, the banner’s html is rebuilt and returned through the filter.
After we apply our code the sale flash banner will change to reflect the percentage of sale for each product.
Show savings along with the single product’s price
What we are going to do next is display the amount of money a customer saves for products on sale. While the regular and sale prices are visible on the single product view, it might take more than a couple of seconds for the visitor to calculate the exact amount of money saved, which might cause them to gloss over the sale, we don’t want that, so let’s calculate it for them and display it along with the price.
To achieve our goal we will use a slightly modified version of the cssigniter_woocommerce_get_product_sale_percentages, function used above.
Our function here starts by checking the type of the current product. If it encounters a variable or grouped product it calculates and stores the minimum and maximum amounts of money saved and stores it, for the rest of the product types it just calculates the savings from the product sale. The stored values are used to create the string which will be output below the price on the single product view.
This is what our single product view will look after the code is applied.
Potential customers now have immediate access to the amount of money saved on each product.
The generated string offers the saving_total_price class for styling, you can use it to apply any CSS of your choosing to make the text stand out more. You can even replace it with the woocommerce-notice one to take advantage of built in WooCommerce styling for important information, this is how it would look on our case with the woocommerce-notice class applied.
Now this is guaranteed to draw the visitor’s attention.
Similarly a range of savings will be displayed when a user visits a grouped or variable product.
We have successfully replaced the SALE text in the sale flash badge with the sale percentage for each product and we have made immediately available the amount of money saved on on-sale products to our customers with the help of a child theme and a few lines of code. These simple changes will make sales more appealing to your potential customers and could easily help increase your revenue. If you end up using any of these snippets let us know of your experience with them and the impact they had on your store in the comments below.