[Resolved] Removing the sale badge on products that are out of stock

[Willya]

Hi, I want to remove the sale badge on products that are out of stock. Is this possible?

[Leo]

Hi there,

Give this CSS a shot:

.woocommerce.post-type-archive .products li.outofstock .onsale,
.single-product .product.outofstock .onsale {
    display: none;
}

Learn how to add CSS: https://docs.generatepress.com/article/adding-css/

[Willya]

Thank you, Leo! It worked.

I forgot, how about if I want to hide it on the product page as well?

[Leo]

Edited the CSS here:
https://generatepress.com/forums/topic/removing-the-sale-badge-on-products-that-are-out-of-stock/#post-2564303

[Willya]

Thank you Leo. It worked!

[Willya]

Hi Leo,

I just realized that the sale badge appears on related products and may also appear on upsell products. Can it also be removed?

Updated: I can do it with the help of chatGPT, haha

.woocommerce .related .product.outofstock .onsale,
.woocommerce .upsells .product.outofstock .onsale {
    display: none;
}

[Leo]

Glad to hear 🙂

[Willya]

Hi Leo,

I have applied a load more button to my category archive page, but after doing so, the sale badge reappeared and I don’t know which CSS class to use to hide it again.

[Fernando]

Hi Willya,

Can you name a specific products that’s out of stock which has the sale badge?

[Willya]

For example, this product (link provided in private).

Alternatively, you can click on the “Load More” button located on the product category page (link also provided in private) to view products that are sold out (I have decided to implement a function where out of stock products appear at the end, which is why you have to click the “Load More” button first to see the out of stock products.)

[Fernando]

Try this instead:

.woocommerce .product.outofstock .onsale,
.woocommerce .product.outofstock .onsale {
    display: none !important;
}

[Willya]

Thank you Fernando! That did the trick.

[Fernando]

You’re welcome, Willya!

[Author]

Posts