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.
To explore WooCommerce further, I highly recommend going to woocommerce-functions.php and woocommerce-hooks.php for a bunch of general WooCommerce things you can customize, and then the templates folder to really get your hands dirty customizing the output of the plugin.
PS: Links in captions support added 3.4 is awesome, right?
And will do. I try to remember to share things I learn at work when I think they can be useful to someone, but having someone say it actually helps will make me remember better : P
That does help a lot! Thanks! I’ve been looking for such a solution in my last WooCommerce project. Schedule was too busy and had no time to look into the WooCommerce core so I gave up.
Keep them WooCommerce tips coming!
Excellent…keep this WooCommerce info coming!
Thanks, Keith!
And will do. I try to remember to share things I learn at work when I think they can be useful to someone, but having someone say it actually helps will make me remember better : P
That does help a lot! Thanks! I’ve been looking for such a solution in my last WooCommerce project. Schedule was too busy and had no time to look into the WooCommerce core so I gave up.
Keep them WooCommerce tips coming!
You could also just hook into which may be less disruptive?
// Add the img wrap
add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "";'), 5, 2);
add_action( 'woocommerce_before_shop_loop_item_title',create_function('', 'echo "";'), 12, 2);
D’oh that should have been;
// Add the img wrap
add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "<div class=\"img-wrap\">";'), 5, 2);
add_action( 'woocommerce_before_shop_loop_item_title',create_function('', 'echo "</div>";'), 12, 2);
Well that is clever. You are right (which is totally not shocking), I that would be easier.
Thanks James.
How to wrap product categories images?