WooCommerce Checkoutページのテーブルに項目追加【プラグインなし】

- WooCommerce -
2023.12.18
woocommerce/ウーコマース

WooCommerceのCheckoutページのこの位置↓などに、販売者側から購入者へ向けた注意書き定型文を付け加えたいときのプラグインなしカスタマイズ方法について。

WooCommerce Checkoutページのテーブルに項目を追加【プラグインなし】

WooCommerce Checkoutページのテーブルに項目を追加【プラグインなし】

Totalの下にテーブル行を追加

以下、functions.phpへ貼り付ければOK。

functions.phpfunction add_text_to_checkout() {   
    echo '<tr><th>Note</th><td>★テキスト★</td></tr>';
}
add_action( 'woocommerce_review_order_after_order_total', 'add_text_to_checkout', 9999 ); 

その他の間にテーブル行を挿入したい場合

Totalの下にしか追加できないわけではなく、以下のように既存行の間に挿入したい場合、

WooCommerce Checkoutページのテーブルに項目を追加【プラグインなし】

以下4行目のフック名を変えることで挿入場所を操作できます。

functions.phpfunction add_text_to_checkout() {   
    echo '<tr><th>Note</th><td>★テキスト★</td></tr>';
}
add_action( '★woocommerce_review_order_after_order_total★', 'add_text_to_checkout', 9999 ); 

▼フック

  • woocommerce_checkout_before_order_review
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_after_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_shipping
  • woocommerce_review_order_before_order_total

場所によって、挿入するHTMLタグが<tr>、<th>では表示がおかしくなる可能性があります。

適宜サイトに合わせてHTMLタグを修正してください。

以下サイトが、見た目でよく分かる例が載っているので参考になります。

参考businessbloomer.com: WooCommerce Visual Hook Guide: Checkout Page

↑TOP