[Resolved] Discount rate on product page

Home Forums Support [Resolved] Discount rate on product page

Home Forums Support Discount rate on product page

  • This topic has 16 replies, 2 voices, and was last updated 5 years ago by David.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #832985
    Pedro

    Hello! I would like to add the discount percentage just after the price on the product page.

    Just like AliExpress does:

    https://www.dropbox.com/s/k2l1fipvbs8bfzz/discount%20rate.png?dl=0

    How can I do it? Thank you!

    #833031
    David
    Staff
    Customer Support

    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

    #833042
    Pedro

    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!

    #833049
    David
    Staff
    Customer Support

    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;
    }
    #833150
    Pedro

    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

    #833174
    David
    Staff
    Customer Support

    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.

    #833204
    David
    Staff
    Customer Support

    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;
    }
    #833216
    Pedro

    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!

    #833218
    David
    Staff
    Customer Support

    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.

    #833223
    Pedro

    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

    #833269
    David
    Staff
    Customer Support

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

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

    Hello david! Yes please, it would be great

    #833276
    David
    Staff
    Customer Support

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

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

    #833280
    Pedro

    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!

    #833358
    David
    Staff
    Customer Support

    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 */
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.