How to display strike out price for WooCommerce Variable products? (Code Snippet)

You are here:
< Back

When you apply a discount to simple products, by default, WooCommerce shows the sale price with regular price stricken out. This characteristic is not provided for variable products. With the help of the given code snippet, you can now display strikeout price for variable products. The code snippet is not only limited to ELEX plugins but can be used on any WordPress store running WooCommerce.

Consider we have a product, having two color variations, Black and Red, and are priced $30 and $40 respectively. When a sale price of $25 and $35 are added respectively for the variations, the product will be displayed in the store as shown in the screenshot below.

WooCommerce Catalog Mode | Default Variable price display

Default Variable price display

Code snippet to display struck-out price for WooCommerce Variable products

add_filter('woocommerce_get_price_html', 'elex_display_striked_out_price_for_variable', 200, 2);
function elex_display_striked_out_price_for_variable($price='', $product)
{
$reg_price = '';
if(!$product->is_on_sale()){
return $price;
} 
if($product->is_type( 'variable' ))
{
$variations = $product->get_children();
$reg_prices = array();
$sale_prices = array();
foreach ($variations as $value) {
$single_variation=new WC_Product_Variation($value);
array_push($reg_prices, $single_variation->get_regular_price());
array_push($sale_prices, $single_variation->get_price());
}
sort($reg_prices);
sort($sale_prices);
$min_price = $reg_prices[0];
$max_price = $reg_prices[count($reg_prices)-1];
if($min_price == $max_price)
{
$reg_price = wc_price($min_price);
}
else
{
$reg_price = wc_format_price_range($min_price, $max_price);
}
$min_price = $sale_prices[0];
$max_price = $sale_prices[count($sale_prices)-1];
if($min_price == $max_price)
{
$sale_price = wc_price($min_price);
}
else
{
$sale_price = wc_format_price_range($min_price, $max_price);
}
$suffix = $product->get_price_suffix($price);
return wc_format_sale_price($reg_price, $sale_price).$suffix;
}
return $price;
}

When the above code snippet is added, the regular price is stricken out as shown in below screenshot.

WooCommerce Catalog Mode | Strike out Variable price display

Strikeout Variable price display

Note: The given code snippet can also be applied when all variations of a variable product have the same price.

 

Explore our blog section for more related articles.

You can also check out WooCommerce and WordPress plugins in ELEX.

13 Comments

  1. bjorn.vandamme
    bjorn.vandamme - July 11, 2019 at 6:36 PM
    I tried this very interesting snippet, and it does da strike out price. But unfortunately it does this for every product, so also the products that are not on sale and do not have a sale price. It shows twice the same price in those products, which does not look good. Is there a tweak available to limit the use of this snippet for only products with a sale price?
    • Azhar Nayeem
      Azhar Nayeem - July 16, 2019 at 11:59 AM
      Hello,
      To show striked out price only for Sale price, you can add the following code snippet at the beginning of the main function.
      if(!$product->is_on_sale()){
      return $price;
      }

      That is,
      ...
      function elex_display_striked_out_price_for_variable($price='', $product)
      {
      if(!$product->is_on_sale()){
      return $price;
      }
      ...
    • Azhar Nayeem
      Azhar Nayeem - July 29, 2019 at 11:43 AM
      Here's the updated code snippet to show strike out price only for Sale price:

      add_filter('woocommerce_get_price_html', 'elex_display_striked_out_price_for_variable', 200, 2);
      function elex_display_striked_out_price_for_variable($price='', $product)
      {
      if(!$product->is_on_sale()){
      return $price;
      }
      $reg_price = '';
      if($product->is_type( 'variable' ))
      {
      $variations = $product->get_children();
      $reg_prices = array();
      $sale_prices = array();
      foreach ($variations as $value) {
      $single_variation=new WC_Product_Variation($value);
      array_push($reg_prices, $single_variation->get_regular_price());
      array_push($sale_prices, $single_variation->get_price());
      }
      sort($reg_prices);
      sort($sale_prices);
      $min_price = $reg_prices[0];
      $max_price = $reg_prices[count($reg_prices)-1];
      if($min_price == $max_price)
      {
      $reg_price = wc_price($min_price);
      }
      else
      {
      $reg_price = wc_format_price_range($min_price, $max_price);
      }
      $min_price = $sale_prices[0];
      $max_price = $sale_prices[count($sale_prices)-1];
      if($min_price == $max_price)
      {
      $sale_price = wc_price($min_price);
      }
      else
      {
      $sale_price = wc_format_price_range($min_price, $max_price);
      }
      return wc_format_sale_price($reg_price, $sale_price);
      }
      return $price;
      }
  3. mariepier
    mariepier - July 31, 2019 at 12:00 AM
    Hi!Thanks for the snippet! The only thing is the « plus taxes » dissapear with the code. How can i add the « plus taxes » with this snippet for my variable product ?https://flexigolf.ca/categorie-produit/promotionThanks!
  5. Avina Richard
    alvinarichardd - August 23, 2019 at 3:38 PM
    Can you please tell me how can I change pricing on product display as I am already working on it and created a function change_product_price_display but it having an unknown error. I have seen the below code in this tutorial https://www.cloudways.com/blog/change-woocommerce-price-display/ and its not working for my site.function change_product_price_display( $price ) { $price .= ‘ At Each Item Product’; return $price; } add_filter( ‘woocommerce_get_price_html’, ‘change_product_price_display’ ); add_filter( ‘woocommerce_cart_item_price’, ‘change_product_price_display’ );

Leave a Reply

WordPress Image Lightbox Plugin