Return to previous page

Request to Add “In Stock” Badge Only for Available Products

This topic has 8 replies, 3 voices, and was last updated 1 days, 3 hours ago ago by Andrew Mitchell

Manhal

Participant

March 24, 2025 at 12:02

Hi Support Team,

I would like to add an “In Stock” badge to the product pages. However, I only want this badge to appear when the product is in stock, not when it is out of stock. Could you please let me know how we can implement this?

Thank you for your assistance!

Best regards,
Manhal

#438432 Copied Theme version: 9.4.9

7 Answers
Luca Rossi

Support staff

March 24, 2025 at 16:30
Hi @Manhal,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

div.product.instock { position: relative; } div.product.instock::before { content: 'In Stock'; background-color: rgb(255 0 0 / 50%); width: auto; border-radius: 4px; color: #fff; padding: 8px 15px; text-align: center; position: absolute; z-index: 999; top: 15px; left: 15px; }

https://tinyurl.com/24lppaqg

Kind regards,
The 8Theme Team
#438469 Copied
Manhal

Participant

March 25, 2025 at 09:01

Thank you! It appeared exactly as I wanted.

One last thing—I’d like the product boxes to always have the same height across all rows.

Is there an option to achieve this?

Files is visible for topic creator and
support staff only.

#438540 Copied
Luca Rossi

Support staff

March 25, 2025 at 09:38
Hi @Manhal,

Can you please also add this custom CSS codes?

.content-product.et-product-height-calculated .product-excerpt, .content-product.et-product-height-calculated .products-page-cats { min-height: 50px; }

Hope it helps!
#438553 Copied
Manhal

Participant

March 25, 2025 at 11:03

Please note that it didn’t work in some places, and I’m not sure why.

Additionally, the height doesn’t appear as expected when the page loads. The height only updates when hovering over the product.

Here’s a link as an example:

https://trade.cavalotec.com/product-category/agri/vdl-agrotech/silo/

Files is visible for topic creator and
support staff only.

#438594 Copied
Luca Rossi

Support staff

March 25, 2025 at 12:47
Hi @Manhal,

Can you please update the previous CSS code to this?

body .content-product .product-excerpt, body .content-product .products-page-cats { min-height: 50px; }

Let us know how it goes!
#438636 Copied
Manhal

Participant

March 25, 2025 at 14:04

It worked perfectly!
Thanks for your help.

#438656 Copied

Andrew Mitchell

Support staff

March 25, 2025 at 14:04

Dear Manhal,

As we continue our mission to exceed expectations, your insights become increasingly valuable. Could we, with all due respect, request your thoughtful feedback by giving our theme a deserved 5-star rating on ThemeForest?

Click here to share your valuable perspective: https://themeforest.net/downloads

Your time and trust are highly appreciated!

Best Regards,
The 8Theme Team

#438657 Copied
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘Request to Add “In Stock” Badge Only for Available Products’' has been successfully resolved, and the topic is now closed for further responses

Request to Add “In Stock” Badge Only for Available Products

Recent Topics

Helpful Topics

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection