Change WooCommerce Default Placeholder Image

change-woocommerce-placeholder

In this WordPress tutorial we will learn how to replace the default placeholder image (no image) in woocommerce.

What is placeholder image

If you don’t upload any product image then woocommerce will automatically display this placeholder image as default product image.

Where is default placeholder image saved

The default WooCommerce placeholder image is saved at:

1
/wp-content/plugins/woocommerce/assets/images/placeholder.png

Size of default placeholder image is: 398px x 391px

In this WordPress tutorial we will learn how to replace this default placeholder image.

Method One: From WooCommerce Settings

This method is easiest and recommended for all users.
Login in WordPress dashboard and navigate to:
Dashboard WooCommerce Settings Products General

Under option Placeholder image enter the path of your new placeholder image.
woocommerce-product-general

Save. Done!!!

You can also use WordPress media uploader to upload your new placeholder image. After uploading image, copy the image url and paste in WooCommerce settings as explained above.

Dashboard Media Add new

Method Two: Delete and upload default image

The default WooCommerce placeholder image is saved at:

1
/wp-content/plugins/woocommerce/assets/images/placeholder.png

Delete this image and upload your new placeholder image in same directory and rename this new image to placeholder.png

Method Three: Functions.php

If you are a theme developer and wish to ship your own custom WooCommerce placeholder image with your theme, then this is the best method for you. Add following codes in functions.php of your theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * Change the placeholder image
 */

add_filter('woocommerce_placeholder_img_src', 'custom_woocommerce_placeholder_img_src');

function custom_woocommerce_placeholder_img_src( $src ) {
  $upload_dir = wp_upload_dir();
  $uploads = untrailingslashit( $upload_dir['baseurl'] );
  // replace with path to your image
  $src = $uploads . '/2019/10/newplaceholder.jpg';
   
  return $src;
}

In above code, change the value of $src to your new placeholder image path.

Method Four: Using Plugin

There are many plugins which you can use to set the default placeholder image like:
Placeholder Image for WooCommerce

Related Posts

Leave a Reply

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