For those who are familiar with WooCommerce, you may also be aware of its sale-flash functionality. This is primarily used to display when an item is on sale.
In this tutorial, we’re going to take a look at how we can customize and improve the WooCommerce sale-flash display to show the effective discount percentage and to change the color of the label based on said percentage.
WooCommerce’s sale-flash is visualized in the archives and single pages for the sale products, i.e. the products that have a Sale Price lower than the Regular Price.
In the current system, users can’t perceive the Dimension—or quality—of the discount.
For example, a 70% discount is more attractive than a 15% one, but they are both displayed by WooCommerce with a simple sale-flash on the product image. In order to solve this problem, we will modify the algorithm that controls the sale-flash so that its content (Sale) will be overwritten by the effective discount percent.