When No Variation Image Available… (WooCommerce)

I had an interesting problem to solve today. I was working on a WooCommerce site with the Wootique theme, and we have products with lots of variations, but only some of the variations have their own image.

We wanted at 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

Even if that wasn’t possible, a good second would have been the ability to bulk update the variation images, but we are a little strapped for cash on this project so we weren’t going to invest in one of the bulk products plugins just for this. So that was out — instead it fell to me to program some kind of solution.

The first part of this task was the most tedius, poring over the code in an attempt to find the most appropriate JavaScript event to hook into, around the time that the user selects a new variation to view. Fortunately there was a suitably appropriate event which passed along exactly the needed information when triggered. Here’s how to capture it:

1
2
3
4
5
6
7
8
jQuery(".single_variation_wrap").on("show_variation",function(e, variation_data){
if(variation_data["image_src"]==""){
//add overlay
}
else{
//remove overlay
}
})

Another small challenge was finding the appropriate time to capture an event for the “Clear Selection” option. The overlay needed to be removed at that time as well as in the else branch above. Fortunately that one was a little easier to find, now that I knew my way around a little more of the add-to-cart-variation JavaScript file that comes with WooCommerce.

1
2
3
jQuery(".variations_form").on("reset_image",function(){
//remove the overlay
})

From there it was trivial to find the appropriate elements and modify them. My complete solution is in this zip file as a plugin. You will probably need to replace the ‘sorry.png’ file with one of your own. It’s not my most robust WP plugin ever, but it gets the job done.

0 Comments on “When No Variation Image Available… (WooCommerce)

Leave a Reply