Woocommerce badges: Sale, New, Featured and save percentage

// 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;
}

.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;
}