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

Displaying strikeout prices is a powerful way to highlight discounts on your WooCommerce store. By showing the original price alongside the discounted price, you can attract attention and encourage purchases, improving the overall user experience and boosting conversions. In this article, we’ll walk you through the steps to display strikeout prices for WooCommerce variable products using a custom code snippet.

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

Prerequisites

Before diving into the code, ensure that you have the following to display strike out price for WooCommerce Variable products:

• A WordPress site with WooCommerce installed.
• Access to your theme’s functions.php file (or a child theme).
• Basic understanding of PHP (optional, but helpful).

Why You Should Display Strike Out Price for WooCommerce Variable Products?

Strikeout prices, also known as crossed-out or slashed prices, indicate the original price before a discount is applied. This visual cue can significantly impact a shopper’s decision-making process by:

• Enhancing Perceived Value
  Shoppers see the savings they’re getting, which can increase the perceived value of the product.
• Driving Urgency
  Displaying the discount can create a sense of urgency, encouraging quicker purchases.
• Improving User Experience
  Clearly showing the discount helps in transparency, and building trust with your customers.

Step-by-Step Guide to Display Strike Out Price for WooCommerce Variable Products

Step 1: Access the Theme’s functions.php File

To start, you’ll need to add the custom code to your theme’s functions.php file. If you’re using a child theme, make sure to add the code there to prevent losing your changes when the theme updates.

1. Navigate to the Theme Editor:
   • From your WordPress dashboard, go to Appearance > Theme Editor.
   • Select functions.php from the list of theme files on the right.
2. Backup Your functions.php:
   • Before making any changes, it’s wise to back up your current functions.php file. You can copy the content and save it in a text file.

Step 2: Add the Custom Code Snippet

Now, let’s add the code that will display the strikeout prices for your WooCommerce variable products.

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.

Code Snippet:

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;

}

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

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

Step 3: Testing the Implementation

After adding the code, save the changes to your functions.php file. Now, visit a product page with variable products on your WooCommerce store to see the strikeout prices in action.

• Test Different Scenarios
  Check various products to ensure the strikeout prices display correctly for both single and range prices.

• Browser Compatibility
  Test the display on different browsers and devices to ensure consistency.

By following these steps, you can successfully display strike out prices for WooCommerce Variable products, enhancing the shopping experience for your customers. This simple customization can make a significant difference in how your discounts are perceived and can drive more sales.

Explore our blog section for more related articles.

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