WooCommerce でオーバーレイ設定時のヘッダについて

要はヘッダー画像を出力できればいいですよね。ヘッダー画像を操作できるフックがあります。

/**
 * WooCommerce の商品一覧ページで、ページヘッダーを表示
 */
add_filter(
	'snow_monkey_is_output_page_header',
	function( $return ) {
		if ( function_exists( 'is_woocommerce' ) && is_woocommerce() && is_shop() ) {
			return true;
		}
		return $return;
	}
);

/**
 * WooCommerce の商品一覧ページでページヘッダーに表示する画像を指定
 */
add_filter(
	'snow_monkey_pre_page_header_image_url',
	function( $url ) {
		if ( function_exists( 'is_woocommerce' ) && is_woocommerce() && is_shop() ) {
			return '画像の URL';
		}
		return $url;
	}
);

/**
 * WooCommerce の商品一覧ページでページヘッダーにタイトルを表示
 */
add_filter(
	'snow_monkey_is_output_page_header_title',
	function( $return ) {
		if ( function_exists( 'is_woocommerce' ) && is_woocommerce() && is_shop() ) {
			return true;
		}
		return $return;
	}
);

これでとりあえずは表示されると思うのですが、タイトル表示は詳細ページにしか対応していないため、一覧ページでは最初の商品のタイトルが表示されてしまいます…。次のアップデートで一覧ページのときは一覧のタイトルが表示される＆フックでカスタマイズできるようにしたいと思いますので少々お待ちください！

バージョン4.4.25 です

最新版にアップしてみてください！ 4.4.25 あたりからのアップデートはバグ修正のみでテンプレートや CSS をごりごり変えたりしていないので影響はほとんど無いはずです。

v4.4.34 でテストしてみました。

詳細ページで画像が表示されないバグがありましたのでコード修正しました、下記で貼り付けなおしてください。

/**
 * WooCommerce の商品一覧ページで、ページヘッダーを表示
 */
add_filter(
	'snow_monkey_is_output_page_header',
	function( $return ) {
		if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) {
			if ( is_shop() || is_singular( 'product' ) ) {
				return true;
			}
		}
		return $return;
	}
);

/**
 * WooCommerce の商品一覧ページでページヘッダーに表示する画像を指定
 */
add_filter(
	'snow_monkey_pre_page_header_image_url',
	function( $url ) {
		if ( function_exists( 'is_woocommerce' ) && is_woocommerce() && is_shop() ) {
			return '画像の URL';
		}
		return $url;
	}
);

/**
 * WooCommerce の商品一覧ページでページヘッダーにタイトルを表示
 */
add_filter(
	'snow_monkey_is_output_page_header_title',
	function( $return ) {
		if ( function_exists( 'is_woocommerce' ) && is_woocommerce() && is_shop() ) {
			return true;
		}
		return $return;
	}
);

一覧ページで空白が表示される件ですが、上記のコードで return '画像の URL'; としているからではないでしょうか？カテゴリーは商品ページと違って画像を持っておらず、自分で適当な URL を指定しないといけないので　return '画像の URL';　としていたのですが、もしそのまま変更せずにはると存在しない画像 URL を参照することになるので空白が表示されます。デベロッパーツールでみるとこんな感じです。

もしここの URL を変更されていないのでしたら、適当な画像 URL に変更してみてください。