How To Show The Percentage Saved In A Woocommerce Sale

How to Show the Percentage Saved in a WooCommerce Sale: A Comprehensive Guide

Introduction:

Offering discounts is a powerful way to attract customers to your WooCommerce store. But simply showing the discounted price often isn’t enough to fully highlight the amazing value. Displaying the percentage saved can be a much more compelling way to demonstrate the deal and entice potential buyers. This article will guide you through several methods to automatically calculate and display the percentage saved on sale items in your WooCommerce store, ultimately boosting your conversion rates. We will explore code snippets and plugin solutions, providing you with everything you need to implement this effective sales strategy.

Main Part: Displaying the Percentage Discount

There are two primary ways to achieve this: using a custom code snippet or leveraging a plugin. Let’s explore both options.

Option 1: Using a Custom Code Snippet

This method requires basic familiarity with Learn more about How To Refund In Woocommerce PHP and the WordPress theme file structure. We’ll be adding a custom function to your theme’s `functions.php` file (or preferably, a child theme’s `functions.php` file to avoid losing the changes during theme updates).

Steps:

1. Access your `functions.php` file: Navigate to your WordPress dashboard, go to Appearance -> Theme Editor (or Theme File Editor, depending on your theme). Select `functions.php` from the file list on the right-hand side. Important: Make sure you’re editing a child theme’s `functions.php` to prevent your changes from being overwritten.

2. Add the following code snippet:

 <?php /** 
Display percentage saved on WooCommerce product page.
 */ add_filter( 'woocommerce_get_price_html', 'ts_show_percentage_saved', 10, 2 ); 

function ts_show_percentage_saved( $price_html, $product ) {

if ( $product->is_on_sale() ) {

$regular_price = wc_get_price_to_display( $product, array( ‘price’ => $product->get_regular_price() ) );

$sale_price = wc_get_price_to_display( $product, array( ‘price’ => $product->get_sale_price() ) );

$percentage = round( ( ( $regular_price – $sale_price ) / $regular_price ) * 100 );

$price_html .= sprintf( ‘-%s%%‘, $percentage );

}

return $price_html;

}

?>

3. Save the `functions.php` file: Click the “Update File” button.

4. Add Custom CSS (Optional): The code adds a class `percentage-saved` to the span containing the percentage. You can now style this element to match your theme’s design. Add the following CSS to your theme’s stylesheet (Appearance -> Customize -> Additional CSS) or in the child theme’s `style.css`:

.percentage-saved {

color: red; /* Change to your desired color */

font-weight: bold;

margin-left: 5px; /* Add some spacing */

}

Explanation:

• The `add_filter( ‘woocommerce_get_price_html’, ‘ts_show_percentage_saved’, 10, 2 );` line hooks into the `woocommerce_get_price_html` filter, which is responsible for generating the HTML output for product prices.
• The `ts_show_percentage_saved` function checks if the product is on sale (`$product->is_on_sale()`).
• If the product is on sale, it retrieves the regular and sale prices using `wc_get_price_to_display`. This function handles currency formatting correctly.
• It then calculates the percentage discount using the formula `( ( $regular_price – $sale_price ) / $regular_price Check out this post: How To Import Users And Woocommerce Orders To WordPress ) * 100`.
• Finally, it appends a span element containing the percentage saved to the existing price HTML.

Option 2: Using a Plugin

If you’re not comfortable editing code, a plugin is a simpler and safer solution. Numerous plugins offer this functionality. Here are a few examples (search for these in the WordPress plugin repository):

• WooCommerce Percentage Discount: Often provides configuration options beyond just displaying the percentage.
• Sale Flash for WooCommerce: Focuses on sale badges and percentages.
• YITH WooCommerce Badge Management: A more comprehensive solution that allows for creating highly customized badges, including sale percentage badges.

Steps (General Plugin Installation):

1. Install the Plugin: Go to Plugins -> Add New in your WordPress dashboard. Search for the desired plugin (e.g., “WooCommerce Percentage Discount”). Click “Install Now” and then “Activate.”

2. Configure the Plugin: Go to the plugin’s settings page (usually located in the WooCommerce or Settings menu) and configure the display options. This typically includes options for:

• Location of the percentage display (e.g., above the price, next to the price, on the product image).
• Styling (e.g., font size, color, background color).
• Whether to show the percentage on single product pages, shop pages, or both.

Advantages and Disadvantages:

• Code Snippet:
• Advantages: Lightweight, customizable, no dependency on external plugins.
• Disadvantages: Requires coding knowledge, potential for errors if not implemented correctly, needs updating if WooCommerce changes its code structure.

• Plugin:
• Advantages: Easy to install and configure, often includes more features and customization options, regular updates and support from the developer.
• Disadvantages: Can add bloat to your site, potential for compatibility issues with other plugins, reliance on a third-party developer for updates and support.

Where to Display the Percentage Saved:

• Single Product Pages: Most crucial for showing the value proposition right before a purchase.
• Shop Pages/Category Pages: Attract attention and encourage browsing.
• Related Products Sections: Highlight the savings on similar items.
• Cart Page: Reinforce the smart purchase decision.
• Sale Banners: Use percentage discounts in your sale banners to grab attention.

Conclusion:

Displaying the percentage saved on Discover insights on How To Setup A WordPress Ecommerce Website With Woocommerce sale items is a simple yet effective way to boost conversions and increase sales in your WooCommerce store. Whether you choose to implement a custom code Explore this article on How To Add Attributes And Variations In Woocommerce snippet for greater control and a lighter footprint or opt for the convenience and features of a plugin, the key is to make the discount visually prominent and easy for customers to understand. By implementing one of the methods outlined above, you can enhance the perceived value of your offers and entice more customers to take advantage of your amazing deals. Remember to test different display locations and styling options to optimize for maximum impact.

By taking the time to showcase these discounts effectively, you will be increasing the amount of customers who buy from your store, increasing traffic and customer loyalty.