WooCommerce

Insert wrapper around images in WooCommerce archives

WooCommerce
Image courtesy of WooCommerce

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:

<li class="product">
	
	<a href="http://wp.com/shop/product-title/">		
		
		<img width="150" height="150" src="http://wp.com/wp-content/uploads/2012/06/IMAGE-150x150.jpg" class="attachment-shop_catalog wp-post-image" alt="ACCUTACT ANGLESIGHT" title="ACCUTACT ANGLESIGHT">
	
		<h3>Product Title</h3>
	
		<span class="price"><span class="amount">&#36;250</span></span> 
	
	</a>

	<a href="/shop/?add-to-cart=277" rel="nofollow" data-product_id="277" class="button add_to_cart_button product_type_simple">Add to cart</a>
</li>

But I needed a wrapper around the image, so that it would look like this:

<li class="product">
	
	<a href="http://wp.com/shop/product-title/">

		<div class="imagewrapper">
			
			<img width="150" height="150" src="http://wp.com/wp-content/uploads/2012/06/IMAGE-150x150.jpg" class="attachment-shop_catalog wp-post-image" alt="ACCUTACT ANGLESIGHT" title="ACCUTACT ANGLESIGHT">
		
		</div>
	
		<h3>Product Title</h3>
	
		<span class="price"><span class="amount">&#36;250</span></span> 
	
	</a>

	<a href="/shop/?add-to-cart=277" rel="nofollow" data-product_id="277" class="button add_to_cart_button product_type_simple">Add to cart</a>
</li>

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?

12 thoughts on “Insert wrapper around images in WooCommerce archives

    1. 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

      1. 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!

  1. 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);

    1. 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);

  2. I’m really dissapointed that woocommerce makes developers do things like this.

    I’ve long grown used to mixed html and php. But having to make simple changes in html by over-riding functions just makes no sense. Especially given the already existing absence of seperation of concern in the design of wordpress.

    It’d be so much simpler and make so much more sense if wordpress plugin developers stuck to simple editable php templates.

  3. hello, this is a good snippet. i was looking something like this but what i want to do is to change the product image onmouseover.

    i’m created a custom field for the hover image and i’m trying to insert this code but is not working. on line 46:


    $output .= '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="' . $placeholder_width . '" height="' . $placeholder_height . '" onmouseover="" />';

    can you help please?

  4. Yes, It works great. I’m also looking to do this for product categories catalog. How can I accomplish this? Thanks.

  5. Awesome. My client had 6000 products, all different sizes. Thanks a lot, just what I was looking for and it worked liked a charm. Saved us countless hours! An invaluable snippet and will most likely be used in in all future commerce builds.

Leave a Reply