How to Show Discount Percentage in WooCommerce with Code Snippets

Learn with Web Squadron how to show discount percentage in WooCommerce with Code Snippets. This feature not only adds a visual appeal to your product listings but also provides a clear indication of the savings a customer can make, thereby potentially increasing conversions. This post will walk you through the process of implementing this feature on your WooCommerce site.

How to Show Discount Percentage in WooCommerce

1. Install the Code Snippets Plugin
   The first step is to install the Code Snippets plugin. Navigate to your WordPress dashboard, click on ‘Plugins’, then ‘Add New’. In the search bar, type ‘Code Snippets’, then install and activate the plugin.
2. Create a New Snippet
   Once the plugin is installed, go back to your WordPress dashboard. You will see a new option called ‘Snippets’. Click on it, then select ‘Add New’. Give your new snippet a title.
3. Add the Code
   The next step is to add the code that will display the discount percentage. You can find this code below. Copy the code, then paste it into the ‘Code’ section of your new snippet.

   if ( !function_exists( 'evolution_custom_sales_price' ) ) :
   /**
    * Show percent savings on sale - Only for WooCommerce version 3.0+
    * 
    * @add filter to products
    * 
    * @return filter
    */
   function evolution_custom_sales_price( $price, $regular_price, $sale_price ) {
       
       $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
       
       $percentage_txt =  __(' Save ', 'evolution' ).$percentage;
       
       $price = '<del>' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del> <ins>' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) . $percentage_txt : $sale_price . ' ' . $percentage_txt ) . '</ins>';
       return $price;
       
   }
   add_filter( 'woocommerce_format_sale_price', 'evolution_custom_sales_price', 10, 3 );
   endif;

   Source: Code Snippets

4. Save and Activate
   After pasting the code, click on ‘Save Changes and Activate’. Your WooCommerce site will now display the discount percentage next to the sale price on all products that are on sale.

WooCommerce Show Discount Percentage Benefits

Displaying the discount percentage on your WooCommerce site can have several benefits.

Increased Transparency

Customers appreciate transparency. By showing the discount percentage, you are providing clear information about the savings they can make, which can help to build trust.

Enhanced User Experience

The discount percentage adds a visual element that can enhance the user experience. It can make your product listings more attractive and easier to understand.

Potential Increase in Conversions

The discount percentage can act as a powerful motivator for customers to make a purchase. Seeing the savings they can make can encourage them to add the product to their cart.

Show Discount Percentage WooCommerce – Tips & Tricks

While the process of displaying the discount percentage is straightforward, there are a few tips and tricks that can help you make the most of this feature.

• Customize the Display
  You can customize the display of the discount percentage to match the style of your site. This can be done by modifying the CSS in your theme.
• Use it Strategically
  Consider using the discount percentage display strategically. For example, you could highlight it during sales events to draw attention to the savings.

Common Issues and Solutions

• Discount Percentage Not Displaying
  If the discount percentage is not displaying, make sure that the Code Snippets plugin is activated and that the code has been correctly added and activated.
• Incorrect Discount Percentage
  If the discount percentage is incorrect, check that your sale and regular prices are correct. The discount percentage is calculated based on these prices.
• Display Issues
  If the discount percentage is not displaying correctly, it may be due to a conflict with your theme or another plugin. Try deactivating other plugins to see if this resolves the issue.