If out of stock products in your WooCommerce store are displayed, and not hidden — there is a plugin that allows you to use a custom out of stock PNG image to overlay your product. The plugin is called Woo Out Of Stock and you can find it in WordPress by going to Plugins > Add New and doing a search or by visiting its page on WordPress.org (https://wordpress.org/plugins/woo-out-of-stock-products/). The plugin lets you define your own custom PNG image with transparency to be used. Below I’ll explain how to quickly use your own out of stock images.
If you would like change the sorting of your out of stock images to show after the in-stock products check out our tutorial by clicking here.
Implementing WooCommerce Custom Out of Stock Image Overlay
Step 1. The first step is to download and activate Woo Out Of Stock from Plugins > Add New or by downloading it directly from WordPress.org by clicking here.
Step 2. You can use an existing out of stock image or create your own as I did for this example. This image was created in Adobe Photoshop and was exported as a PNG-24 to preserve the transparency. If you don’t have Adobe Photoshop or Fireworks you can use the open source graphics program GIMP which has many of the features that Adobe Photoshop has.
Step 3. Now that you have exported your PNG it’s time to upload it to your WordPress Media Library. When your image is uploaded, copy the image URL as shown in the image below.
Step 4. The final step is to now paste your image URL into the necessary field in the Woo Out Of Stock Settings page. You will find Woo Out Of Stock’s settings in WooCommerce > Settings and then click on the Products tab. Just below the products tab you will see Out of Stock. Once on the Out of Stock panel, paste your image URL into the “Overlay Image URL” field as shown below.
The image below shows how the image will be displayed on out of stock products.
