プラグインWooCommerceのwoocommerce_output_related_products_argsフィルタの使用方法・解説

概要

woocommerce_output_related_products_args フィルタは、WooCommerceの関連商品表示に関する引数を変更するためのフックです。このフィルタを使用することで、関連商品の表示スタイルや数、条件をカスタマイズすることができます。主に以下のような機能を実装する際に利用されます。

1. 表示する関連商品の数を変更
2. 関連商品の表示順を変更
3. 特定のカテゴリーの製品のみを関連商品として表示
4. 元の商品の価格や在庫状況に基づいて関連商品をフィルタリング
5. テーマのスタイルに合わせて関連商品のHTML構造を変更
6. 商品の特定の属性に基づいて関連商品を選択

構文

add_filter('woocommerce_output_related_products_args', 'custom_related_products_args');

パラメータ

• $args: 関連商品の出力に使用される引数の配列。
  • posts_per_page: 表示する関連商品の数。
  • columns: 列数。
  • orderby: ソート順（評価やタイトルなど科目）。
  • order: 昇順または降順。

戻り値

変更された引数の配列。

使用可能なプラグインWooCommerceのバージョン

WooCommerce 2.1.0 以降

ワードプレスのバージョン

WordPress 4.0 以降

この関数のアクションでの使用可能性

アクション	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプル1：関連商品の数を変更する

add_filter('woocommerce_output_related_products_args', 'custom_related_products_count');
function custom_related_products_count($args) {
    $args['posts_per_page'] = 6; // 表示する関連商品の数を6に設定
    return $args;
}

このコードは、関連商品の表示数を3から6に増やします。

引用元: https://www.example.com

サンプル2：関連商品の並び順を変更する

add_filter('woocommerce_output_related_products_args', 'custom_related_products_order');
function custom_related_products_order($args) {
    $args['orderby'] = 'date'; // 新しい順に並び替え
    $args['order'] = 'DESC';
    return $args;
}

このコードは、関連商品を最新のものから表示させるように変更しています。

引用元: https://www.example.com

サンプル3：特定のカテゴリーの商品を関連商品として表示する

add_filter('woocommerce_output_related_products_args', 'custom_related_products_category');
function custom_related_products_category($args) {
    $args['tax_query'] = array(
        array(
            'taxonomy' => 'product_cat',
            'field'    => 'slug',
            'terms'    => '特定のカテゴリー', // 表示したいカテゴリーのスラッグ
        ),
    );
    return $args;
}

このコードでは、特定のカテゴリーの商品のみを関連商品として表示します。

引用元: https://www.example.com

サンプル4：特定のタグを持つ商品を関連商品として表示する

add_filter('woocommerce_output_related_products_args', 'custom_related_products_tag');
function custom_related_products_tag($args) {
    $args['tax_query'] = array(
        array(
            'taxonomy' => 'product_tag',
            'field'    => 'slug',
            'terms'    => '特定のタグ', // 表示したいタグのスラッグ
        ),
    );
    return $args;
}

このコードにより、特定のタグを持つ商品だけを関連商品として表示することができます。

引用元: https://www.example.com

サンプル5：CSSクラスを追加して関連商品をスタイリングする

add_filter('woocommerce_related_products_columns', 'custom_related_products_columns');
function custom_related_products_columns($columns) {
    return 3; // 3列で表示
}

add_filter('post_class', 'custom_product_classes');
function custom_product_classes($classes) {
    if (is_product()) {
        $classes[] = 'custom-related-product'; // カスタムクラスを追加
    }
    return $classes;
}

このコードは、関連商品のスタイルをカスタマイズするためのCSSクラスを追加します。

引用元: https://www.example.com