Using high-quality product images in your eCommerce store is important for helping customers understand the product and encourage them to buy. This applies mostly to physical products, but what if you are selling a service, an add-on, or a digital download?  You might also want to list a product in the store before a product image is available for an upcoming product. This is where placeholder images come into play.

WooCommerce uses the WordPress Featured Image as the main image on product pages. When the Featured Image has not yet been set for a product, WooCommerce defaults to a placeholder image. The default placeholder image from WooCommerce is a simple grey box that can look out of place on a site that has design and branding setup.

Here’s how you can change the placeholder image to be consistent with your site branding and present a professional appearance.

1. Use an image that is the correct size and matches the aesthetic of your site

If your WooCommerce product image size is too big it won’t appear correctly in your store. You’ll want to make sure you start off with a WooCommerce placeholder image that is 450px by 450px square. There are many image resizing tools available for free online if you need to resize your image. You can create a substitute image of the same dimensions or use the dimensions required by your theme. The image can match your theme’s color scheme and have some custom graphics to reflect the store’s branding.

custom placeholder

My Custom Placeholder Image

When you have the image ready, from the WordPress admin dashboard hover over the Media menu option and click on Add New. Drag and drop the new image onto the page and it will be uploaded to the site.

Upload Custom Placeholder

When the image is done uploading press the Edit link to see image details. Copy the File URL field for use in the next step.

Get Placeholder URL

2. Add a short snippet of code to point to the URL of the image

To replace the default placeholder image you can use this snippet of code. Simply add it to the functions.php file of your site’s theme and your site will use your custom placeholder. Remember to use the file URL of the image you uploaded.

3. Use a plugin like the WooCommerce Customizer from SkyVerge

If you don’t want to add the code snippet above to your theme and instead want to make the placeholder image change via the WordPress dashboard, you can use the WooCommerce Customizer plugin available on WordPress.org.

This plugin offers a placeholder change option as one of its customizations.

Here’s the custom placeholder in action on a WooCommerce demo site:

demo_placeholder_image

Using a custom placeholder image will help your store look more polished and professional!

Happy Selling!

Get our best WooCommerce advice!

Delivered directly to your inbox

Your email is 100% private. We hate spam too. Powered by ConvertKit

Published by Daniel Espinoza

Daniel has been building ecommerce plugins and sites since 2007. He built the first commercial plugin for WooCommerce in 2011 and has built dozens of plugins since.

9 Comments

  1. Can you help me to add multipul post thumbnail in product seciton of woocommerce. I would like to add another placeholder as featured image and product gallery image . SO I can upload two thumbnail and two galleries for same product.

  2. You suggest using, “woocommerce_placeholder_img_src” but that function is depreciated no?

    https://docs.woocommerce.com/wc-apidocs/function-woocommerce_placeholder_img_src.html

    • Hi Chris, the `wocommerce_placeholder_img_src()` function is deprecated, but I’m not using that.

      The snippet is hooking into the `woocommerce_placeholder_img` filter which is still used by the function that replaced the deprecated function. Here’s the location in the WooCommerce source.

  3. Nice site Daniel! Found it through a Google search. Question: I’m wondering if it’s possible to have a different placeholder thumbnail image for the list vs the actual product page?

    • Thanks Aaron! There’s not a simple way to know where the placeholder image is being requested from. Inside the `growdev_custom_woocommerce_placeholder` function you could possibly use is_archive() and is_page() to figure out the type of page the customer is on.

  4. Hi this was great – but I am looking for a way to hide the category image when displayed as a sub category, for example I have an image for a car brand say Ford, but no images for the model categories which are its children.

  5. I feel elated for this post, I have been searching for this a long time, cos on my website, I don’t use images cos they are not required.
    Once more thanks.

  6. Works Perfectly! THANKSSSSS

  7. Thanks, for this piece of code. Exactly what I needed. Worked perfectly. Thank You!

Comments are closed.