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

概要

woocommerce_loop_add_to_cart_link は、WooCommerce プラグインで使用されるフィルターフックで、商品リストループ内で「カートに追加」ボタンの出力をカスタマイズするために使用されます。このフィルターを使うことで、ボタンのHTML構造を変更したり、特定の条件に基づいてボタンを表示・非表示にすることができます。以下は、このフィルターがよく使われるシチュエーションの例です。

1. ボタンのテキストをカスタマイズ
2. 特定の条件に基づいたスタイルの変更
3. ボタンのリンク先を変更
4. 在庫状況に応じた表示の変更
5. カートに追加する際のアニメーションやエフェクトの追加
6. ボタンの追加情報の表示（例：価格情報など）

構文

add_filter('woocommerce_loop_add_to_cart_link', 'your_custom_function', 10, 2);

パラメータ

• $link : 現在の「カートに追加」ボタンのHTML。
• $product : WooCommerceの商品オブジェクト。

戻り値

• カスタマイズされた「カートに追加」ボタンのHTML。

使用可能なバージョン

• WooCommerce バージョン：3.0以降
• WordPress バージョン：4.0以降

サンプルコード

サンプル1: ボタンテキストをカスタマイズ

このサンプルは、カートに追加ボタンのテキストを「今すぐ購入」に変更します。

add_filter('woocommerce_loop_add_to_cart_link', 'custom_add_to_cart_text', 10, 2);

function custom_add_to_cart_text($link, $product) {
    return str_replace('Add to cart', '今すぐ購入', $link);
}

引用元: https://example.com

サンプル2: ボタンリンクを変更

ボタンのリンク先を特定のページ（例：商品詳細ページ）に変更します。

add_filter('woocommerce_loop_add_to_cart_link', 'custom_add_to_cart_link', 10, 2);

function custom_add_to_cart_link($link, $product) {
    return str_replace($product->get_permalink(), '/your-custom-page', $link);
}

引用元: https://example.com

サンプル3: 在庫状況に応じてボタンを非表示

在庫がない場合、ボタンを非表示にします。

add_filter('woocommerce_loop_add_to_cart_link', 'hide_add_to_cart_if_out_of_stock', 10, 2);

function hide_add_to_cart_if_out_of_stock($link, $product) {
    if (!$product->is_in_stock()) {
        return ''; // ボタンを非表示
    }
    return $link;
}

引用元: https://example.com

サンプル4: ボタンにクラスを追加

追加のCSSクラスをボタンに付与し、スタイルを変更します。

add_filter('woocommerce_loop_add_to_cart_link', 'add_custom_class_to_cart_button', 10, 2);

function add_custom_class_to_cart_button($link, $product) {
    return str_replace('class="button', 'class="button custom-class', $link);
}

引用元: https://example.com

サンプル5: ボタンに価格を追加

カートに追加ボタンの横に価格情報を追加します。

add_filter('woocommerce_loop_add_to_cart_link', 'add_price_to_button', 10, 2);

function add_price_to_button($link, $product) {
    $price = $product->get_price_html();
    return $link . ' ' . $price; // ボタンの隣に価格を表示
}

引用元: https://example.com

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

アクション	使用例
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