add custom discount message to price area

Hi @namanm08,

At first sight, it seems that this can be done with CSS that you can add under Appearance > Customize > Additional CSS

Please note that we’re unable to offer further assistance for customizations in line with our Support Policy.

If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools.com. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

However, to check if anyone is able to chime in to help you out, can you please share the page where do you want this code to be applied?

Best,

Hello @csnlima

This can only be done via PHP because it requires it to appear on the page above the woocommerce product title. I would appreciate that if you can help me in my given code below and add just a background COLOR ON IT WITH TEXT FONT WEIGHT…

add_filter( ‘woocommerce_get_price_html’, ‘wc_custom_message’, 100, 2 );
function wc_custom_message( $price, $product ){
return $price.”<br>(15% off until May 31, 2020)”;
}

Thanks for getting back to us @namanm08!

I am attaching updated PHP code and some CSS that will give you the intended output.

add_filter( 'woocommerce_get_price_html', 'wc_custom_message', 100, 2 );
function wc_custom_message( $price, $product ){
    return $price."<br><p class='custom-discount-msg'>(15% off until May 31, 2020)</p>";
}

Please use the above-mentioned PHP code and remove the one that I shared before.

Later, please add the following CSS code to your site’s Appearance → Customize → the Additional CSS area to add background and other styles. Please edit the CSS code as you prefer.

.custom-discount-msg{
    background-color: yellowgreen;
    text-align: center;
    color: red;    
}

Hope it helps.

Thankyou @shaonback2 it works but the problem is coming that it is appearing on the woocommerce product loop as you can see in the image below:-

https://pasteboard.co/kStKsqb6oulj.png

Can you Please tell any code or custom CSS or any PHP code to hide that discount bar from woocommerce loop or category loop page just it needs to show on the product page that’s it…Your help would be appreciated…

Hi there!

You could use WooCommerce single product page hooks, for example, the code below would add your custom message right above the product’s title:

add_action('woocommerce_single_product_summary','custom_text_above_product_title',1);
function custom_text_above_product_title(){
	global $product;
	$myprice = $product->get_price();
	// Your custom message goes here...
}

For adding the custom message below the price, you could use the hook woocommerce_before_add_to_cart_quantity.

A list of all single product page hooks can be found here: https://www.google.com/search?client=firefox-b-d&q=woocommerce+single+product+page+hooks

I hope this helps! ??

• This reply was modified 2 years, 9 months ago by Kaushik S. a11n.

Thankyou @kaushiksomaiya your code dint help me actually it broke my site.

add_filter( ‘woocommerce_get_price_html’, ‘wc_custom_message’, 100, 2 );
function wc_custom_message( $price, $product ){
return $price.”<br><p class=’custom-discount-msg’>(15% off until May 31, 2020)</p>”;
}

Currently the above code I am using and I can see the custom message right below price. It’s okay for me but the main problem is that it is getting displayed on thatwooocmerce loop or you can say every category page. Is there any CSS or Php code like a hook so I can disable from loop and enable just on product page right under product price…

https://pasteboard.co/kStKsqb6oulj.png

Hi @namanm08,

Oops, I’m sorry about that. The code worked well on my test site.

In this case, when using your code, you could hide the custom message on product archive pages by applying the CSS code below:

.woocommerce.archive .custom-discount-msg{
	display:none;
}

– OR – I’ve also revised my code just in case you’d like to try (or want to break your site again. :D)

add_action('woocommerce_before_add_to_cart_quantity','custom_text_above_product_title',1);
function custom_text_above_product_title(){
    echo '<p class="custom-discount-msg">(15% off until May 31, 2020)</p>';
}

I hope this helps! ??

thanks, it worked. like a charm! Ah but can I ask one more thing if you don’t mind @kaushiksomaiya

hey @kaushiksomaiya

Can you tell me How can i add this You Save ? 798.00 like this after my sale price on woocommerce product page? I don’t wanna display it on the loop but only on the product page, I tried everything but for variation products, it is not working!

https://pasteboard.co/zSJ88DhWGsTZ.png

https://pasteboard.co/71VI7jEXPrVL.png

Hello @namanm08,

https://pasteboard.co/zSJ88DhWGsTZ.png
https://pasteboard.co/71VI7jEXPrVL.png

Can you please resend the last 2 screenshots, they are not visible on my end ??

You can send them via https://snipboard.io – please follow the instructions on that page, then paste the URL in this thread.

We’ll look forward to hearing from you.

• This reply was modified 2 years, 9 months ago by Igor H.

Can you tell me How can i add this You Save ? 798.00 like this after my sale price on woocommerce product page? I don’t wanna display it on the loop but only on the product page, I tried everything but for variation products, it is not working!

https://snipboard.io/10YnQ5.jpg

https://snipboard.io/E38Anf.jpg

https://snipboard.io/10YnQ5.jpg

https://snipboard.io/E38Anf.jpg

@ihereira Can you reply?

hello