Display Discount Percentage on Woocommerce product image

WooCommerce is a popular e-commerce platform for WordPress users. If you are running a WooCommerce store, you might have noticed that WooCommerce displays a “Sale!” badge on products that are on sale. This badge is automatically generated and displayed in the product image. However, it does not display the discount percentage by default. In this article, we will show you how to display the discount percentage in the WooCommerce product image sale badge without using a plugin.

Why should display discount percentage?

Displaying discount percentage on WooCommerce product images can greatly impact the sales and conversion rates of an online store. This feature is particularly useful for businesses that are looking to incentivize customers to purchase their products by providing them with a clear and concise understanding of the value they’re receiving.

• Increased Trust: When customers see the discount percentage displayed on product images, it builds trust in the brand and the products being offered. This helps to establish credibility with potential customers and encourages them to make a purchase.
• Urgency: Displaying discount percentages on product images creates a sense of urgency, encouraging customers to act quickly to take advantage of the offer before it expires. This can lead to an increase in sales as customers are more likely to make a purchase when they know that a deal won’t be available for much longer.
• Better Comparison: When shopping for products online, customers are often comparing prices and discounts between different stores and products. Having discount percentages displayed on product images makes it easier for customers to compare prices and make informed purchasing decisions.
• Improved User Experience: By providing customers with clear and concise information about discounts on product images, businesses can enhance the overall user experience of their online store. This leads to a more satisfied customer base, which can result in repeat business and positive reviews.
• Increased Visibility: Displaying discount percentages on product images can also increase the visibility of a product, attracting more attention from potential customers. This increased visibility can lead to more clicks, views, and ultimately, more sales.

More Articles:
Display Product image at checkout page in woocommerce.
Display Reviews Count next to Star Rating in Woocommerce.
Display Woocommerce Product Reviews outside of Tab.

Video Tutorial [Hindi]

Steps to display discount percentage on product image sale badge.

Please note: Please take a full backup of your website. It is important to use a child theme. If you have not yet created child theme then follow this tutorial to create one.

Step 1: Access Functions.php file.

Go to Appearance > Theme File Editor > Theme Functions (functions.php). Below is the image for your reference.

Step 2: Add Snippet/Code.

Add below code at the end of functions.php file. Then click on Update File.

// Display Woocommerce Discount Percentage on the products image
add_filter( 'woocommerce_sale_flash', 'wpamit_display_percentage_on_product_image', 20, 3 );
function wpamit_display_percentage_on_product_image( $html, $post, $product ) {

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

      $prices = $product->get_variation_prices();

      foreach( $prices['price'] as $key => $price ){
       
          if( $prices['regular_price'][$key] !== $price ){
              
              $percentages[] = round( 100 - ( floatval($prices['sale_price'][$key]) / floatval($prices['regular_price'][$key]) * 100 ) );
          }
      }
      
      $percentage = max($percentages) . '%';

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

      
      $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) ) {
              
              $percentages[] = round(100 - ($sale_price / $regular_price * 100));
          }
      }
    
      $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__( '', 'woocommerce' ) . ' '. $percentage . '</span>';
}

That’s it!

Conclusion

In this article, we have shown you how to display the discount percentage in the WooCommerce product image sale badge without using a plugin. By adding a few lines of code to your functions.php file, you can customize the look of the badge and show your customers exactly how much they are saving on sale products. This is a simple and effective way to improve the customer experience on your WooCommerce store and encourage more sales.