Discount rate on product page

Hi there,

that would require some custom Filter, which luckily this dude on stack provides:

https://stackoverflow.com/questions/48480480/display-the-discounted-price-and-percentage-on-woocommerce-products

Hello David! Can you tell me how to do it please? I'm not an expert in programming.

What I want is to add a small box next to the discounted price with the percentage of the discount, as I showed you in the image.

Thank you!

You'll have to start paying us sales commissions soon lol :)

So this PHP Snippet add it to your child theme function.php or the Code Snippets plugin:

add_filter( 'woocommerce_get_price_html', 'change_displayed_sale_price_html', 10, 2 );
function change_displayed_sale_price_html( $price, $product ) {
    // Only on sale products on frontend and excluding min/max price on variable products
    if( is_product() && $product->is_on_sale() && ! is_admin() ){
        // Get product prices
        $regular_price = (float) $product->get_regular_price(); // Regular price
        $sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale)

        // "Saving Percentage" calculation and formatting
        $precision = 1; // Max number of decimals
        $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), 1 ) . '%';

        // Append to the formated html price
        $price .= sprintf( __('<span class="saved-sale">-%s</span>', 'woocommerce' ), $saving_percentage );
    }
    return $price;
}

Then add this CSS and adjust it for your colors etc:

.saved-sale {
    margin-left: 10px;
    padding: 2px 10px;
    background-color: #ff0000;
    color: #fff;
}

Hello david! Thanks for the help haha.

I have added the codes however they do not work, they show this: "--INF%" and it does it in each section where products are shown.

The idea is that it only shows on the product page (next to the price).

I send you a screenshot so you can see: https://www.dropbox.com/s/02q6w8c9gcjgn6e/Captura%20de%20pantalla%20de%202019-03-08%2013-01-06.png?dl=0

aah the problem is with variable products. That code won't work as it doesn't use the standard prices. And i can't find ant smart guys code that actually works.

Right so last attempt lol - if this don't work then you will need to look for a developer or possibly a plugin. So this snippet:

add_action( 'woocommerce_single_product_summary', 'db_show_sale_percentage_loop', 10 );
  
function db_show_sale_percentage_loop() {
    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 "<div class='sale-perc'>-" . round($max_percentage) . "%</div>"; 
}

And this CSS:

.woocommerce div.product p.price {
display: inline;
}

.sale-perc {
    display: inline;
    margin-left: 10px;
    padding: 2px 10px;
    background-color: #ff0000;
    color: #fff;
}

Wow David! It works well.

However now the percentage is showing after the review rate.

https://www.dropbox.com/s/rpul81039q83bww/Captura%20de%20pantalla%20de%202019-03-08%2014-19-40.png?dl=0

Can you do something to show it right after the price?

Thank you!

In this line of code:

add_action( 'woocommerce_single_product_summary', 'db_show_sale_percentage_loop', 10 );

See the number 10. Thats the priority. Increasing the number will move it down the stack of elements. So try increasing this.

Hello david!

Modified the number from 11 to 14 and the discount is shown after the review rate:

https://www.dropbox.com/s/abt465vfilixsrh/Captura%20de%20pantalla%20de%202019-03-08%2014-32-29.png?dl=0

Then I placed 15 and the discount was triggered long after the price:

https://www.dropbox.com/s/pg4g3n9ouibnbw8/Captura%20de%20pantalla%20de%202019-03-08%2014-32-58.png?dl=0

If you want to add it back it at 15 then try this CSS:

.woocommerce div.product p.price, .saved-sale {
    display: inline-block;
}

Hello david! Yes please, it would be great

Edited this here - with some CSS that should do the trick:

https://generatepress.com/forums/topic/discount-rate-on-product-page/#post-833269

Hello david!

It worked very well, however for the mobile version it is not next to the price since it does not fit on the screen.

Is it possible to reduce the size of the text?

Thank you!

You can edit this CSS and add a font-size:

.sale-perc {
    display: inline;
    margin-left: 10px;
    padding: 2px 10px;
    background-color: #ff0000;
    color: #fff;
    font-size: 12px; /* Adjust font size */
}