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

Glenn Blog 0 Comments

Surprisingly Woo Commerce 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 Woo Commerce Custom Placeholder Image for Single Product Page & Category / Archive Pages 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and 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.

Leave a Reply

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