How to Add a “You Save” WooCommerce Badge

Displaying a “You Save” WooCommerce badge on sale prices can boost customer engagement and conversions. This tutorial, by WP Simple Hacks, will guide you through the process of displaying a Woocommerce Sale Price Badge on your website using Code Snippets. Alternatively, you also can use other Code Plugins like WP Code Box.

Set up “You Save” Woocommerce Badge

Follow these steps to display the Woocommerce Sale Price Badge:

1. Install Code Snippets
   Go to Plugins > Add new and search for “Code Snippets”
   
2. Add New Snippet & Title
   Go to the Snippets section in your website’s backend, add a new snippet, and fill in the title (in our case “Show save price”).
   
3. Copy & Paste Code
   Copy & Paste the provided code below into the snippet box.

   function you_save_text_for_product() {
       global $product;
   
       // works for Simple and Variable type
       $regular_price 	= get_post_meta( $product->get_id(), '_regular_price', true ); // 36.32
       $sale_price 	= get_post_meta( $product->get_id(), '_sale_price', true ); // 24.99
           
       if( !empty($sale_price) ) {
       
           $saved_amount 		= $regular_price - $sale_price;
           $currency_symbol 	= get_woocommerce_currency_symbol();
   
           $percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
           ?>
               <p class="you_save_price">You save: <?php echo $currency_symbol .''. number_format($saved_amount, 2, '.', ''); ?></p>				
           <?php		
       } 
           
   }
   add_action( 'woocommerce_single_product_summary', 'you_save_text_for_product', 12 ); // hook priority

   Source: WP Simple Hacks

4. Snippet Settings
   Set the location to “Run on site front end”.
   
5. Save Changes
   Save your changes and activate the snippet. Test if it is working correctly.
   
6. Custom Layout
   You can customize the appearance of the “You Save” badge using CSS. Use the “you_save_price” id and add your custom CSS code to the Customizer (Appearance > Customize).
   

Benefits of “You Save” Woocommerce Badge

Displaying a “You Save” badge on your Woocommerce sale prices has several benefits:

• It enhances customer engagement.
• It can boost conversions.
• It provides clear information about the savings a customer will make.

Common Problems

• The badge does not appear on your website
  Ensure that the snippet is activated and the location is set to “Run on site front end”.
• CSS changes not showing
  If the appearance of the badge does not change after modifying the CSS, ensure that you have clicked “Publish” in the Customizer.

Conclusion

Displaying a “You Save” Woocommerce Sale Price Badge on your website is a simple yet effective way to enhance customer engagement and boost conversions. Follow the steps in this guide to implement this feature on your e-commerce site. Happy selling!