Woocommerce Tutorial: Better Product Listings For Imageless Products

Recently I’ve been working on my second WooCommerce project and I’ve found it quite a flexible solution so far. Woocommerce pretty much expects products to have images and the templates expect there to be a product image, so when you have a product without an image (because it’s a service and not a physical product for example), things don’t look that good. The following solution allows you to selectively modify the appearance of imageless product listings.

Notes: This is a good solution if you have a mix of products/services with and without images, or you have imageless products for which you may want to add product images later. You could also write your own template which overrides the default template. This solution however works well with the default template WooCommerce provides.

Because WooCommerce inserts an image element with a placeholder if no image was set for the product, the first thing we need to do is to prevent the image tag from showing up. We can do that by calling a custom funtion from the appropriate WooCommerce hook. For product listings that are shown in loops, the action hook that adds the function for the image display is called ‘woo_commerce_before_shop_loop_item’. There is another action hook called ‘woocommerce_before_shop_loop_item’ that runs before the image – which is wrapped in a link – is outputted. That’s the point where we want to run our modifications.

function before_imageless_product() {
	if( !has_post_thumbnail( get_the_id() ) ){
		remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
		echo '<div class="no-image">';
	}
}
add_action( 'woocommerce_before_shop_loop_item', 'before_imageless_product', 9 );

So what’s going on here? Well, we first check to see if the product in question has a thumbnail associated with it. If it has, we can maintain the normal templating, if it hasn’t we want to prevent an image element containing a placeholder from being inserted. We do that by calling remove_action on the ‘woocommerce_template_loop_product_thumbnail’ function. Because we want products with images to maintain their templating, we have to remember to add this function back. We do that by adding the call back right after, which we’ll get to next.

You’ll see we’re also inserting a div when there is no image present. Why? Well, the chances are you want to modify the layout in CSS so that the display looks nice in your theme. In that case we’ll need a way to style the product listings that have no image separately from those products that do have an image. Because there are no filters that are run on the CSS classes of the product listing that we can tap into easily, another way to do this is to simply wrap the product output in a div with its own class name. That way we can target the product listing in CSS without having to write a different template from scratch.

Now that we have implemented to code to remove the image from imageless product listings, we complete the modification by adding the image function back in and closing the div element we just inserted before the loop continues.

function after_imageless_product() {
	if( !has_post_thumbnail( get_the_id() ) ){
		add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
		echo '</div>';
	}
}
add_action( 'woocommerce_after_shop_loop_item', 'after_imageless_product', 9 );

You should now see that default placeholder isn’t being outputted. You may want to tweak the css to make the imageless products look better. You can now easily do so by targeting those listings with the .no-image class.

* This example assumes a default-ish WooCommerce setup, if you have customized WooCommerce or are running a WooCommerce theme, there is a small possibility that the display is handled differently and the code might not work as intended.

27 comments

  1. Carrie McDougall says:

    Thank you for this!  It worked wonderfully on the product list pages, but when the giant placeholder still shows up on the Product Detail pages.   I’m looking for a solution to that little hick-up, but if you can offer one before I tear my hair out trying, it would be greatly appreciated! 😉

  2. Carrie McDougall says:

    Thank you Peter! I just downloaded and activated the plug-in. It does allow for ‘no-image’ on the description pages, but it’s all descriptions pages and cannot be customized for individual products. *pout* Thanks for the prompt response though and it might be perfect for others’ needs.

    • Carrie McDougall says:

      OK… I’ve decided I can live without any images on the detail pages, but now the image placeholder is showing up on the checkout page. 🙁

      • Peter Knight says:

        Do you mean the checkout page or the cart page before proceeding to checkout? I just noticed that for the cart page the options to hide the image placeholder aren’t as pretty as they’ve hardcoded some of the markup, it’s probably easier just to hide it with css. An alternative to that is creating a custom template file to override the default cart template (cart.php) and making the edits there, but there can be a more substantial future maintenance cost to that. I’ll give it another think.

  3. Carrie McDougall says:

    Hi! I was able to remove the image placeholder on the product detail pages by installing the WooCommerce Product Details Customiser plug-in. But, unfortunately it doesn’t effect the Cart nor the Check-out pages and the placeholders are still there. I’m working with a premium theme (Madidus) that isn’t designed to work with Woocommerce, so it’s been a bit of a challenge. It also doesn’t play well with Child Themes, so editing the CSS has also been challenging. Seems that using Hooks is the best approach so far, but this is my first time working with them, and I’m still rather confused.

  4. Speedyp says:

    I LOVE YOU Peter!

    This was exactly what I needed – a way to handle products with & without thumbnails without the horrible placeholders. Works perfectly.

    4 hours searching the internet / asking on useless forums & the answer was right here – THANKS! 🙂

  5. Igor420 says:

    Hey Peter.

     

    I put the code into my functions.php and the imageless product now have no image.

    Where in that code do I put the URL for the placeholder that I want to appear instead of no image?

     

    Cheers mate.

    • Peter Knight says:

      Hi Igor, this solution is for people that don’t want a placeholder image. The placeholder image can be modified through a filter however, that is what you’d be looking for. I’ll see when I have time to add this solution to this post. Check out the woocommerce_placeholder_img_src filter to accomplish this in the mean time.

  6. dylan says:

    Hi there
    I’m using woocommerce with virtue theme and can’t get this to work
    i have a child theme set up and tried both placing in function.php and functions.php but no luck
    any pointers?

    • Peter Knight says:

      I’m not familiar with the Virtue theme, but it may be using its own templates so the technique might not work. Have you tried asking the theme author?

    • Peter Knight says:

      Are you adding images inside your product descriptions? That’s not the default behavior so I’m guessing somewhere in your code the image is being added via a hook. Had a look at the Mural theme on themeforest but the product descriptions there are plain text so I’m not sure it’s your theme, maybe some custom code you added?

  7. Sander says:

    N00b question here, just started working with WP (rt theme 17) and woocommerce:

    if I add an image to the poduct short description, shouldn’t that take the place of the placeholder image? In my case the image is showing up right next to the placeholder image, with the description underneath it.
    Thanks!

    • Peter Knight says:

      Woocommerce will look for the featured image to replace the placeholder. So instead of manually inserting it inside the editor for the description, use the featured image interface on the right hand side (sometimes appears lower on the post editing page, so it’s not always that obvious).

  8. bob says:

    I am using external/affiliate products. So, whenever someone clicks on the product image, I want it to go the affiliate URL. In order words, i want to skip the product description page.

    Since, there are external products, I don’t have any pricing so there is no ‘add to cart’, checkout etc.

    Please guide.

    Bob

    • Peter Knight says:

      I’m curious as to why you are using WooCommerce to link to external products? It would be easier to create your own custom post type, I’m sure there are solutions out there that already cater to that. Using WooCommerce for that just adds a whole lot of bulk you wouldn’t need.

  9. Adi says:

    I am using the ePix theme from themeforest. In my product details page as well as the shop page, the featured image of the product becomes the background image of the page. I’ve spent hours trying to find a way to remove it. The only option is to remove the featured image but then that leaves those placeholders in the cart and checkout page. Please help! The preview page for the theme doesn’t have the issue. What am I missing here? http://epix.themeva.com/product/brown-dog/

    • Adi says:

      Nevermind. I fixed it so that images/placeholders dont show up anywhere using a combination of your code and the plugin. However I still want to use an image without it becoming the background image of the product detail and shop page.

  10. Mike says:

    Hey Peter, my products in woocommerce are being added via import script. I believe it works by reading changes from a database and inserting them into the products area on the backend. The issue I’m having is some products do not have pictures yet, and I’m wondering if I could use a version of this script to prioritize products with images over products without.

    • Peter Knight says:

      Hey Mike, interesting use case. You’d need a solution that weights products based on the presence of images, so this code won’t help you much I think. I would ask Jonathan Christopher who wrote a great search plugin that uses weighting (SearchWP) on how to deal with this.

  11. Using this approach does not hide the images. Also, the dilemma now is that, when I go to view a category, I see empty category pages, and have to browse every page to see 1 or 2 products on some pages. I need to remove it from the entire front-end, otherwise, what’s the point of this tutorial??

    • Peter Knight says:

      When I wrote this I was documenting a personal use case that doesn’t utilize category pages, so I haven’t tested it for that. However, I’ve just started a new WooCommerce project where I need to hide the image display again so I might get round to updating this page soon.

  12. Alexander says:

    Peter,
    Many thanks for the fix on the product thumbnails. How could I make this work for the Product Categories tho?

  13. Dustin Olsen says:

    Peter – You’re the only one I’ve found with a working solution for this. Thank you, thank you! But, I too am in need of a solution that’ll remove the default image on the single product pages until a featured image or gallery is uploaded. If you can point me to a link that can help me, I’d be grateful! Again, thank you!

  14. Richard Mišenčík says:

    Hey Peter,

    Thanks for this code, it works great for products.
    Is there a way to modify this for product categories instead so I can style them diferently when category image is not present?

    Thanks!

Leave a Reply to Speedyp Cancel reply

Your email address will not be published. Required fields are marked *