Add Percentage Discount Info Next to WooCommerce Price

How to add percentage discount in woocommerceWoocommerce percentage discount next to priceDisplay percentage discount on woocommerce productWoocommerce show discount percentage on product pageAdd promotional discount info in woocommerceWoocommerce display discount percentage next to priceHow to show discount percentage in woocommerceWoocommerce plugin for percentage discount displayWoocommerce percentage discount rules setupShow percentage discount on woocommerce store

Explanation

Want to show your customers how much they're saving on a sale item? This code snippet does just that by displaying the percentage discount next to the promotional price on your WooCommerce product pages.

Where it appears: The discount percentage will show up on the single product page, right next to the sale price.
How it works: The code checks if a product is on sale. If it is, it calculates the discount percentage by comparing the regular price to the sale price.
What it shows: If there's a discount, it displays a message like "Save 20%" in bold red text, making it eye-catching for your customers.

This snippet also includes a bit of CSS to style the discount percentage, ensuring it stands out with a bold, red font. It's a simple yet effective way to highlight savings and encourage purchases.

Code
<?php
// Add percentage discount next to the promotional price in WooCommerce

// Hook into the WooCommerce single product summary to display the discount percentage
add_action('woocommerce_single_product_summary', 'wp_dudecom_display_discount_percentage', 15);

function wp_dudecom_display_discount_percentage() {
    global $product;

    // Check if the product is on sale
    if ($product->is_on_sale()) {
        // Get the regular and sale prices
        $regular_price = $product->get_regular_price();
        $sale_price = $product->get_sale_price();

        // Calculate the discount percentage
        $discount_percentage = round((($regular_price - $sale_price) / $regular_price) * 100);

        // Display the discount percentage
        if ($discount_percentage > 0) {
            echo '<p class="discount-percentage">Save ' . esc_html($discount_percentage) . '%</p>';
        }
    }
}

// Add custom CSS to style the discount percentage
add_action('wp_head', 'wp_dudecom_add_discount_percentage_styles');

function wp_dudecom_add_discount_percentage_styles() {
    echo '<style>
        .discount-percentage {
            color: #ff0000;
            font-weight: bold;
            margin-top: 10px;
        }
    </style>';
}
?>

Instructions

File Location: Add the following code to your theme's functions.php file or a custom plugin file.

Prerequisites: Ensure you have WooCommerce installed and activated on your WordPress site.

Implementation Steps:

Access your WordPress admin dashboard.
Navigate to Appearance > Theme Editor if you are adding the code to functions.php. Alternatively, use a file manager or FTP client to access your theme files.
Locate and open the functions.php file of your active theme.
Copy the provided code snippet.
Paste the code at the end of the functions.php file.
Save the changes to the file.
Visit a product page on your site to verify that the discount percentage is displayed next to the promotional price.

Note: If you prefer to use a custom plugin, create a new plugin file in the wp-content/plugins directory, paste the code, and activate the plugin from the WordPress admin dashboard.

If you need help with implementation or more advanced functionality, consider using the services of wp-dude.com.