Product Box “Out of Stock” – Modifications

Hello,

Could you please help me with two small issues?

When a product is out of stock, I would like its image to become black and white.
I want the “Out of Stock” label to be centered on the image.
Could you make these changes, please?

Thank you!

Hi radu.george.bucurenci,

Thanks for reaching to us.

1. Default image

Placeholder image is default WooCommerce functionality, which can be found in WooCommerce > Settings > Products tab https://monosnap.com/file/Y5ewG5Fb9Izbs8Tk77FW344oedxpOQ

But there is no such an option for Out of stock products specific, For specialized assistance and potential solutions, I kindly suggest that you reach out directly to the WooCommerce plugin’s support team https://wordpress.org/support/plugin/woocommerce/, who are better equipped to provide you with the guidance you requires .

2. Center label

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

div.product-labels {
    width: 100%;
    max-width: 100%;
}

.product-labels.labels-rounded span.out-of-stock {
    margin: 0 auto;
}

Regards,

Hello, thanks for reply.
Your CSS code is not working. I want the label to appear exactly in the middle of image.

I att. a image.
Thanks.

Attachments:

You must be logged in to view attached files.

As for the images appearing in black and white, we managed to do it with a JS code, but it only works if you refresh the page. The images are not displayed in black and white from the start. Maybe you can help us with a solution, please.

jQuery(document).ready(function($) {
$(‘.product-label.out-of-stock’).each(function() {
$(this).closest(‘.product-grid-item, .product-wrapper, .product’).find(‘.product-element-top img’).css({
‘filter’: ‘grayscale(100%)’,
‘opacity’: ‘0.5’
});
});
});

Attachments:

You must be logged in to view attached files.

Hi radu.george.bucurenci,

Do you want to display another labels centered as well?

Regards,

I want all products that are out of stock to have the image in black and white and the label that says “Out of stock” to be in the middle of the image. I’ve attached an edited example so you can see what I’m talking about.

Attachments:

You must be logged in to view attached files.

I have also made a video to show you what I mean. I used a JS code, the one I mentioned earlier. When I open an out-of-stock product, the image appears in color, but if I refresh the page, only then does it turn black and white. I want it to appear black and white from the start, without the customer having to do anything.

I have reattached the video in a smaller size so you can view it.

Attachments:

You must be logged in to view attached files.

Hi radu.george.bucurenci,

Please remove above CSS and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

1. Out of stock position

.outofstock .product-labels{
    max-width: 100%;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;    
}

2. Black and white image

I tested on my end, and the JS works properly since the start. Please clear browser cache and double check.

Regards,

Hello.

1. Perfect, thanks.
2. I accessed the site from a browser I’ve never used and it still doesn’t work. Only when I refresh the pictures do they turn black/white. Why?

Hi radu.george.bucurenci,

My colleague helped me to test on her browser for the first time, everything worked well https://ibb.co/WvHGgfhh https://ibb.co/6RQ67pgF

Regards,

Hello.

1. Is working but i want the label much longer / bigger
2. I got a new device, connected it to a different network, accessed onsalesgroup.ro for the first time, and no, the images do not appear in black and white from the start. I also tried using incognito mode, cleared the cache, and the issue is still not resolved.

The problem is that the JS code that adds filter: grayscale(100%) to out-of-stock product images might only run after the page is fully reloaded and not on the first display.

The solution would be to modify the script so that it runs immediately after the products are generated, using MutationObserver or by reattaching the code to the page load events.

So, how can you help us?

Hi radu.george.bucurenci,

Unfortunately, customization is out of our basic support.

Thanks for understanding our limitations. Let me know if you have any questions.

Best Regards,

[Author]

Posts