WooCommerceで作る通販サイト[表示の変更(上級者向け)]

04テーマ設定WooCommerceを使いこなす


フロントページのアイテムの表示はWooCommerceが制御しています。

MEMO
function.phpを変更(追記)する場合は、function.phpのコピーをとり、テーマファイルにftpでアクセスできる状態で行ってください。
function.phpは、1文字でも間違えると画面が真っ白になり、ダッシュボードにもログインできなくなります。
真っ白になったら、元のfunction.phpをftpでテーマファイル内にあげて上書きしてください。

フロントページのアイテム(商品)表示数を変更

デフォルトではアイテム(商品)数はWordpress[設定→表示設定→1ページに表示する…]で設定した数です。
それを、Wordpressの設定に関わらず(例)「9」にする方法です。

function.phpに追記
// Change your product per page
add_filter( 'loop_shop_per_page', 'woo_shop_per_page' );
function woo_shop_per_page() {
    return 9; // product per page ここで数を指定
}

フロントページでアイテム(商品)が横に幾つ並ぶかを変更

デフォルトでは横に4つ並びます。4カラムです。それを3カラムに変更する方法です。
*3カラムを選んでいるテーマが多いようです。

01-111

function.phpに追記
// Change number or products per row to 3
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
	function loop_columns() {
		return 3; // 3 products per row ここで数を指定
	}
}
}

02-222

MEMO
WooCommerceは、アイテムをリスト(li)で表示させ、クラスにfirstとlastを付けることでカラムのレイアウトを制御しています。
4の倍数毎に付いていたlastのクラスが、3の倍数毎になります。

styls.cssに追記

WooCommerceのCSSが4カラムを想定して、アイテムの大きさを決めているので、それをCSSを上書きして修正します。

03-333

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	margin-right: 2% !important;
	width: 31.3% !important;
}