WooCommerce チェックアウト ページでカートの詳細を変更する方法

ほとんどの人は、WooCommerce が顧客がチェックアウト ページからカートを更新することを許可していないことを知っているでしょう。 つまり、数量を変更したり、チェックアウト ページから製品を削除したりすることはできません。 顧客はカート ページに戻り、カートを更新してから、チェックアウト ページに再度移動する必要があります。 これにより、顧客は必要なすべての情報を再度入力する必要があります。 これは、顧客、特にゲスト ユーザー (大多数のゲスト ユーザー) にとっては少しイライラさせられます。

この投稿では、WooCommerce のチェックアウト ページでカートを更新する方法について説明します。 この機能は、オフィスでの楽しい金曜日のイベントで開発しました。 Fun Fridaysでは、その人の本業とは関係のないことに 1 日を費やすようにしています。

まず、WooCommerce チェックアウト ページのカート詳細テーブルを見てみましょう。

ここでは、顧客は製品の数量を編集したり削除したりすることはできません。 そのため、顧客がチェックアウト ページを離れることなく、数量を変更して製品を削除する機能を提供したいと考えています。

さぁ、始めよう

この説明をスキップしてストアに機能を実装したい場合は、私が作成したプラグインをダウンロードできます。

1. チェックアウト ページのカート セクションの UI を変更する

「ご注文」テーブルの「製品」列を変更する必要があります。 カート内の各アイテムに「削除」アイコンと「数量セレクター」を追加する必要があります。

これを実現するために、WooCommerce は、各カート項目の製品名行を変更できるフィルターを提供しています: woocommerce_cart_item_name 。

Your order テーブルに表示される選択された数量は、別の WooCommerce フィルターwoocommerce_checkout_cart_item_quantityを使用して変更することもできます。

両方のフィルターを使用し、顧客がチェックアウト ページでカートの詳細を編集できるようにします。 新しいプラグインを作成することで、以下の変更を実装できます。

まず、ご注文テーブルの各アイテムに表示されている数量は必要ありません。 そのため、フィルターを使用して空白の文字列を返し、WooCommerce データを上書きします。

この後、フィルターwoocommerce_cart_item_nameを使用して製品名の行を変更し、数量フィールドを追加し、アイコンを削除します。

ここではis_checkout()関数を使用して、チェックアウト ページのみに変更を適用していることを確認しています。 上記のコード スニペットで説明したように、3 つのステップに分割しました。

ステップ 1: 削除アイコンを追加する
このステップでは、カート内の各アイテムに削除アイコンを追加します。 これは、WooCommerce カートで使用されているものと同じアイコンです。

ここでは、WooCommerce 関数get_remove_url()を使用しました。 各カート項目に $cart_key を渡す必要があります。 したがって、get_remove_url() 関数は、各カート項目を削除するための一意の URL を返します。

ステップ 2: 製品名を追加する
製品名の行を変更しているため、新しいフィールドとともに製品名も行に追加する必要があります。 最初の引数として渡されるフィルター自体から製品名を取得します。 私たちの場合は $product_title です。

WooCommerce ストアの売り上げを伸ばす

「WooCommerce Abandoned Cart Pro が価値の高い商品の売り上げをどれだけ増やしたかを見るのは興味深いことです。私はプラグインが、顧客が購入するかどうかを気にしない価値の低い商品 (食品など) の売り上げを増やすことを期待していましたが、私はこのような大きな購入決定を必要とする製品に違いをもたらすことができることに、さらに驚いています。」 - Katie Keith 氏、Barn2 Media オペレーション ディレクター

ステップ 3: 数量セレクターを追加する
最後に、数量セレクターを追加します。 ここでは WooCommerce 関数woocommerce_quantity_input()を使用します。

関数「input_name」、「input_value」、「max_value」、「min_value」の 4 つのパラメーターを指定する必要があります。

• input_name: 'cart' という名前の配列が含まれます。これには、カート項目キーと数量を渡す必要があります。
• input_value: 製品の選択された数量が含まれます。
• max_value: 商品の最大在庫数になります。
• min_value: 数量セレクターの最小値になります。

上記のすべての手順が完了すると、[チェックアウト] ページの [注文] テーブルに削除ボタンと数量セレクターが表示されます。

ここでは、 if ( is_checkout() ) { condition. 以下の理由により必要です。

商品名列の値 (woocommerce_cart_item_name) を変更するために使用したフィルターは、ストアのカートページでも呼び出されます。 そのため、記述したコードがカート ページの機能を壊さないようにするために、変更がチェックアウト ページにのみ適用されるようにしました。

2. Ajax 呼び出しによるカートの更新

これだけ追加してもうまくいきません。顧客が数量を変更したときに、カートの合計に反映されるようにする必要があります。

数量の変更

カートの合計を変更するには、Ajax 呼び出しが必要です。 そのため、顧客が数量を変更した場合、アクションを実行してカートの合計を変更する必要があります。

ここで、「add_quantity.js」ファイルを Web サイトのフッターにエンキューし、チェックアウト ページにいるときにそれが含まれていることを確認します。

ここで、カートの合計を変更するために ajax を呼び出す関数を Javascript ファイルに追加する必要があります。

上記の JavaScript は、変更されたチェックアウト フォームのデータを渡す ajax を呼び出します。 ただし、数量アイコンをクリックすると呼び出されます。 したがって、数量の変更された値が含まれます。

ここで、変更された数量に応じてカートの合計を変更する ajax の関数を追加する必要があります。

チェックアウト ページで数量を変更すると、上記の関数が呼び出され、カートの合計が変更されます。 関数で WooCommerce 関数を使用しました。

「set_quantity()」、「calculate_totals()」、「woocommerce_cart_totals()」関数を使用して、カートの合計を変更し、チェックアウト ページの [ご注文] テーブルに表示します。

set_quantity() : この関数は、変更された数量をカートに設定します。

変更された数量値を持つ JavaScript 関数からデータを送信したので、その変更された値を使用してカートに設定します。

calculate_totals() : この関数を使用して、カートの合計を再度計算するように指示します。

woocommerce_cart_totals() : この関数は、変更されたカートを表示するために使用されます。

上記の計算がすべて完了すると、ajax 関数を呼び出した元の JavaScript に戻ります。 その関数の応答で、 「update_checkout」関数を「トリガー」し、カートを変更してユーザーに表示します。

Your order テーブルの「Delete」ボタンの CSS が必要です。 つまり、WooCommerce カートの削除ボタンのように見えるはずです。 そのため、CSS を追加する必要があります。 Web サイトのフッターに CSS を追加できます。

追加したら、CSS ファイルの削除ボタンに CSS を与える必要があります。 CSS を以下に示します。

これで、WooCommerce のチェックアウト ページで数量を変更できる機能の準備が整いました。

上記を実装すると、チェックアウト ページの [注文] テーブルは次のようになります。

チェックアウトページの注文テーブルの各アイテムに数量セレクターと削除アイコンを追加します。

私はこれを、2016 年 9 月にリリースされた WooCommerce のチェックアウトで数量を変更するという名前のプラグインとして作成しました。400 以上の WooCommerce ストアで使用されています。 すでに WooCommerce ストアでこのプラグインを使用している場合は、時間を割いてプラグインを確認していただければ幸いです。

フィードバックがある場合は、以下のコメントでお知らせいただくか、プラグインのサポート フォーラムに投稿してください。