Adding the discount percentage to variable product

Question

I’m trying to add a discount percentage aside price in a site that uses WooCommerce.

I’ve applied this script for the standard price and the sale price:

// Add save percentage next to sale item prices.
add_filter( 'woocommerce_get_price_html', 'adventure_tours_sales_price', 10, 2 );
function adventure_tours_sales_price( $price, $product ){
  $percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
  return $price . sprintf( __(' Save %s', 'woocommerce' ), $percentage . '%' );
}

The script above works.

In front-end, I have the price percentage.

Now I want apply the same script to the product variation price.

I’ve checked the product variation option and tried something like this:

// Add save percentage next to sale item prices.
add_filter( 'woocommerce_get_price_html', 'adventure_tours_sales_price', 10, 2 );
function adventure_tours_sales_price( $price, $product ){
  if( $product->is_type( 'variable' ) ) {
    $percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
    return $price . sprintf( __(' Save %s', 'woocommerce' ), $percentage . '%' );
  }else{
    $percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
    return $price . sprintf( __(' Save %s', 'woocommerce' ), $percentage . '%' );
  }
}

But it does not work, the percentage is not applied to the price.

Nor in front-end.

Answer 1

Update for WooCommerce versions 3+ | Deprecated hooks replacement

• Replace 'woocommerce_variable_sale_price_html' by 'woocommerce_variable_get_price_html'
• Replace 'woocommerce_sale_price_html' by 'woocommerce_get_price_html'

(Thanks to Nitin)

---

For variable products is more complicated as you have 2 different locations with prices, the first one displays the minimal and maximal price (when you have multiple variations) and the second one displays the price from the selected variations. I have changed a lot your original code.

Here the correct code to display that custom dynamic labels arround discounted percentages:

add_filter('woocommerce_variation_sale_price_html','adventure_tours_sales_price', 10, 2 );
add_filter('woocommerce_sale_price_html','adventure_tours_sales_price', 10, 2 );
function adventure_tours_sales_price( $price, $product ){

    // Variables initialisation
    $regular_price = $product->regular_price;
    $sale_price    = $product->sale_price;
    $save_text     = __('Save', 'woocommerce') . ' ';

    if(!empty($sale_price)) {
        // Percentage calculation
        $percentage = '<span class="save-percent"> ' .$save_text . round( ( ( $regular_price -  $sale_price ) / $regular_price ) * 100 ) . '%</span>';

        $price = '<del class="strike">' . woocommerce_price( $regular_price ) . '</del>
        <ins class="highlight">' . woocommerce_price( $sale_price )  . $percentage . '</ins>';
    } else {
        $price = '<ins class="highlight">'.woocommerce_price( $regular_price ).'</ins>';
    }
    return $price;
}

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

    // Variables initialisation
    $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);
    $percentage_min = '';
    $percentage_max = '';
    $save_text     = __('Save', 'woocommerce') . ' ';

    // Percentage calculations
    if($variation_min_reg_price != $variation_min_sale_price)
        $percentage_min = '<span class="save-percent-min"> (' .$save_text . round( ( ( $variation_min_reg_price -  $variation_min_sale_price ) / $variation_min_reg_price ) * 100 ) . '%)</span>';
    if($variation_max_reg_price != $variation_max_sale_price)
        $percentage_max = '<span class="save-percent-max"> (' .$save_text . round( ( ( $variation_max_reg_price -  $variation_max_sale_price ) / $variation_max_reg_price ) * 100 ) . '%)</span>';

    if (($variation_min_reg_price != $variation_min_sale_price) || ($variation_max_reg_price != $variation_max_sale_price)) {
        $price = '<del class="strike">' . woocommerce_price($variation_min_reg_price) . '-' . woocommerce_price($variation_max_reg_price) .  '</del>
        <ins class="highlight">' . woocommerce_price($variation_min_sale_price) . $percentage_min . ' - ' . woocommerce_price($variation_max_sale_price) . $percentage_max . '</ins>';
    }
    return $price;
}

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

Tested and works on Woocommerce version 2.6.x (also works for version 3+ replacing hooks).

Here is what you are going to get (Screenshots from my raw test server):

---

Related answers:

• Adding custom text labels to the prices when products are on sale
• Conditional custom output around products sale price and regular price