Introduction

Are you running a WooCommerce website and looking to boost your sales by offering discounts? While sales can be an effective way to entice customers to make quick purchase decisions, the default WooCommerce sales badge doesn’t show a discount percentage on most themes, making it challenging to convey the value of the discount to potential customers.

However, there is a solution to this problem. In this article, we will learn how to change the WooCommerce Sale Badge to Discount-Percentage, and increase the effectiveness of your sales strategy.

Why Need Child Theme

Child themes are a popular way to modify the appearance and functionality of a WordPress website without modifying the original theme files. They are essentially separate theme that inherits the functionality of the parent theme but allows you to make changes without risking the loss of those changes when the parent theme is updated.

When it comes to modifying the WooCommerce Sale Badge to Discount Percentage, using a child theme is a good option if you already have one installed on your website. This is because any changes made to the functions.php file of the child theme will not be affected when the parent theme is updated.

Using a child theme is a great way to make changes to your website without risking the loss of those changes when the parent theme is updated. If you’re not already using a child theme, it’s worth considering as a way to maintain the integrity of your website while making the changes you need to achieve your goals.

Method 1: Add PHP Code to functions.php

If your WooCommerce site has child themes installed, you can add PHP code to functions.php to add the Discount Percentage Badge. Here’s how:

• Go to Appearance > Theme Editor from your WordPress dashboard.
• Select your child theme from the “Select theme to edit” dropdown menu.
• Select functions.php and paste the PHP code (see below) below all the code.
• Click on “Update file.”

Method 2: Use the Code Snippets Plugin

If you do not use child themes, adding functions to functions.php can cause you to lose all the functions you added when you update your theme. In this case, you can use a plugin called Code Snippets. Here’s how:

• Install the Code Snippets plugin from the WordPress plugin directory.
• Go to Plugins > Add New from your WordPress dashboard.
• In the search bar, type “Code Snippets.”
• Click “Install” and then “Activate.”

To add PHP code to the Code Snippets plugin, follow these steps:

• Go to Snippets > Add New from your WordPress dashboard.
• Give a name to the snippet.
• Paste the PHP code (see below).
• Save and activate.

Sale Badge Percentage PHP Code:

This code adds a custom function to the woocommerce_sale_flash hook with a priority of 25. The function calculates the maximum sale percentage of a product (simple or variable) and displays a sale badge with the percentage if it is greater than 0.

// Add a custom function 'sale_badge_percentage' to the 'woocommerce_sale_flash' hook with a priority of 25
add_action( 'woocommerce_sale_flash', 'sale_badge_percentage', 25 );

// Define the custom function 'sale_badge_percentage'
function sale_badge_percentage() {
   global $product;
   
   // If the product is not on sale, return
   if ( ! $product->is_on_sale() ) return;
   
   // If the product type is 'simple', calculate the sale percentage based on regular and sale price
   if ( $product->is_type( 'simple' ) ) {
      $max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
   } 
   // If the product type is 'variable', calculate the maximum sale percentage from all variations
   elseif ( $product->is_type( 'variable' ) ) {
      $max_percentage = 0;
      
      // Loop through all variations of the variable product
      foreach ( $product->get_children() as $child_id ) {
         $variation = wc_get_product( $child_id );
         $price = $variation->get_regular_price();
         $sale = $variation->get_sale_price();
         
         // If the variation has both a regular and sale price, calculate the sale percentage
         if ( $price != 0 && ! empty( $sale ) ) $percentage = ( $price - $sale ) / $price * 100;
         
         // If the sale percentage of the variation is greater than the current maximum, update the maximum
         if ( $percentage > $max_percentage ) {
            $max_percentage = $percentage;
         }
      }
   }
   
   // If the maximum sale percentage is greater than 0, display the sale badge with the percentage
   if ( $max_percentage > 0 ) echo "<span class='onsale'>-" . round($max_percentage) . "%</span>"; 
}

Are you looking for ways to improve the performance of your WooCommerce website? One of the best ways to do this is by automatically deleting images associated with products that have been deleted. Read more

Conclusion

In conclusion, changing the WooCommerce Sale-Badge to Discount Percentage is a simple and effective way to boost your sales and encourage customers to make quick purchase decisions. By adding PHP code to your site’s functions.php or using a plugin like Code Snippets, you can easily add the discount percentage option to themes that don’t have it by default. We hope this article has been helpful in guiding you through the process of making this change, and that you are now equipped with the tools you need to take your WooCommerce sales strategy to the next level.