elements123

Hi Abhinav,

Thank you for your quick reply. Not sure if it’s theme issue, but we are using Astra (Fashion Design) theme. I have deactivated the Maintenance Mode for you to look into it.

We have added this code to reflect percentage discount from original pricing.

// Display the Woocommerce Discount Percentage on the Sale Badge for variable products and single products
add_filter( 'woocommerce_sale_flash', 'display_percentage_on_sale_badge', 20, 3 );
function display_percentage_on_sale_badge( $html, $post, $product ) {

  if( $product->is_type('variable')){
      $percentages = array();

      // This will get all the variation prices and loop throughout them
      $prices = $product->get_variation_prices();

      foreach( $prices['price'] as $key => $price ){
          // Only on sale variations
          if( $prices['regular_price'][$key] !== $price ){
              // Calculate and set in the array the percentage for each variation on sale
              $percentages[] = round( 100 - ( floatval($prices['sale_price'][$key]) / floatval($prices['regular_price'][$key]) * 100 ) );
          }
      }
      // Displays maximum discount value
      $percentage = max($percentages) . '%';

  } elseif( $product->is_type('grouped') ){
      $percentages = array();

       // This will get all the variation prices and loop throughout them
      $children_ids = $product->get_children();

      foreach( $children_ids as $child_id ){
          $child_product = wc_get_product($child_id);

          $regular_price = (float) $child_product->get_regular_price();
          $sale_price    = (float) $child_product->get_sale_price();

          if ( $sale_price != 0 || ! empty($sale_price) ) {
              // Calculate and set in the array the percentage for each child on sale
              $percentages[] = round(100 - ($sale_price / $regular_price * 100));
          }
      }
     // Displays maximum discount value
      $percentage = max($percentages) . '%';

  } else {
      $regular_price = (float) $product->get_regular_price();
      $sale_price    = (float) $product->get_sale_price();

      if ( $sale_price != 0 || ! empty($sale_price) ) {
          $percentage    = round(100 - ($sale_price / $regular_price * 100)) . '%';
      } else {
          return $html;
      }
  }
  return '<span class="onsale">' . esc_html__( 'up to -', 'woocommerce' ) . ' '. $percentage . '</span>'; // If needed then change or remove "up to -" text
}

In my Additional CSS, I have used the following code to style the sales badge:

/* Sales badge style */
.woocommerce span.onsale {
  padding: 1px 6px !important;
	border-radius: 0px !important;
  font-size: 13px !important;
	margin: 235px 195px 0px 0px !important;
}

@media (min-width: 100px) and (max-width: 1024px) {
     .woocommerce span.onsale {
	padding: 1px 3px 0px 0px !important;
	font-size: 8px !important;
    margin: 163px 180px 0px 0px !important;
  }
}

@media (max-width: 479px) {
     .woocommerce span.onsale {
	padding: 1px 3px !important;
	font-size: 8px !important;
    margin: 105px 80px 0px 0px !important;

  }

Please advise if we are doing anything incorrectly. Thank you!

Hi Abhishek, thanks for your help. These codes helped tremendously. Happy new year!

• This reply was modified 5 years, 5 months ago by elements123.

Hi Abhishek,

Thank you for your reply! I have disabled the maintenance mode.

Await for your reply. 🙂