WooCommerce Custom Placeholder Image for Single Product Page & Category / Archive Pages

Glenn Blog Leave a Comment

Surprisingly WooCommerce Wordpress ECommerce doesn’t directly provide the option to replace the Placeholder Image/Temporary Product Image/Default Product Image, so if you are stuck here’s how to do it.

Add these snippets to your Child Theme functions.php page:-

Woo Commerce Custom Placeholder Image On Single Product Page

/* Woo Commerce Custom Placeholder Image On Single Product page- Replace the image filename/path with your own */
add_action( 'init', 'custom_fix_thumbnail', 10 );
function custom_fix_thumbnail() {
  add_filter('woocommerce_placeholder_img_src', 'custom_woocommerce_placeholder_img_src');
	function custom_woocommerce_placeholder_img_src( $html ) {
		$upload_dir = wp_upload_dir();
		$uploads = untrailingslashit( $upload_dir['baseurl'] );
		$html = $uploads . '/2016/11/placeholder-image.png';
		return $html;
}
}

Woo Commerce Custom Placeholder Image On Archive & Category page

/* Woo Commerce Custom Placeholder Image On Archive & Category page- Replace the image filename/path with your own */
add_action( 'woocommerce_before_shop_loop_item', 'custom_fix_thumbnail_archive_before', 9 );
function custom_fix_thumbnail_archive_before() {
	$url = get_permalink( $product_id );
	if( !has_post_thumbnail( get_the_id() ) ){
		remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
		$upload_dir = wp_upload_dir();
		$uploads = untrailingslashit( $upload_dir['baseurl'] );
		$html = $uploads . '/2016/011/placeholder-image.png';
		echo '<div class="placeholder"><a href="'.$url.'" class="woocommerce-LoopProduct-link"><img src="'.$html.'" class="attachment-entry size-entry wp-post-image"></a>';
	}
}
add_action( 'woocommerce_before_shop_loop_item', 'custom_fix_thumbnail_archive_before', 9 );

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

There are a few other methods out there, but I prefer this approach as you can easily specify the URL to your placeholder image.

About the Author
woo commerce custom placeholder image WooCommerce Custom Placeholder Image for Single Product Page &#038; Category / Archive Pages 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.