Woocommerce sale flash badges: New, Featured and save percentage

CSS

/* Woocommerce regular Sale badge */

.woocommerce span.onsale {
  left: 0;
  top: -10;
  font-weight: 600 !important;
  min-width: 100px !important;
  text-align: center;
}
.woocommerce ul.products li.product .onsale {
  left: 0;
  font-weight: 600;
  top: -10px;
  min-width: 100px !important;
  text-align: center;
}

/* "New" badge which has class .onsale1 */

.woocommerce span.onsale1 {
  position: absolute;
  background-color: rgba(46,140,97,0.8) !important;
  color: #fff !important;
  padding: 8px 12px;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  line-height: 1;
  font-weight: 600;
  z-index: 9;
  top: 0px;
  left: 0px !important;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  padding-top: 20px;
}
/* "New" badge on archive pages.
Based on your theme you have to adjust how your "New" badge appears on different screen sizes */

@media only screen and (max-width: 600px) {
.woocommerce ul.products li.product .onsale1 {
  top: 5px;
  left: 78% !important;
}
}
@media only screen and (min-width: 601px) and (max-width: 1023px) {
.woocommerce ul.products li.product .onsale1 {
  top: 5px;
  left: 80% !important;
}
}
@media only screen and (min-width: 1024px) {
.woocommerce ul.products li.product .onsale1 {
  top: 5px;
  left: 84% !important;
}
}
/* "New" badge on simple product pages.
Based on your theme you have to adjust how your "New" badge appears on different screen sizes */

@media only screen and (max-width: 600px) {
.woocommerce span.onsale1 {
  top: 5px;
  left: 300px !important;
}
}
@media only screen and (min-width: 601px) and (max-width: 667px) {
.woocommerce span.onsale1 {
  top: 5px;
  left: 410px !important;
}
}
@media only screen and (min-width: 668px) and (max-width: 767px) {
.woocommerce span.onsale1 {
  top: 5px;
  left: 450px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.woocommerce span.onsale1 {
  top: 5px;
  left: 180px !important;
}
}
@media only screen and (min-width: 960px) and (max-width: 1023px) {
.woocommerce span.onsale1 {
  top: 5px;
  left: 260px !important;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1170px) {
.woocommerce span.onsale1 {
  top: 5px;
  left: 300px !important;
}
}
@media only screen and (min-width: 1171px) {
.woocommerce span.onsale1 {
  top: 5px;
  left: 370px !important;
}
}

/* "Featured" badge which has class .onsale2 */

.woocommerce span.onsale2 {
  position: absolute;
  min-width: 100px !important;
  background-color: #ffcc00;
  color: #000;
  padding: 8px 12px;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  z-index: 9;
  text-align: center;
  top: 20px;
  left: 0px;
  background: #ffcc00;
  color: #000;
}
.woocommerce ul.products li.product .onsale2 {
 top: 20px;
 left: 0;
 min-width: 100px !important;
}

PHP

/* Enter this code below to your functions.php file or better yet - use Code snippets plugin for this purpose. 
* Then add some css to your site to style it
 * This snippet adds a two new badges: "New" and "Featured" badge. Also it changes regular "Sale" text to saved percentaege.
 * "New" badge is added to product entry for any product added in the last 30 days.
 * If you want the badge to be a part of the "equal height" content then use 'PHP_INT_MAX' for the
 * priority instead of 20
 *
 */

// This adds "New" badge on your product image

add_action( 'woocommerce_before_single_product_summary', 'new_product_button' , 20);
add_action( 'woocommerce_before_shop_loop_item_title', 'new_product_button' , 20);
		   
	function new_product_button() {
	$postdate      = get_the_time( 'Y-m-d' ); // Post date
	$postdatestamp = strtotime( $postdate );  // Timestamped post date
	$newness       = 30;                      // Newness in days
	if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $postdatestamp ) {
		echo '<span class="onsale1">' . esc_html__( 'New', 'total' ) . '</span>';
	}
}

// This adds "featured" product badge on your product image

function wc_add_featured_product_flash() {
	global $product;

	if ( $product->is_featured() ) {
		echo '<span class="onsale2">Featured</span>';
	}
}
add_action( 'woocommerce_before_shop_loop_item_title', 'wc_add_featured_product_flash', 10 );
add_action( 'woocommerce_before_single_product_summary', 'wc_add_featured_product_flash', 10 );

// Show save percentage instead of "sale" text

add_filter('woocommerce_sale_flash', 'woo_savings_on_sales_flash');

function woo_savings_on_sales_flash()
{
global $post, $product;
	if ( ! $product->is_in_stock() ) return;
	$sale_price = get_post_meta( $product->id, '_price', true);
	$regular_price = get_post_meta( $product->id, '_regular_price', true);
	if (empty($regular_price)){ //then this is a variable product
		$available_variations = $product->get_available_variations();
		$variation_id=$available_variations[0]['variation_id'];
		$variation= new WC_Product_Variation( $variation_id );
		$regular_price = $variation ->regular_price;
		$sale_price = $variation ->sale_price;
	}
	$savings = ceil(( ($regular_price - $sale_price) / $regular_price ) * 100);
	$sale_flash = '<span class="onsale"> - ' . $savings . '%</span>';
	return $sale_flash;
}