WooCommerce：関連商品の件数や好きなところに表示する方法
WooCommerceで表示される関連商品の表示件数の変更や非表示、任意の場所に関連商品を表示させる方法です。関連商品の表示に便利なプラグインもご紹介します。
WooCommerceは同じカテゴリー、または同じタグの商品を関連商品として自動的に表示してくれます。
関連商品を表示しない方法
フックで非表示にします。functions.phpに下記を追記するだけで、関連商品は表示されなくなります。
functions.php
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );関連商品の表示件数を変更する方法
テーマの「カスタマイズ」で、1カラムの商品表示数を設定すると、関連商品もその設定に準じて表示されます。
「商品一覧は4件表示して、関連商品は8件したい！」という場合もあります。
フックで表示する件数を変更します。functions.phpに下記を追記します。
functions.php
function woo_related_products_limit() { global $product; $args['posts_per_page'] = 6; return $args;}add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args', 20 ); function jk_related_products_args( $args ) { $args['posts_per_page'] = 4; // 4件表示する $args['columns'] = 2; // 1行あたりに表示する件数 return $args;}サンプルでは、1行（カラム）に商品2件を表示させるカスタマイズになります。
アップセルの機能を使った方法
関連商品を非表示にして「アップセル」を設定することで、好きな商品を関連商品として表示させることができます。
商品投稿画面のアップセルに商品を設定すれば、関連商品と同じように表示されます。
関連商品を好きな場所に表示する方法
カテゴリーとタグに基づいてランダムに表示させます。
（WooCommerceの関連商品もカテゴリーとタグに基づいて表示されています）
関連商品を表示させる箇所に下記を記載します。
PHP
<?php woocommerce_related_products( $args ); ?>functions.phpには下記を追記します。
functions.php
function woocommerce_related_products( $args = array() ) {
global $product;
if ( ! $product ) {
return;
}
$defaults = array(
'posts_per_page' => 2, //表示件数
'columns' => 2,
'orderby' => 'rand',
'order' => 'desc',
);
$args = wp_parse_args( $args, $defaults );
$args['related_products'] = array_filter( array_map( 'wc_get_product', wc_get_related_products( $product->get_id(), $args['posts_per_page'], $product->get_upsell_ids() ) ), 'wc_products_array_filter_visible' );
$args['related_products'] = wc_products_array_orderby( $args['related_products'], $args['orderby'], $args['order'] );
wc_set_loop_prop( 'name', 'related' );
wc_set_loop_prop( 'columns', apply_filters( 'woocommerce_related_products_columns', $args['columns'] ) );
wc_get_template( 'single-product/related.php', $args );
}
出力にはWooCommerceのてプレートディレクトリ「single-product」のrelated.phpが利用されています。
出力されるhtmlなどをカスタマイズしたい場合は「related.php」をカスタマイズします。
関連商品の表示でお薦めのプラグイン
WooCommerce Custom Related Products
WooCommerceの関連商品は同一のカテゴリーやタグに属する商品を表示します。そのため、例えば食パンの関連商品には、同じカテゴリーであるパンが表示されます。
このプラグインを使うことで、関連商品を任意で設定することができます。
食パンの関連商品には、バターやジャム、ブレッドナイフなど、任意の商品を表示させることができます。
１回の購入で複数の商品を購入する人が多いECサイトにお薦めです。
Woo Related Products
関連商品をカルーセルで表示することができます。多くの関連商品をコンパクトに表示させたい時に使えるプラグインです。
関連商品はカテゴリー、タグに基づいて表示されます。
