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

概要

woocommerce_product_classフィルタは、WooCommerceで商品に関連するHTMLクラスのカスタマイズを行うために使用されます。このフィルタを使用すると、商品リストや商品の詳細ページで表示される商品クラスを変更することができます。これにより、特定の商品のスタイルを調整したり、JavaScriptの操作のために特定のクラスを追加することが可能です。

使用例:

商品のカスタムスタイルを適用するためのクラスの追加
特定のカテゴリーに基づいた商品クラスの変更
商品の属性に応じた特別なマークアップの追加
プラグインによる商品クラスの動的変更
特定の条件下での追加情報の表示
カスタム商品タイプに対するクラスの管理

構文

add_filter( 'woocommerce_product_class', 'custom_product_class', 10, 2 );

パラメータ

$class: 商品クラスの現在の値
$product: 商品オブジェクト

戻り値

変更された商品クラスの文字列

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

WooCommerce: すべてのバージョン
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_product_class', 'add_category_class', 10, 2 );
function add_category_class( $class, $product ) {
    if ( has_term( '特別カテゴリー', 'product_cat', $product->get_id() ) ) {
        $class .= ' special-category';
    }
    return $class;
}

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

サンプル2: カスタム属性に基づくスタイルクラスの追加

ここでは、商品属性に基づいてスタイルのためのクラスを追加しています。

add_filter( 'woocommerce_product_class', 'add_attribute_class', 10, 2 );
function add_attribute_class( $class, $product ) {
    if ( $product->get_attribute( 'color' ) === 'red' ) {
        $class .= ' has-red-color';
    }
    return $class;
}

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

サンプル3: 複数のクラスの追加

このコードでは、特定の商品に対して複数のクラスを追加しています。

add_filter( 'woocommerce_product_class', 'add_multiple_classes', 10, 2 );
function add_multiple_classes( $class, $product ) {
    $class .= ' custom-product-class another-class';
    return $class;
}

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

サンプル4: ユーザーのロールに基づくクラスの動的変更

このサンプルでは、現在のユーザーのロールに応じてクラスを変更しています。

add_filter( 'woocommerce_product_class', 'user_role_based_class', 10, 2 );
function user_role_based_class( $class, $product ) {
    if ( current_user_can( 'administrator' ) ) {
        $class .= ' admin-product';
    }
    return $class;
}

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

サンプル5: 商品が特定のステータスの場合のクラス追加

このコードは、商品のステータスが「在庫あり」の場合に特別なクラスを追加しています。

add_filter( 'woocommerce_product_class', 'stock_status_based_class', 10, 2 );
function stock_status_based_class( $class, $product ) {
    if ( $product->is_in_stock() ) {
        $class .= ' in-stock';
    }
    return $class;
}

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

概要