Snow Monkeyの場合、WooCommerceの商品一覧ページに表示する商品数は、【カスタマイズ】→【WooCommerce】→【商品カタログ】で、24に変更できるようになっている。

テンプレートが1カラムのとき
商品が4つ並んでいると、ちょっと大きいね?

サイドバーがある場合、2〜4商品くらいはちょうどいいけど、1カラムの場合は少し商品サムネイルが大きく感じるので、1行あたりに入れる商品数を5とかにしたい。
ちなみに余談だけど、PCで1行あたり5件にした場合、スマホ表示を考えると、商品一覧ページの商品数は偶数がベストなので、総数として10件(2段?2行)もしくは20件(4段?4行)とかがベターですよね?

で、この件については2種類方法があって、1つ目は「とにかく1行あたりの件数を強制的に変えてしまう」こと。
そして「Snow Monkeyのカスタマイズ画面で表示数を変更できるようにする」ことが2つ目の方法になると思う。
どちらが良いかは運営するのが誰か?にもよると思うので、状況に応じて使い分けよう。

強制的に1行あたりの商品数を変更

これは検索をかければわかるけど、同じようなコードが複数紹介されている。

add_filter(
	'loop_shop_columns', 
	function ( $loop_columns ) {
	if (!function_exists('loop_columns')) {
    return 5;
  	}	
},
999
);

loop_shop_columnsというフィルターフックを使って、強制的に1行(カラム)あたりの表示件数を変更することができる。
当然のことながら、loop_shop_columnsが適用されている箇所すべてが対象になるので、異なる数字にしたい場合は、条件分岐させれば異なる件数で表示させることも可能。

ただし、このコードを書くとSnow Monkey【カスタマイズ】で行ごとの商品数、ページあたりの行数の設定は無効(非表示)になるので注意が必要。

Snow Monkeyで「行ごとの商品数」の数値を4以上に対応する

Snow Monkeyの【カスタマイズ】でWooCommerce用の設定ファイルが以下にあった。

snow-monkey
└app
 └setup
  └dependency
   └woocommerce.php

woocommerce.php内のこれ

add_action(
	'after_setup_theme',
	function() {
		add_theme_support(
			'woocommerce',
			[
				'product_grid' => [
					'default_rows'    => 3,
					'min_rows'        => 2,
					'max_rows'        => 8,
					'default_columns' => 3,
					'min_columns'     => 2,
					'max_columns'     => 4,
				],
			]
		);

		add_theme_support( 'wc-product-gallery-zoom' );
		add_theme_support( 'wc-product-gallery-lightbox' );
		add_theme_support( 'wc-product-gallery-slider' );
	}
);

このコードをごっそりmy-snow-monkey.phpに貼りつけて、以下のmax_columns5に変えてあげれば、【カスタマイズ】で4までしか設定できなかった数字が5も適用されるようになる。

// 行ごとの商品数
'min_columns'     => 2,
'max_columns'     => 4,

ついでにページあたりの行数を変更したければ、以下の数値を変更すればいい。

// ページあたりの行数
'min_rows'        => 2,
'max_rows'        => 8,

また、上のコードには、以前紹介した「商品画像の虫めがね機能」についての記述があるので、機能を使用しないものだけをremoveしちゃえばいいので、この記事で書いたコードは不要になる。

add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );

↓

remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
remove_theme_support( 'wc-product-gallery-slider' );

ちなみにWooCommerceで商品が並ぶのは、商品一覧や商品カテゴリーだけではない。

  • 関連商品
  • アップセル
  • クロスセル

なども1行(1カラム)あたりの商品数が設定されているので、変更したい場合は別の記述が必要になる。
それはまた別の機会にでも。それでは今日はこのへんで!

この記事を書いた人

GONSY

印刷会社のグラフィックデザイナーだった1998年に「会社案内」のHTML化をきっかけにWebの世界へ。
WordPressはMEから使っているけどプログラムスキルは一向に上がらない。WooCommerceは2018年から。忘れっぽくなってきたので、試したこと、実装方法を記録するためにブログをスタート。
最近、WordPress、WooCommerce、Snow Monkeyがおもしろいと感じるおじさん。