WooCommerce Variation Image Unavailable

This is a followup to a post I made in 2013 with an early hacked-together version of the plugin. Here’s the main problem we needed to solve:

We wanted a way to put some kind of overlay on the product image when a variation is selected for which we have no picture. The featured product photo happens to be one of the variations, so we don’t want it just reverting back. The ideal situation involves keeping the featured product photo but doing some semi-transparent overlay with an apology message about viewing our fabrics page to get a look at the available fabrics for the item.

Overlay Design Goal.

The hardest part of this solution is still the JavaScript, since WooCommerce does not provide full documentation of all their JavaScript events. I frequently have to dig through the WooCommerce source code to find the proper events. These events also seem to change without notice — it can be difficult to decipher their line items in the changelogs. Hopefully you have all been updating WooCommerce, and this plugin is fully tested with WooCommerce 3+, although you may experience bugs if using a third-party theme or custom templates.

A new feature in the plugin includes a Dashboard setting for which image will be used in the overlay. This is properly hooked into the WooCommerce Settings Products tab, and linked directly from the plugin’s entry on the plugins page to make it easier to find.

Settings Link for the WooCommerce No Variation Image Plugin

Here is the full plugin ZIP file, for your convenience.

And here is my presentation on this topic for WP Omaha!

Posted in Career

Leave a Reply