WooCommerceで商品詳細ページ内フォーム送信後にカートに追加できるようにする

WooCommerceで「ある特定商品は事前に細かな問診を送信後、カートに追加させたい」という要件を満たす必要が生じた時に行ったカスタマイズについて、WordPressプラグインの【ContactForm7】を使用した例をご紹介します。

実装イメージ

何のことはないのですが…
商品詳細情報の下にフォームが設置→問診フォームの送信が成功しないとボタンが活性化されない…というものです。

実装方法は幾つか考えられますが、カートボタンのbuttonタグにdisabled属性を付け外しする方法を採用することにします。

商品詳細ページへのフォーム設置をショートコードで行った後のカスタマイズからまとめていきたいと思います。

カートボタン無効化メッセージを作成する

functions.phpで、以下のようなコードを追加します。

<?php function disabled_cart_button_message() {
	if (is_product() && get_the_id() === {該当する商品ページの投稿ID}) {
		echo '<p class="have-to-interview">※商品説明下部の問診フォームを入力し、問診内容が正常に送信できると下のボタンが押せるようになります</p>';
}}
add_action('woocommerce_before_add_to_cart_form', 'disabled_cart_button_message'); ?>

ifに書いている条件分岐ですが
is_product() → 商品詳細ページ（WooCommerce固有の条件分岐）
get_the_id() → 投稿IDの取得
これで特定の商品詳細ページに限定できます。

アクションフックですが、woocommerceのカートに追加の前に処理を挿めるwoocommerce_before_add_to_cart_formを利用して、ボタンが押せなくなっているので問診に回答して下さいねー、というメッセージをボタンの前に出すようにできます。

ボタンの活性化管理とフォーム送信成功時処理を書く

今回はjQueryを使用した例です。
以下の記述を、特定の商品詳細ページで読み込まれるようにします。

jQuery(function($){
  // カートを無効化
  $('button[name="add-to-cart"]').prop('disabled', true);

  $('.wpcf7').on('wpcf7mailsent', (event) => {
    $('button[name="add-to-cart"]').prop('disabled', false);
    $('.have-to-interview').fadeOut();
  });
});

propメソッドで付け外し・先程functions.phpに書いたメッセージ文をfadeOutメソッドで消す、という至ってシンプルな記述ですが、ポイントはContactForm7のフォーム送信成功時に使用できるフックのwpcf7mailsentを使用してイベントを設定しているところです。

バリデーションに引っ掛かるなどでエラーが生じた際は活性化されないということになりますね。

以上で作業は完了です。
もっと細かくやろうとするなら、カートボタンを押した際に送信成功メッセージの要素が画面内にあるかどうか…などの判定を付け加えてカートへの追加処理の適正化精度を上げるといったことができそうだなと思います。

どんなケースで実装したのか

私の場合は医薬品の販売をするECサイトの構築で、法律に基づいて問診を必要としていたので実装しました。

ほかにも、電子チケット販売サイトで修理サービス受付を販売→事前に症状を知りたい時に…というようなケースでも使えそうでしょうか？

何かのお役に立てて頂ければ幸いです。