WooCommerce Sale Flash - display discounted $ amount per product (works with variations too)

sale-flash.php

<?php
/**
 * WooCommerce Sale Flash 
 * Display money saved on a product, or the discount percentage 
 * Add this file to your theme folder to /woocommerce/loop and into /woocommerce/single (if wanted there too)
 * Konrad Sroka - http://konradsroka.com  
 *
 */

if ( ! defined( 'ABSPATH' ) ) exit; 
global $post, $product;
?>
<?php if ($product->is_on_sale() && $product->product_type == 'variable') : ?>

    <div class="bubble">
      <div class="inside">
        <span>
            <?php
            $available_variations = $product->get_available_variations();
            $maximumper = 0;
            $maxamount = 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 ->regular_price;
                $sales_price = $variable_product1 ->sale_price;
                $damount = $regular_price - $sales_price;
                if ($damount > $maxamount && $damount != $regular_price) {
                    $maxamount = $damount;
                }
                
                // for percentages: 
                $percentage= round((( ( $regular_price - $sales_price ) / $regular_price ) * 100),1) ;
                    if ($percentage > $maximumper && $percentage < 100) {
                        $maximumper = $percentage;
                    }
                }

            }

            echo $price . sprintf( __('&dollar;%s', 'woocommerce' ), $maxamount . ' OFF' );
            // for percentage just show line below, and comment out line above ;) 
            // echo $price . sprintf( __('%s', 'woocommerce' ), '-&nbsp;' . $maximumper . '%' );

            ?>
        </span>
      </div>
    </div><!-- end bubble -->

<?php elseif($product->is_on_sale() && $product->product_type == 'simple') : ?>

    <div class="bubble">
      <div class="inside">
         <span>
             <?php
                // $percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
                // echo $price . sprintf( __('%s', 'woocommerce' ), '-&nbsp;' . $percentage . '%' );

                $regular_price = $product ->regular_price;
                $sales_price = $product ->sale_price;
                $damount = $regular_price - $sales_price;
                // echo $price . sprintf( __('&dollar; %s', 'woocommerce' ), $damount . ' OFF' );
                echo '&dollar; ' . $damount . ' OFF';


              ?>
          </span>
       </div>
    </div><!-- end bubble -->

<?php endif; ?>

woocommerce-sale-flash.css

/* Just add this CSS to your theme's style.css */ 

/* WooCommerce Sale Flash */

.bubble {
 background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
 border: none!important;
 height: auto !important;
 position: relative;
 width: auto !important;
 z-index: 999 !important;
}
.inside {
 position: absolute;
 right: -5px;
 top: -10px;
 z-index: 1;
 overflow: hidden;
 width: 75px; height: 75px;
 text-align: right;
}
.inside span {
 font-size: 11px;
 font-weight: bold;
 color: #FFF;
 text-transform: uppercase;
 text-align: center;
 line-height: 24px;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 width: 100px;
 display: block;
 background: #b02047;
 background: linear-gradient(#b93558 0%, #b02047 100%);
 box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
 position: absolute;
 top: 15px;
 right: -24px;
}
.inside span::before {
 content: "";
 position: absolute; left: 0px; top: 100%;
 z-index: -1;
 border-left: 3px solid #b02047;
 border-right: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #b02047;
}
.inside span::after {
 content: "";
 position: absolute; right: 0px; top: 100%;
 z-index: -1;
 border-left: 3px solid transparent;
 border-right: 3px solid #b02047;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #b02047;
}
.woocommerce ul.products li.product a:hover .bubble,
.woocommerce ul.products li.product a:hover .bubble *,
.woocommerce ul.products li.product a:focus .bubble,
.woocommerce ul.products li.product a:focus .bubble * {
		opacity: 1;
}