Adding custom text labels to the prices when produ

Question

On WooCommerce product single pages, if a product owns a sales price, the normal price is crossed out and behind it, the sale price is highlighted.

My question:
How can I add a label like "Old Price: XX Dollar" and "New Price: XX Dollar" instead of only the crossed out and the new price (sale price)?

Answer 1

Update 2 (for simple and variable products + solved the bug on same variations prices)

when products are on sale, you can add custom labels just as you want using a custom function hooked in woocommerce_sale_price_html and woocommerce_variation_sale_price_html filters hooks (for simple and variables products.

For the min / max prices in variables products, we need a different function hooked in woocommerce_variation_sale_price_html filter hook.

Here is that code:

add_filter('woocommerce_variation_sale_price_html','sale_prices_custom_labels', 10, 2 );
add_filter('woocommerce_sale_price_html','sale_prices_custom_labels', 10, 2 );
function sale_prices_custom_labels( $price, $product ){
    if (isset($product->sale_price)) {
        $price = '<del class="strike">' . __('Old Price: ', 'woocommerce' ) . woocommerce_price( $product->regular_price ). '</del>
        <ins class="highlight">' . __('New Price: ', 'woocommerce' ) . woocommerce_price( $product->sale_price ) . '</ins>';
    }
    else
    {
        $price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).'</ins>';
    }
    return $price;
}

add_filter('woocommerce_variable_sale_price_html', 'sale_prices_custom_labels_min_max', 20, 2);
function sale_prices_custom_labels_min_max( $price, $product) {

    $variation_min_reg_price = $product->get_variation_regular_price('min', true);
    $variation_max_reg_price = $product->get_variation_regular_price('max', true);
    $variation_min_sale_price = $product->get_variation_sale_price('min', true);
    $variation_max_sale_price = $product->get_variation_sale_price('max', true);

    if ( $variation_min_reg_price != $variation_min_sale_price || $variation_max_reg_price != $variation_max_sale_price )
    {
        if($variation_min_reg_price == $variation_max_reg_price && $variation_min_sale_price == $variation_max_sale_price ){
            $price = '<del class="strike">' . __('Old Price: ', 'woocommerce' ) . woocommerce_price($variation_max_reg_price) . '</del>
            <ins class="highlight">' . __('New Price: ', 'woocommerce' ) . woocommerce_price($variation_max_sale_price) . '</ins>';
        }
        elseif($variation_min_reg_price != $variation_max_reg_price && $variation_min_sale_price == $variation_max_sale_price )
        {
            $price = '<del class="strike">' . __('Old Price: ', 'woocommerce' ) . woocommerce_price($variation_min_reg_price) . '-' . woocommerce_price($variation_max_reg_price) . '</del>
            <ins class="highlight">' . __('New Price: ', 'woocommerce' ) . woocommerce_price($variation_max_sale_price) . '</ins>';
        }
        elseif($variation_min_reg_price == $variation_max_reg_price && $variation_min_sale_price != $variation_max_sale_price )
        {
            $price = '<del class="strike">' . __('Old Price: ', 'woocommerce' ) . woocommerce_price($variation_max_reg_price) . '</del>
            <ins class="highlight">' . __('New Price: ', 'woocommerce' ) . woocommerce_price($variation_min_sale_price) . '-' . woocommerce_price($variation_max_sale_price) . '</ins>';
        }
        else
        {
        $price = '<del class="strike">' . __('Old Price: ', 'woocommerce' ) . woocommerce_price($variation_min_reg_price) . '-' . woocommerce_price($variation_max_reg_price) . '</del>
        <ins class="highlight">' . __('New Price: ', 'woocommerce' ) . woocommerce_price($variation_min_sale_price) . '-' . woocommerce_price($variation_max_sale_price) . '</ins>';
        }
    }
    return $price;
}

You can also replace the normal <ins> and <del> html tags by something else and change or add some classes too (if is more convenient for you). At this point everithing is possible.

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and works.

---

Related answers: Conditional custom output around products sale price and regular price

Answer 2

In admin side you need to define your sale price and actual price so it will automatically reflect in front side as your old price and new price alternatively.

Also you need to do some code for this.