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 article, we’re going to take a look at how we can customize and improve the WooCommerce sale-flash display to show the discount 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.


Add the scripts below to your theme: functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
add_filter( 'woocommerce_sale_flash', 'ask_percentage_sale', 11, 3 ); function ask_percentage_sale( $text, $post, $product ) { $discount = 0; if ( $product->get_type() == 'variable' ) { $available_variations = $product->get_available_variations(); $maximumper = 0; for ($i = 0; $i < count($available_variations); ++$i) { $variation_id=$available_variations[$i]['variation_id']; $variable_product1= new WC_Product_Variation( $variation_id ); $regular_price = $variable_product1->get_regular_price(); $sales_price = $variable_product1->get_sale_price(); if( $sales_price ) { $percentage= round( ( ( $regular_price - $sales_price ) / $regular_price ) * 100 ) ; if ($percentage > $maximumper) { $maximumper = $percentage; } } } $text = '<span class="onsale">' . $maximumper . '%</span>'; } elseif ( $product->get_type() == 'simple' ) { $percentage = round( ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100 ); $text = '<span class="onsale">' . $percentage . '% off</span>'; } return $text; } |
And result

At this point, the customization of the sale-flash is done.
And this our plugin to add WooCommerce Sale Countdown and Sale-Flash in Percentage
Free download here: https://wordpress.org/plugins/flash-sale-countdown-for-woocommerce/