【WooCommerceカスタマイズ】アクションとフィルター一覧
WordressのプラグインであるWooCommerceは超高機能なECサイト構築プラグインとして有名です。無料で使えるうえに自由にカスタマイズすることで、自在にECサイトを実現できます。
ただ、世界的には有名なプラグインではあるものの日本での普及数が多くないため、日本人にとってカスタマイズのハードルがけっこう高めです。
そこで今回はWooCommerceのアクションとフィルターを機能ごとに紹介いたします。
woocommerce 2022年最新版バージョン5.9.0で確認
- 1. 注文完了時の処理追加 checkout
- 1.1. 注文完了時のアクションフック利用方法
- 1.1.1. woocommerce_checkout_order_created
- 1.1.2. woocommerce_checkout_create_order_line_item
- 1.1.3. woocommerce_checkout_order_processed
- 2. 商品一覧 Product
- 2.1. 商品一覧へのアクションフック 画面イメージ
- 3. 商品詳細 single-product
- 3.1. 商品詳細へのアクションフック 画面イメージ
- 4. カート cart
- 4.1. カート画面へのアクションフック 画面イメージ
- 5. カート合計 cart-total
- 6. 支払い選択 payment
- 6.1. 支払い選択アクションフック 画面イメージ
- 6.2. 支払い選択アクションフック 利用方法
- 6.2.1. woocommerce_account_payment_methods_column_method
- 6.2.2. woocommerce_account_payment_methods_column_expires
- 6.2.3. woocommerce_account_payment_methods_column_actions
- 7. 送料 shipping
- 7.1. 送料欄アクションフック 画面イメージ
- 8. チェックアウトフォーム checkout
- 8.1. チェックアウトフォームアクションフック 画面イメージ
- 9. ログインフォーム login
- 9.1. ログインフォームへのアクションフック 画面イメージ
- 10. MyAccountナビゲーション navigation
- 10.1. MyAccountへのアクションフック 画面イメージ
- 11. MyAccount注文明細 order-detail
- 11.1. 注文明細へのアクションフック 画面イメージ
- 11.2. 注文明細フィルターフック 利用方法
- 12. メール mail
- 13. まとめ
注文完了時の処理追加 checkout
注文完了時にアクションを追加し、処理を追加することができます。
名称 | 機能詳細 |
---|---|
woocommerce_checkout_order_created | パラメータに注文情報の一覧を受け取り処理を追加 |
woocommerce_checkout_create_order_line_item | パラメータに注文商品一覧を受け取り処理を追加 |
woocommerce_checkout_order_processed | パラメータに注文IDを受け取り処理を追加 166 |
woocommerce注文完了時のアクションフック利用方法
woocommerce_checkout_order_created
注文完了時に注文情報をパラメータとして受け取り、処理を追加することができます。
受け取るパラメータは下記の通りです。
{ "id": 182, "parent_id": 0, "status": "", "currency": "JPY", "version": "5.9.0", "prices_include_tax": true, "date_created": { "date": "2022-05-30 23:38:49.000000", "timezone_type": 3, "timezone": "Asia/Tokyo" }, "date_modified": null, "discount_total": "0", "discount_tax": "0", "shipping_total": "0", "shipping_tax": "0", "cart_tax": "0", "total": "5185", "total_tax": "0", "customer_id": 1, "order_key": "wc_order_EZMjhEyIFH81j", "billing": { "first_name": "太郎", "last_name": "鈴木", "company": "", "address_1": "1-1", "address_2": "", "city": "品川", "state": "JP06", "postcode": "100-0001", "country": "JP", "email": "test@test.com", "phone": "09000000000" }, "shipping": { "first_name": "太郎", "last_name": "鈴木", "company": "", "address_1": "1-1", "address_2": "", "city": "品川", "state": "JP06", "postcode": "100-0001", "country": "JP", "phone": "" }, "payment_method": "cod", "payment_method_title": "代金引換", "transaction_id": "", "customer_ip_address": "::1", "customer_user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36", "created_via": "checkout", "customer_note": "", "date_completed": null, "date_paid": null, "cart_hash": "90b36ecc116ebb0ccfee43fbd6826c21", "number": "182", "meta_data": [ { "key": "is_vat_exempt", "value": "no", "id": 5119 } ], "line_items": { "294": { "legacy_values": { "key": "6512bd43d9caa6e02c990b0a82652dca", "product_id": 11, "variation_id": 0, "variation": [], "quantity": 3, "data_hash": "b5c1d5ca8bae6d4896cf1807cdf763f0", "line_tax_data": { "subtotal": { "1": 0 }, "total": { "1": 0 } }, "line_subtotal": 135, "line_subtotal_tax": 0, "line_total": 135, "line_tax": 0, "data": [] }, "legacy_cart_item_key": "6512bd43d9caa6e02c990b0a82652dca" }, "295": { "legacy_values": { "key": "006f52e9102a8d3be2fe5614f42ba989", "product_id": 168, "variation_id": 0, "variation": [], "quantity": 5, "data_hash": "b5c1d5ca8bae6d4896cf1807cdf763f0", "line_tax_data": { "subtotal": { "1": 0 }, "total": { "1": 0 } }, "line_subtotal": 5050, "line_subtotal_tax": 0, "line_total": 5050, "line_tax": 0, "data": [] }, "legacy_cart_item_key": "006f52e9102a8d3be2fe5614f42ba989" } }, "tax_lines": { "297": [] }, "shipping_lines": { "296": { "legacy_package_key": 0 } }, "fee_lines": [], "coupon_lines": [] }
woocommerce_checkout_create_order_line_item
woocommerce_checkout_order_processed
WooCommerce商品一覧 Product
商品一覧ページにコメントなどを追加することできます。form templatesへのアクション追加です。
名称 | 機能詳細 |
---|---|
woocommerce_before_shop_loop_item | 商品一覧上部にアクションを追加 |
woocommerce_before_shop_loop_item_title | 商品名上部にアクションを追加 |
woocommerce_shop_loop_item_title | 商品名下部にアクションを追加 |
woocommerce_after_shop_loop_item_title | 商品一覧下部にアクションを追加 |
商品一覧へのアクションフック 画面イメージ
商品一覧画面に追加できるアクションフックの位置は下記の通りです。
商品詳細 single-product
商品詳細ページにコメントなどを追加することできます。form templatesへのアクション追加です。
名称 | 機能詳細 |
---|---|
woocommerce_before_single_product | 商品詳細画面上部へのアクション追加 |
woocommerce_before_single_product_summary | (該当箇所見つからず) |
woocommerce_single_product_summary | 商品詳細説明上部へのアクション追加 |
woocommerce_after_single_product_summary | 商品詳細下部へのアクション追加 |
商品詳細へのアクションフック 画面イメージ
商品詳細画面に追加できるアクションフックの位置は下記の通りです。
カート cart
カートページにコメントなどを追加することができます。
名称 | 機能詳細 |
---|---|
woocommerce_before_cart | カート画面最上部へのアクション追加 |
woocommerce_before_cart_table | カートのテーブル上部へのアクション追加 |
woocommerce_before_cart_contents | カートコンテンツ上部へのアクション追加 |
woocommerce_after_cart_item_name | カート内商品名へのアクション追加 |
woocommerce_cart_contents | カートコンテンツへのアクション追加 |
woocommerce_cart_coupon | クーポン表示部分へのアクション追加 |
woocommerce_cart_actions | カート内のアクションボタンへのアクション追加 |
woocommerce_after_cart_contents | カートコンテンツ下部へのアクション追加 |
woocommerce_after_cart_table | カートのテーブル下部へのアクション追加 |
woocommerce_before_cart_collaterals | collaterals上部へのアクション追加 |
woocommerce_cart_collaterals | collaterals下部へのアクション追加 |
woocommerce_after_cart | カート画面最下部へのアクション追加 |
カート画面へのアクションフック 画面イメージ
カート画面にアクションフックを追加した場合の位置は下記の通りです。
名称 | 機能詳細 |
---|---|
woocommerce_cart_item_product | 商品に関する情報一式を取得 名称などのプロパティを持ったオブジェクトを取得可能 |
woocommerce_cart_item_product_id | 商品IDを取得可能 |
woocommerce_cart_item_permalink | 商品リンクを取得可能 |
woocommerce_cart_item_thumbnail | 商品サムネイル画像を取得可能 |
woocommerce_cart_item_name | 商品名を取得可能 |
woocommerce_cart_item_backorder_notification | 商品のバックオーダー通知内容を取得可能 |
woocommerce_cart_item_price | 商品価格を取得可能 |
woocommerce_cart_item_quantity | 商品数を取得可能 |
woocommerce_cart_item_subtotal | 商品合計数を取得可能 |
カート合計 cart-total
カート合計のページにコメントなどを追加することができます。
アクション
名称 | 機能詳細 |
---|---|
woocommerce_before_cart_totals | カート合計上部へのアクション追加 |
woocommerce_cart_totals_before_shipping | カートの送料合計上部へのアクション追加 |
woocommerce_cart_totals_after_shipping | カートの送料合計下部へのアクション追加 |
woocommerce_cart_totals_before_order_total | 合計欄上部へのアクション追加 |
woocommerce_cart_totals_after_order_total | 合計欄下部へのアクション追加 |
woocommerce_proceed_to_checkout | 購入ボタン |
woocommerce_after_cart_totals | カート合計下部へのアクション追加 |
カート合計ページにアクションフックを追加した場合の位置は下記の通りです。
支払い選択 payment
支払い選択画面にコメントなどを追加することができます。
名称 | 機能詳細 |
---|---|
woocommerce_before_account_payment_methods | MyAccountの決済画面上部へのアクション追加 |
woocommerce_account_payment_methods_column_method,$method | MyAccountの決済方法欄へのアクション追加 |
woocommerce_account_payment_methods_column_expires,$method | MyAccountの有効期限欄へのアクション追加 |
woocommerce_account_payment_methods_column_actions,$method | MyAccountのアクション欄へのアクション追加 |
woocommerce_after_account_payment_methods | MyAccountの決済画面下部へのアクション追加 |
支払い選択アクションフック 画面イメージ
支払い選択画面にアクションフックを追加した場合のイメージは下記の通りになります。
支払い選択アクションフック 利用方法
パラーメータを受け渡す機能の使い方が難しいので、簡単にサンプルをご提示
woocommerce_account_payment_methods_column_method
function my_woocommerce_account_payment_methods_column_expires($method){ echo '<b>!!!!expires!!!!</b><br>'; echo $method['expires']; } add_filter('woocommerce_account_payment_methods_column_expires','my_woocommerce_account_payment_methods_column_expires');
woocommerce_account_payment_methods_column_expires
function my_woocommerce_account_payment_methods_column_actions($method){ echo '<b>!!!!actions!!!!</b><br>'; echo $method['actions']; } add_filter('woocommerce_account_payment_methods_column_actions','my_woocommerce_account_payment_methods_column_actions');
woocommerce_account_payment_methods_column_actions
function my_woocommerce_after_account_payment_methods(){ echo '<b>!!!!woocommerce_after_account_payment_methods!!!!</b>'; } add_filter('woocommerce_after_account_payment_methods','my_woocommerce_after_account_payment_methods');
送料 shipping
カート内の送料表示部分へコメントなどを追加することができます。
名称 | 機能詳細 |
---|---|
woocommerce_before_shipping_calculator | 送料計算欄上部へのアクション追加 |
woocommerce_after_shipping_calculator | 送料計算欄下部へのアクション追加 |
送料欄アクションフック 画面イメージ
名称 | 機能詳細 |
---|---|
woocommerce_shipping_calculator_enable_country | country設定での送料計算を有効にするか |
woocommerce_shipping_calculator_enable_state | state設定での送料計算を有効にするか |
woocommerce_shipping_calculator_enable_city | city設定での送料計算を有効にするか |
woocommerce_shipping_calculator_enable_postcode | postcode設定での送料計算を有効にするか |
チェックアウトフォーム checkout
カート内のチェックアウトフォーム全体に対してコメントなどを追加することができます。
名称 | 機能詳細 |
---|---|
woocommerce_before_checkout_form | チェックアウトフォーム最上部へのアクション追加 |
woocommerce_checkout_before_customer_details | 顧客情報上部へのアクション追加 |
woocommerce_checkout_billing | 請求先欄へのアクション追加 |
woocommerce_checkout_shipping | 配送先欄へのアクション追加 |
woocommerce_checkout_after_customer_details | 顧客情報下部へのアクション追加 |
woocommerce_checkout_before_order_review_heading | 注文内容確認ヘッダ部へのアクション追加 |
woocommerce_checkout_before_order_review | 注文内容確認上部へのアクション追加 |
woocommerce_checkout_order_review | 注文内容確認欄へのアクション追加 |
woocommerce_checkout_after_order_review | 注文内容確認下部へのアクション追加 |
woocommerce_after_checkout_form | チェックアウトフォーム最下部へのアクション追加 |
チェックアウトフォームアクションフック 画面イメージ
アクションフックを追加した場合のイメージは下記の通りです。
請求情報詳細の前や「注文する」ボタンの下部など、様々な箇所にコメントを追加することができます。
名称 | 機能詳細 |
---|---|
woocommerce_checkout_must_be_logged_in_message | ログイン誘導メッセージの取得 |
WooCommerceログインフォーム login
ログインフォーム内の各所にコメントなどを追加することができます。
名称 | 機能詳細 |
---|---|
woocommerce_login_form_start | ログインフォーム上部へのアクション追加 |
woocommerce_login_form | ログイン欄へのアクション追加 |
woocommerce_login_form_end | ログインフォーム下部へのアクション追加 |
ログインフォームへのアクションフック 画面イメージ
アクションフックを追加した場合のイメージがこちら。
マイアカウントページの上下にコメントなどを追加することができます。form templatesへのアクション追加です。
名称 | 機能詳細 |
---|---|
woocommerce_before_account_navigation | MyAccountメニュー画面上部へのアクション追加 |
woocommerce_after_account_navigation | MyAccountメニュー画面下部へのアクション追加 |
MyAccountへのアクションフック 画面イメージ
アクションフックを追加した場合の位置などは下記の通りになります。
MyAccount注文明細 order-detail
注文明細ページにコメントなどを追加することができます。
名称 | 機能詳細 |
---|---|
woocommerce_order_details_before_order_table | MyAccount注文明細最上部へのアクション追加 |
woocommerce_order_details_before_order_table_items | 注文明細上部へのアクション追加 |
woocommerce_order_details_after_order_table_items | 注文明細欄へのアクション追加 |
woocommerce_order_details_after_order_table | 注文明細下部へのアクション追加 |
woocommerce_after_order_details | MyAccount注文明細最下部へのアクション追加 |
注文明細へのアクションフック 画面イメージ
アクションフックを追加することにより、イメージの位置にそれぞれコメントを追加することできます。
名称 | 機能詳細 |
---|---|
woocommerce_purchase_order_item_types | 注文明細のタイプを取得 |
woocommerce_purchase_note_order_statuses | 注文明細のステータスを取得 |
注文明細フィルターフック 利用方法
それぞれ下記の情報が出力されます。
function my_woocommerce_purchase_order_item_types($data){ var_dump($data); } add_filter('woocommerce_purchase_order_item_types','my_woocommerce_purchase_order_item_types'); //string(9) "line_item" function my_woocommerce_purchase_note_order_statuses($data){ var_dump($data); } add_filter('woocommerce_purchase_note_order_statuses','my_woocommerce_purchase_note_order_statuses'); //array(2) { [0]=> string(9) "completed" [1]=> string(10) "processing" }
メール mail
Woocommercceから送信する各種のメールについて、アクションフックにて処理を追加することができます。
メールヘッダのアクションフックを利用し、Reply-toヘッダを書き換えるなどの用途で利用します。
名称 | 機能詳細 |
---|---|
woocommerce_email_header | メールヘッダへのアクション追加 |
woocommerce_email_footer | メールフッタへのアクション追加 |
woocommerce_email_order_details | メール本文注文明細へのアクション追加 |
woocommerce_email_order_meta | メール本文注文属性へのアクション追加 |
woocommerce_email_customer_details | メール本文顧客詳細へのアクション追加 |
woocommerce_low_stock_notification | 在庫僅少メール通知時のアクション追加 |
woocommerce_no_stock_notification | 在庫切れメール通知時のアクション追加 |
woocommerce_product_on_backorder_notification | バックオーダー通知時のアクション追加 |
woocommerce_created_customer_notification | 顧客通知メールへのアクション追加 |
woocommerce_email_footer_text | メールフッタのサイトタイトル欄へのアクション追加 |
woocommerce_email | メール送信時のアクション追加 |
フィルターフックを利用してメールの本文などを取得することができます。フックした本文をそのまま書き換えることもできます。
名称 | 機能詳細 |
---|---|
woocommerce_email_headers | メールヘッダの取得 |
woocommerce_email_order_meta_fields | 注文属性欄の取得 |
woocommerce_email_order_meta_keys | 注文属性欄項目取得 |
woocommerce_email_customer_details_fields | 顧客詳細欄のデータ取得 |
woocommerce_email_subject_low_stock | 在庫僅少メールの件名取得 |
woocommerce_email_content_low_stock | 在庫僅少メールの本文取得 |
woocommerce_email_attachments | メール添付情報の取得 |
woocommerce_email_subject_backorder | バックオーダーメールの件名取得 |
woocommerce_email_content_backorder | バックオーダーメールの本文取得 |
woocommerce_email_subject_no_stock | 在庫切れメールの件名取得 |
woocommerce_email_content_no_stock | 在庫切れメールの本文取得 |
WooCommerceアクションフックとフィルターフックでカスタマイズまとめ
WooCommerceで利用できそうなアクションフック・フィルターフックの一覧をご紹介いたしました。
カスタマイズや機能追加する上で本情報が役に立つと思います。
他にもアクションフック・フィルターフックは用意されておりますので、今回ご紹介したもの以外を探してみたい場合は公式サイトをご覧ください。