Change “Sale” text in your products with Divi

Sales are a great marketing strategy. By offering a discount that encourages customers to make quick purchasing decisions.

If you have a WooCommerce store, you’ll know that the WooCommerce sale badge is easy to set up. All you have to do is enter a sale price in the product settings, and it will automatically display a badge that says “Sale!“.

The WooCommerce offer badge is effective at alerting customers to a discount, but we can do better than that.

Wouldn’t it be better to completely replace the “Sale!” text with a percentage discount value for each product? This way each product will have its own offer value, it will be distinguished from the others and the discounts will be more eye-catching.

For this Divi tutorial, you will need to add a few lines of code to the functions.php and style.css files. This code snippet is quick and easy to set up; you’ll have a slick looking discount badge on your WooCommerce products in no time.

Replace offer text with percentage

For the first part we have to create a PHP function that replaces the usual offer texts with the discount percentage of each product. The code would be this:

/* Replace sale text with percentage */
add_filter( 'woocommerce_sale_flash', 'wphelp_sale_percentage' );
function wphelp_sale_percentage($text) {
global $product; 
$stock = $product->get_stock_status();
$product_type = $product->get_type();
$sale_price = 0;
$regular_price = 0;
if($product_type == 'variable'){
$product_variations = $product->get_available_variations();
foreach ($product_variations as $kay => $value){
if($value['display_price'] < $value['display_regular_price']){
$sale_price = $value['display_price'];
$regular_price = $value['display_regular_price'];
}
}
if($regular_price > $sale_price && $stock != 'outofstock') {
$product_sale = intval(((intval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
if ($product_sale > 5 ) {
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe017;"></span> ' . esc_html($product_sale) . '% discount</span>';
}
if ($product_sale <= 5 ) {
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe017;"></span>ON SALE!</span>';
}
}else{
return '';
}
}else{
$regular_price = get_post_meta( get_the_ID(), '_regular_price', true);
$sale_price = get_post_meta( get_the_ID(), '_sale_price', true);
if($regular_price > 5) {
$product_sale = intval(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe017;"></span> ' . esc_html($product_sale) . '% DISCOUNT</span>';
}
if($regular_price >= 0 && $regular_price <= 5 ) {
$product_sale = intval(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe017;"></span>¡ON SALE!</span>';
}
else{
return '';
}
}
}Code language: PHP (php)

This code must be added to the end of the functions.php file of the Divi child theme.

When you save the changes your offer texts will have changed, and now the discount percentage of each particular product will be displayed.

Great, isn’t it?

As you can see, we added different ways to display discounts according to the price of the product.

This will work everywhere, both on the product catalog page and Divi store modules and even on each individual product page.

This would be the result, but we can improve it even more if we add some styles to the offers.

Add styles to the discount percentage

A simple way to improve the appearance of the percentage discount badge, without complication, is to take advantage of the icons that Divi already brings and add some to our discount badge to make it stand out even more.

In fact, the PHP code above is already prepared for it, when we define the data-icon value, which will show by default the icon of the typical price tag, just need to create some CSS to display it with style, for example:

/* Icons on the new price */
.sale-icon[data-icon]:before {
font-family: 'ETmodules';
content: attr(data-icon);
speak: none;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}Code language: CSS (css)

You can add this code to the custom CSS section of the Divi theme options, in your site administration, or if you prefer under Appearance → Customize → Additional CSS. It will work on any of these sites. In fact if you add it on one it shows up on the other.

What we get is the following:

Changing the icon

Now, you don’t like that icon? No problem!

You can leave the CSS the same, you only have to modify the data-icon values of the first code, of the PHP. You only have to look for the 4 occasions in the code(the first one) where the following appears: data-icon="&#xe017" and replace the icon value with another one, which you can find in the official Divi icons page. It is very easy to use, you look for the icon you like and copy the unicode below the icon.

Let me know in the comments if you liked this trick for Divi, which as you’ll see is still the most customizable theme out there.