ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

WooCommerce:関連商品の件数や好きなところに表示する方法

WooCommerceで表示される関連商品の表示件数の変更や非表示、任意の場所に関連商品を表示させる方法です。

関連商品を表示しない方法

フックで非表示にします。functions.phpに下記を追記するだけで、関連商品は表示されなくなります。

functions.php
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

関連商品の表示件数を変更する方法

フックで表示する件数を変更します。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;
}

WoocCommerceのドキュメンを探るとスニペットとして紹介されています。

関連商品を好きな場所に表示する方法

カテゴリーとタグに基づいてランダムに表示させます。
(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の関連商品は同一のカテゴリーやタグに属する商品を表示します。そのため、例えば食パンの関連商品には、同じカテゴリーであるパンが表示されます。

このプラグインを使うことで、関連商品を任意で設定することができます。

食パンの関連商品には、バターやジャム、ブレッドナイフなど、任意の商品を表示させることができます。

1回の購入で複数の商品を購入する人が多いECサイトにお薦めです。

Woo Related Products

関連商品をカルーセルで表示することができます。多くの関連商品をコンパクトに表示させたい時に使えるプラグインです。

関連商品はカテゴリー、タグに基づいて表示されます。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ