Return to previous page

Listing page out of stock symbol not showing on hover on products

This topic has 14 replies, 3 voices, and was last updated 2 months, 2 weeks ago ago by Family Care

Family Care

Participant

December 19, 2024 at 18:40

Ref Topic: #427050

Well, in earlier ticket, it was not solved, we don’t show banner on product image for out of stock, we just see a button below product name.

if you open a product page and there is below related products which show correct banner for out of stock products on hover. we are looking for that.

Please, contact administrator
for this information.

#428119 Copied

13 Answers
Rose Tyler

Support staff

December 20, 2024 at 09:39
Hello,

Thank you for reaching out to us.

Kindly consider using the following custom CSS code:

.etheme-product-grid-item .stock.out-of-stock { position: absolute; text-align: center; background-color: rgba(255, 255, 255, .9); z-index: 1; margin-bottom: 0; font-size: .85rem; text-transform: uppercase; color: var(--et_dark-color); left: 50%; top: -70%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 7px 14px; }

Best regards,
8Theme’s Team
#428156 Copied
Family Care

Participant

December 20, 2024 at 10:09

Well, it works but not perfect. Reason is it is adding this css to button below product details which is add to wishlist button so which has difference distance to product card so it might or might not look like good. Is there any way to add this css directly to image area and hide the below add to wishlist button?

Files is visible for topic creator and
support staff only.

#428164 Copied

Family Care

Participant

December 20, 2024 at 10:51

I have recorded a snap screen recording. Please check after applying your fix.

NOw, out of stock banner is showing but its not perfect. Like on hover the buttons for add to cart, compare etc. are below this banner and not clickable under banner. also for out of stock add to cart should not show because it is not showing in related products which is perfect but on shop page there its not showing good. also below black button to notify when available should not show

https://monosnap.com/file/1R3oOwu2mK1ykh8KOBDzR97VcC2wDO

below is our shop link to check
https://familycare.pk/shop/?stock_status=out_of_stock

#428169 Copied
Luca Rossi

Support staff

December 20, 2024 at 11:01
Dear Abdul Moiz,

We hope this message finds you well.

We would like to kindly suggest using pixels instead of percentages for better accuracy and consistency. For example:

top: -130px;

We believe this approach will provide a more reliable solution.

We hope this information is helpful. Please feel free to reach out if you have any further questions or need assistance.

Best regards,
The 8Theme Team
Files is visible for topic creator and
support staff only.
#428170 Copied
Family Care

Participant

December 20, 2024 at 11:35

Yeah, it helps for the first question but please review my last message on this.

#428176 Copied
Luca Rossi

Support staff

December 20, 2024 at 12:25
Hi @Abdul Moiz,

The solution is moving those buttons to the top of product image for the out of stock products.

Please also add this custom CSS code:

.outofstock.etheme-product-hover-mask3 footer { top: 0; bottom: auto; }

Let us know how it goes!
Files is visible for topic creator and
support staff only.
#428187 Copied
Family Care

Participant

December 20, 2024 at 13:03

It works that way and we are okay with that.

but please also help us with below:

also for out of stock add to cart should not show because it is not showing in related products which is perfect but on shop page there its not showing good. also below black button to notify when available should not show

https://monosnap.com/file/1R3oOwu2mK1ykh8KOBDzR97VcC2wDO

#428192 Copied
Luca Rossi

Support staff

December 21, 2024 at 15:45
Hi @Abdul Moiz,

Please add this custom CSS code also:

.outofstock.etheme-product-hover-mask3 footer a.button { display: none; }

Hope it helps!
Files is visible for topic creator and
support staff only.
#428290 Copied
Family Care

Participant

December 22, 2024 at 10:39

Okay. thanks. it helps.

I have seen another bug on single product page in related products.

on product page, if product is out of stock then in related products, whehter any product is in stock, it doesn’t show add to cart button on hover but if main product is in stock then it shows button for in stock which is right but you need to fix for if product is out of stock then in related products on in stock products, it should show add to cart button.

I have seen some code in element as in screenshot which is coming from theme I guess, which mistakes the main product and if its out of stock it applies some css on related products which make the hide add to cart button. Please help me fix it.

this is out of stock product for you to check: https://familycare.pk/product/operon-nebulizer/

Screenshot: https://monosnap.com/file/y0uCLvFSH41P3usTCa1RYvcEBbQWpD

#428311 Copied
Luca Rossi

Support staff

December 23, 2024 at 01:42
Hi @Abdul Moiz,

Please try adding this custom CSS code also:

.single-product .elementor-widget-woocommerce-product-etheme_related .product:not(.outofstock) .footer-product .button:not(.compare):not(.add_to_wishlist) { display: flex !important; }

Best Regards,
The 8Theme Team.
#428345 Copied
Family Care

Participant

December 23, 2024 at 11:01

Okay. thanks it helps. one last thing. if you see on product page i.e. https://familycare.pk/product/believia-mini-aerosol-nebulizer/ or shop page i.e. https://familycare.pk/shop/
You will see on hover on products on related products and on shop page, the add to cart icon order is not same, on shop its on first number on reated products, its on 2nd position. Is there any way you can make it on first positon on related producuts so that both look nice?

#428395 Copied
Luca Rossi

Support staff

December 23, 2024 at 17:40
Hi @Abdul Moiz,

Please update the previous CSS code to this:

.single-product .elementor-widget-woocommerce-product-etheme_related .product:not(.outofstock) .footer-product .button:not(.compare):not(.add_to_wishlist) { display: flex !important; order: -1; }

Best Regards,
The 8Theme Team.
Files is visible for topic creator and
support staff only.
#428457 Copied
Family Care

Participant

December 23, 2024 at 18:04

thank you it works. you’re the best.

#428466 Copied
Viewing 14 results - 1 through 14 (of 14 total)

The issue related to '‘Listing page out of stock symbol not showing on hover on products’' has been successfully resolved, and the topic is now closed for further responses

Listing page out of stock symbol not showing on hover on products

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection