WooCommerce Custom Out of Stock Image Overlay

WooCommerce - Woo Out of Stock image overlayIf 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.

WooCommerce Custom Out of Stock Image Overlay plugin

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.

woocommerce out of stock photoshop

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.

woocommerce out of stock import wordpress

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.

WooCommerce Custom Out of Stock Image Overlay in use

WooCommerce Tips, WooCommerce Tutorials, WordPress eCommerce
Previous Post
Migration an Existing eCommerce System into WooCommerce – WordPress eCommerce
Next Post
How to Add WooCommerce Product Options – WordPress eCommerce

Related Posts

You must be logged in to post a comment.