Customize the Behavior of the WooCommerce Sale-Flash
read more

Customize the Behavior of the WooCommerce Sale-Flash

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.