Display Old Price Struck-Through Next to New Promotional Price

How to show old price with strikethrough in woocommerceDisplay old and new price on woocommerce product pageWoocommerce show discounted price with strikeoutAdd strikethrough to original price in wordpressWoocommerce display sale price next to original priceShow regular price crossed out on woocommerceWoocommerce variable product old price strikethroughHow to display discount price with old price in woocommerceWoocommerce strike through old price and show sale priceDisplay old price with line through it in wordpress

Explanation

To show the old price with a strikethrough next to the new sale price in WooCommerce, this code snippet does the trick:

What It Does:

Checks if a product is on sale.
Grabs both the regular (old) price and the sale (new) price.
Formats the old price with a strikethrough and places it next to the new price.

How It Works:

The code hooks into WooCommerce's price display system.
If the product is on sale, it fetches both the regular and sale prices.
The regular price is wrapped in a <del> tag, which adds the strikethrough effect.
The sale price is wrapped in an <ins> tag, making it stand out.

Result: On your product pages, customers will see the original price crossed out, right next to the discounted price, making it clear there's a sale.

Code
<?php
// Hook into WooCommerce to modify the way prices are displayed on product pages
add_filter('woocommerce_get_price_html', 'wp_dudecom_display_strikethrough_old_price', 10, 2);

/**
 * Display the old price with a strikethrough next to the new sale price.
 *
 * @param string $price The original price HTML.
 * @param WC_Product $product The WooCommerce product object.
 * @return string Modified price HTML with strikethrough for old price.
 */
function wp_dudecom_display_strikethrough_old_price($price, $product) {
    // Check if the product is on sale
    if ($product->is_on_sale()) {
        // Get the regular and sale prices
        $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()));

        // Format the prices
        $regular_price_html = wc_price($regular_price);
        $sale_price_html = wc_price($sale_price);

        // Return the formatted price with strikethrough for the regular price
        $price = '<del>' . $regular_price_html . '</del> <ins>' . $sale_price_html . '</ins>';
    }

    return $price;
}
?>

Instructions

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

Prerequisites:

Ensure WooCommerce is installed and activated on your WordPress site.

Implementation Steps:

Log in to your WordPress admin dashboard.
Navigate to Appearance > Theme Editor.
In the right-hand sidebar, find and click on functions.php to open it.
Scroll to the bottom of the functions.php file.
Copy and paste the provided code snippet at the end of the file.
Click Update File to save your changes.
Visit a product page on your site to verify that the old price is displayed with a strikethrough next to the new sale price.

If you encounter any issues or need further customization, consider reaching out to wp-dude.com for expert assistance.