Display Final Sale for Sale Items

Hi @kvaras1969,

I understand you are looking to add a text below the Sale tag. This can be done by adding custom CSS code to your site. Please use the following CSS code:

/*To add text below Sale tag*/
span.onsale:after {
content: "Final Sale";
position: absolute;
display: block;
width: max-content;
background: #dfb0bb;
margin-top: 4px;
margin-left: -14px;
padding: 0px 4px;
}

To apply this code to your website, you follow the detailed guide here.?Here’s what the result will look like:?

You should see the changes reflected on your website immediately.

Let us know if there’s anything else we can help you with.

Thank you so much! I absolutely love this! I hate to be a bother, but is there a way to add the code after the sale price? So, if the item is on sale, next to the price it would say final sale? I’ve included a link with this from Neiman Marcus.

The CSS you gave me is extremely useful, I very much appreciate your help!

https://www.neimanmarcus.com/p/versace-mens-barocco-smoking-slippers-prod263580422?pimId=401231577093&utm_source=google_shopping&ecid=NMCS_GP_NC&gad_source=1&gclid=Cj0KCQiA5fetBhC9ARIsAP1UMgFThtfsgG9W8L70qUnrytENLCJjj6h_fzmVv3s57BfHCkcBsfn9EBgaAtdvEALw_wcB&gclsrc=aw.ds

Would something like this work? I don’t know if this is right at all.

<?php
global $product;
if ($product->is_on_sale()) {
  echo $product->get_sale_price();
  echo " Final Sale"; //
}
?>

or…maybe I just put it in the style.css? ughh…I don’t know

<span style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap; color: rgb(128, 0, 0);">.woocommerce-product-variations__regular-price--on-sale</span><span style="background-color: rgb(255, 255, 254); font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap;">{</span><span style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap; color: rgb(255, 0, 0);">text-decoration:</span><span style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap; color: rgb(4, 81, 165);">line-through</span><span style="background-color: rgb(255, 255, 254); font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap;">;</span><span style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap; color: rgb(255, 0, 0);">color:</span><span style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap; color: rgb(4, 81, 165);">#949494</span><span style="background-color: rgb(255, 255, 254); font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap;">;</span><span style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap; color: rgb(255, 0, 0);">margin-left:</span><span style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap; color: rgb(9, 134, 88);">6px</span><span style="background-color: rgb(255, 255, 254); font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap;">;</span><span style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap; color: rgb(255, 0, 0);">word-wrap:</span><span style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap; color: rgb(4, 81, 165);">normal</span><span style="background-color: rgb(255, 255, 254); font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; text-wrap: nowrap;">}</span>

Hi @kvaras1969,

You’re very welcome! I’m glad you like the CSS code I gave you. You’re not a bother at all, I’m happy to help you with your WooCommerce site. To add the text “Final Sale” after the sale price, you can use the following CSS code:

.promo:after {
content: "Final Sale";
position: absolute;
width: max-content;
background: #dfb0bb;
margin-left: 8px;
padding: 0px 8px;
}

This code will create a pseudo-element after the element with the class .promo and give it the text and style you want. You can adjust the color, margin, and padding as you like.

To add this CSS code to your site, you can follow this guide: Access the CSS Editor. You can either use the Customizer or the Additional CSS section in your theme options.

You don’t need to use the PHP code or the style.css file for this. The CSS code I gave you should work with any theme and any product that has the class .promo.

Please let me know if this works for you or if you have any other questions.

Ok, so you are an absolute genius! Thank you so much!!! I had to mess with it a little bit, but you got me on the right track ??

https://mbymaggie.com/sale-items/?doing_wp_cron=1707062912.4704320430755615234375

The one that you sent me, for some reason it kept disappearing – i’m assuming that it was being removed by some other code (this site was built so strange). However, I put this in the “Additional CSS” and it worked beautifully!

I can’t thank you enough. I do have another question, but since it is completely different, I will post another thread. Thank you again!!!

del span.woocommerce-Price-amount.amount {
color: #565656;
font-size: 12x;
font-weight: bold;
text-decoration: line-through;
}
ins span.woocommerce-Price-amount.amount:after {
  font-size: 10px;
	content: "Final Sale";
	padding: 0px 3px;
	font-size: 10px;
	color: #ff0040;
	

Hi @kvaras1969,

You’re very welcome! ?? I’m glad that the custom CSS code I provided worked for you. If you ever encounter any other issues or have any questions, please feel free to reach out to us again.

I really appreciate your kind words and feedback. It means a lot to us and helps us improve our service. If you have a few minutes, we’d love if you could leave us a review:

https://www.ads-software.com/support/plugin/woocommerce/reviews/

Thank you for choosing WooCommerce and have a wonderful day! ??

Hi! I know it’s been a while, but I was wondering…what if I wanted to put text after a non-sale item? The code that you gave me works for sale items, but I wanted to put something like “Discount applied in cart” or something like that after a regularly priced item. Thank you in advance!

Hello @kvaras1969,

Thanks again for reaching out.

This can be achieved by editing the functions.php file of your theme. You can add a custom function that adds your desired text after the price of non-sale items.

Before proceeding, please make a backup of your site> here’s a simple code you can try:

add_filter( 'woocommerce_get_price_html', 'custom_price_message' );
function custom_price_message( $price ) {
if ( ! has_term( 'sale', 'product_cat' ) ) {
$price .= ' Discount applied in cart';
}
return $price;
}

This function checks if the product is not in the ‘sale’ category and adds the ‘Discount applied in cart’ message after the price. You can modify this function to fit your specific needs.

I hope this helps. All the best!