This is a simple hack to WooCommerce that inserts a wrapper div around images in the WooCommerce loop. More than the value of this snippet, it gives some insight into what it’s like customizing WooCommerce in general.
In WooCommerce, the basic structure of the a product in the loop is like this:
But I needed a wrapper around the image, so that it would look like this:
The image is inserted into the loop with the woocommerce_before_shop_loop_item_title hook. The following snippet will add the markup to achieve the above html output for all archives, including the shop, category archives, related products, etc.
As you can see, it requires that you remove the action which inserts the original thumbnail function, and then we can use add_action to re-insert it with the WooCommerce functions overwritten. All this would go in your functions.php file or custom plugin.
WooCommerce is full of hooks. Most of its functions are added in this way. This makes it relatively simple to alter the output of the plugin with your own hooks. This is just a sample of what you can do.