Displaying a percentage discount on your WooCommerce sale products is a great way to inform customers of the savings they can enjoy. This can help to increase sales and boost your bottom line.
There are a few different ways to display percentage OFF on your WooCommerce sale products. One way is to use the Discount Rules for WooCommerce plugin. This plugin allows you to customize the sale badge on your products, including the ability to display the percentage discount.
Another way to display percentage OFF on your WooCommerce sale products is to use custom code. You can add the following code to your theme’s functions.php file:
On-sale Label on shop (archive) page:
// On-sale label on shop page
add_action( 'woocommerce_before_shop_loop_item', 'softexpert_show_sale_percentage_shop_page', 8 );
function softexpert_show_sale_percentage_shop_page() {
global $product;
if ( ! $product->is_on_sale() ) return;
if ( $product->is_type( 'simple' ) ) {
$max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
} elseif ( $product->is_type( 'variable' ) ) {
$max_percentage = 0;
foreach ( $product->get_children() as $child_id ) {
$variation = wc_get_product( $child_id );
$price = $variation->get_regular_price();
$sale = $variation->get_sale_price();
if ( $price != 0 && ! empty( $sale ) ) $percentage = ( $price - $sale ) / $price * 100;
if ( $percentage > $max_percentage ) {
$max_percentage = $percentage;
}
}
}
if ( $max_percentage > 0 ) echo "<span class='sale-price-off'>" . round($max_percentage) . "% OFF</span>";
}
On-sale Label on single-product page:
// On-sale label on single product page
add_action( 'woocommerce_before_single_product_summary', 'softexpert_show_sale_percentage_single_page', 8 );
function softexpert_show_sale_percentage_single_page() {
global $product;
if ( ! $product->is_on_sale() ) return;
if ( $product->is_type( 'simple' ) ) {
$max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
} elseif ( $product->is_type( 'variable' ) ) {
$max_percentage = 0;
foreach ( $product->get_children() as $child_id ) {
$variation = wc_get_product( $child_id );
$price = $variation->get_regular_price();
$sale = $variation->get_sale_price();
if ( $price != 0 && ! empty( $sale ) ) $percentage = ( $price - $sale ) / $price * 100;
if ( $percentage > $max_percentage ) {
$max_percentage = $percentage;
}
}
}
if ( $max_percentage > 0 ) echo "<span class='sale-price-off'>" . round($max_percentage) . "% OFF</span>";
}
CSS Code (If needed):
.sale-price-off {
font-size: 13px;
color: #fff;
position: absolute;
z-index: 2;
background-color: #E11500;
clip-path: polygon(0% 0%, 100% 0, 98% 92%, 49% 100%, 0 92%);
min-height: 45px;
display: flex;
align-items: center;
text-align: center;
width: 42px;
line-height: 17px;
font-weight: 600;
border-top-left-radius: 8px;
}