How to Display "You Save X%" on Your WooCommerce Checkout Page
Tired of customers not fully realizing the value of their purchase? Want to showcase the savings they're getting with a clear "You Save X%" message on your WooCommerce checkout page? Look no further! This article will guide you through the process, giving you the tools and knowledge to implement this feature effectively.
The Problem: WooCommerce doesn't inherently display "You Save X%" on the checkout page. This can make it difficult for customers to understand the value they're getting, potentially leading to missed sales opportunities.
The Solution: Adding a custom code snippet to your theme's functions.php file or using a plugin like WooCommerce Customizer will allow you to dynamically display the savings percentage on the checkout page.
Let's Get Started:
Option 1: Using a Code Snippet
- Access your theme's
functions.phpfile: Navigate to your WordPress dashboard > Appearance > Theme Editor > functions.php. - Paste the following code snippet into
functions.php:
add_action( 'woocommerce_checkout_order_review', 'display_checkout_savings' );
function display_checkout_savings() {
// Get the cart total and discounted price
$cart_total = WC()->cart->get_cart_total();
$discounted_total = WC()->cart->get_total();
// Calculate the savings percentage
$savings_percentage = ( ($cart_total - $discounted_total) / $cart_total ) * 100;
// Display the savings message only if there's a discount
if ($savings_percentage > 0) {
echo '<p class="woocommerce-checkout-savings">You save ' . round($savings_percentage, 2) . '%!</p>';
}
}
- Save your changes. You should now see "You save X%" displayed below the order review table on your checkout page.
Option 2: Using a Plugin
For a more user-friendly approach, consider using a dedicated plugin like WooCommerce Customizer.
- Install and activate WooCommerce Customizer.
- Navigate to the "Checkout" section.
- Locate the "You Save X%" option.
- Enable the option and configure the display settings.
This plugin often provides additional customization options, like choosing the message's location and styling.
Additional Tips and Considerations:
- Styling: To ensure the "You save X%" message aligns with your website's design, apply custom CSS to the
woocommerce-checkout-savingsclass. - Discount Types: This solution works with various discount types, including cart discounts, coupon codes, and sale prices.
- Dynamic Updates: The savings percentage updates in real-time as the user modifies their cart.
- Mobile Responsiveness: Make sure the code snippet or plugin you use is responsive to different screen sizes for a seamless mobile experience.
Why Display Savings?
- Increases Purchase Intent: Customers are more likely to complete their purchase when they understand the value they're getting.
- Enhances Brand Trust: Transparency about savings builds trust and credibility.
- Improves Customer Satisfaction: Happy customers are more likely to return for future purchases.
Wrapping Up:
By adding a simple "You Save X%" message to your WooCommerce checkout page, you can increase sales, improve customer satisfaction, and build brand loyalty. With the code snippet or plugin options provided, you can easily implement this valuable feature today. Remember to test thoroughly and make adjustments to suit your specific website design and needs.
