- This topic has 16 replies, 2 voices, and was last updated 5 years ago by David.
-
AuthorPosts
-
March 8, 2019 at 7:51 am #832985Pedro
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!
March 8, 2019 at 8:27 am #833031DavidStaffCustomer SupportHi there,
that would require some custom Filter, which luckily this dude on stack provides:
March 8, 2019 at 8:33 am #833042PedroHello 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!
March 8, 2019 at 8:45 am #833049DavidStaffCustomer SupportYou’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; }
March 8, 2019 at 10:03 am #833150PedroHello 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
March 8, 2019 at 10:28 am #833174DavidStaffCustomer Supportaah 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.
March 8, 2019 at 11:06 am #833204DavidStaffCustomer SupportRight 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; }
March 8, 2019 at 11:21 am #833216PedroWow David! It works well.
However now the percentage is showing after the review rate.
Can you do something to show it right after the price?
Thank you!
March 8, 2019 at 11:26 am #833218DavidStaffCustomer SupportIn 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.
March 8, 2019 at 11:35 am #833223PedroHello david!
Modified the number from 11 to 14 and the discount is shown after the review rate:
Then I placed 15 and the discount was triggered long after the price:
March 8, 2019 at 1:07 pm #833269DavidStaffCustomer SupportIf you want to add it back it at 15 then try this CSS:
.woocommerce div.product p.price, .saved-sale { display: inline-block; }
March 8, 2019 at 1:08 pm #833272PedroHello david! Yes please, it would be great
March 8, 2019 at 1:09 pm #833276DavidStaffCustomer SupportEdited this here – with some CSS that should do the trick:
https://generatepress.com/forums/topic/discount-rate-on-product-page/#post-833269
March 8, 2019 at 1:15 pm #833280PedroHello 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!
March 8, 2019 at 4:02 pm #833358DavidStaffCustomer SupportYou 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 */ }
-
AuthorPosts
- You must be logged in to reply to this topic.