WooCommerceでカスタムアップロードフィールドを追加する方法

チェックアウトページにアップロードフィールドを含めますか？ あなたは正しい場所に来ました。 この記事では、WooCommerceにカスタムアップロードフィールドを追加する方法を段階的に説明します。

500万を超えるアクティブなダウンロードがあるWooCommerceは、世界で最も人気のあるeコマースプラットフォームです。 オンラインストアを作成することになると、それは多くのストア所有者にとって、そして正当な理由で最高の選択です。 WooCommerceは、顧客と店舗所有者の両方にとって、オンライン体験全体をシームレスかつ簡単にします。

WooCommerceには、セットアップと使用が簡単なだけでなく、多くの柔軟性を提供する多数の機能が備わっています。 プラグインを使用するか、少しコーディングすることで、ショッピングエクスペリエンスを向上させ、売り上げを伸ばすために必要な機能を追加できます。

それを達成するために、あなたのチェックアウトは最適化され、気を散らすことのないものでなければならないことは周知の事実です。 ユーザーエクスペリエンスを向上させる1つの方法は、カスタムアップロードフィールドをWooCommerceストアに追加することです。 このようにして、顧客がチェックアウトプロセス中にファイルをアップロードし、注文をすぐに確認できるようにすることができます。顧客が追加のドキュメントを電子メールで送信するまで購入を保留する必要はありません。

詳細に入る前に、ストアにカスタムアップロードフィールドを追加することが良いアイデアである理由をよく理解しましょう。

WooCommerceにカスタムアップロードフィールドを追加する理由

買い物客がオンラインで商品を購入するときにドキュメントをアップロードする必要がある状況がいくつかあります。

一部のホテルでは、オンラインで予約する際に、顧客に何らかの身分証明書（通常はIDカードまたはパスポート）の添付を求める場合があります。 多くの国では、ホテルは毎日警察や地方自治体にゲストに関する情報を提供する必要があるため、チェックインプロセスをスピードアップするために、到着前にIDを要求される場合があります。

同様に、航空券や電車のチケットをオンラインで販売している一部のサイトでは、予約プロセス中に乗客がIDまたはパスポートをアップロードする必要があります。 チケットの変更、返金の請求、または遅延に対する何らかの補償の請求が必要な場合、会社はパスポートやID、購入したチケットなどの特定の書類のアップロードを要求する場合があります。

さらに、卸売オンラインストアには、製品をまとめて購入し、1回のトランザクションで数千ドルを費やす顧客がいます。 このような場合、セキュリティ対策として、ユーザーが身元を証明するものをアップロードする必要がある場合があります。

その上、カスタマイズされたTシャツを購入するオプションを提供する衣料品店は、顧客に自分のデザインを送って印刷してもらうように依頼する場合があります。 そのためには、ユーザーがデザインをアップロードできるようにファイルをアップロードできるようにする必要があります。

最後に、ファイルをアップロードするオプションがあると、ダイビングやパラグライダーなど、以前の認定が必要なサービスを販売する店舗にとって非常に便利です。

すべての場合に必須ではない場合でも、チェックアウトページにカスタムアップロードフィールドを追加すると、プロセスが簡単になり、両方の当事者にとってはるかに便利になります。

WooCommerceストアにカスタムアップロードフィールドをいつ追加する必要があるかがよくわかったので、その方法を見てみましょう。

WooCommerceでカスタムアップロードフィールドを追加する方法

WooCommerceにカスタムアップロードフィールドを追加する最も簡単な方法は、プラグインを使用することです。 このデモンストレーションでは、90,000を超えるアクティブなインストールがあるフリーミアムツールであるWooCommerceのCheckoutManagerを使用します。

このプラグインには、チェックアウトをカスタマイズするのに役立つ多くの機能があり、カスタムフィールドを追加するオプションが含まれています。 このツールが提供するすべての機能の詳細については、製品ページをご覧ください。

ステップ1：WooCommerceのCheckoutManagerをインストールする

まず、プラグインをインストールする必要があります。 WordPress管理ダッシュボードで、 [プラグイン]> [新規追加]に移動します。

次に、QuadLayersでCheckout Manager for WooCommerceプラグインを検索し、 [今すぐインストール]ボタンをクリックします。 プラグインがインストールされたら、「アクティブ化」を押します。

次に、プラグインを構成します。 WooCommerceチェックアウトページに新しいカスタムアップロードフィールドを追加することから始めましょう。

その前に、チェックアウトページがどのように表示されるかを見てみましょう。 ご覧のとおり、顧客がファイルをアップロードできるフィールドはありません。

買い物客がチェックアウト中にファイルを追加できるようにチェックアウトマネージャーを設定する方法を見てみましょう。

ステップ2：WooCommerceチェックアウトページにカスタムアップロードフィールドを追加する

WordPressダッシュボードで、 [WooCommerce]> [チェックアウト]に移動します。 そこにCheckoutManagerのすべての設定があります。

[チェックアウト]タブに移動し、[追加]セクションに移動して、追加のフィールド設定を開きます。

注：この例では、[追加]セクションにフィールドを追加しますが、[チェックアウト]タブの対応する領域に移動するだけで、[請求]、[配送]、またはチェックアウトの任意のセクションに追加できます。

右隅に、これらの追加フィールドを表示する位置を選択できるドロップダウンメニューが表示されます。 「新しいフィールドの追加」ボタンをクリックして、新しい追加フィールドの作成を開始します。

[カスタムアップロード]フィールドを設定します

その後、設定メニューのある新しいページに移動します。 ここで、追加するフィールドのパラメーターを指定できます。 カスタムアップロードフィールドを追加するため、[タイプ]で[ファイル]を選択し、カスタムラベルとボタンテキストを設定します。 次に、「保存」を押します。

いくつかの追加フィールドを作成した後、追加フィールド設定メニューからさまざまなパラメーターを管理できます。 これらのパラメータは次のとおりです。

• 再配置：上下の矢印を使用して、フィールドを上下に移動します。 または、3本の横線アイコンをクリックしてドラッグし、フィールドの位置を変更することもできます。
• 必須：必須フィールドを有効にすると、フィールドが必須になります。 これは、ユーザーがそのフィールドに入力するまで続行できないことを意味します。
• 位置：フィールドを表示する位置を選択できます。 左、右、またはワイドの3つのオプションから選択できます。
• クリア：これを有効にすると、他のフィールドがこの特定のフィールドの左側または右側に表示されなくなります。
• 無効化：無効化ボタンをチェックすると、その特定のフィールドはチェックアウトページに表示されません。
• 編集と削除：名前が示すように、それぞれのボタンをクリックして特定のフィールドを編集または削除できます。

すべての設定を構成したら、変更を保存します。

それでは、フロントエンドからサイトを見て、変更点を確認しましょう。 ご覧のとおり、ファイルをアップロードするためのボタンがあります。 作成した2つのカスタムフィールドから、テストフィールドのみがアクティブ化され、必須ではないため、チェックアウトページにオプションとして表示されます。

それでおしまい！ これは、WooCommerceにカスタムアップロードフィールドを追加するのがいかに簡単かです。 このボタンを使用すると、顧客はチェックアウトプロセス中に任意のファイルをアップロードしたり、複数のファイルをアップロードしたりすることができます。 アップロードされたファイルは、注文の他の詳細とともに注文ページに保存されます。 さらに、管理者注文ダッシュボードを介してユーザーがアップロードするすべてのファイルを管理できるようになります。

しかし、CheckoutManagerでできることはそれだけではありません。 チェックアウトを最適化することがコンバージョン率を高めるための鍵となるため、注文を完了するために顧客が入力する必要のあるフィールドのみを表示する必要があります。 特定の条件が満たされた場合にのみ表示される条件付きフィールドを追加する方法を見てみましょう。

ボーナス：WooCommerceに条件付きフィールドを追加する

条件付きフィールドには、親フィールドと子フィールドの2つの部分があります。 子フィールドは、親フィールドの入力に依存します。 これは、デフォルトでは表示されませんが、親フィールドが特定の値をとるときに表示されることを意味します。

たとえば、特定の状況でのみ必要となるカスタムアップロードフィールドをWooCommerceストアに追加する場合、最善の解決策は、必要な場合にのみフィールドが表示されるように条件付きフィールドを作成することです。

これは2つのステップで行います。 まず、ファイルをアップロードするかどうかをユーザーに尋ねます。 「はい」と答えた場合にのみ、ファイルのアップロードフィールドが表示されます。 この例では、最初の質問は親フィールドになり、ファイルのアップロードボタンは子フィールドになります。

条件付きフィールドとは何かがわかったので、CheckoutManagerプラグインを使用してそれをWooCommerceに追加する方法を見てみましょう。

CheckoutManagerを使用して条件付きフィールドを作成する

まず、親フィールドを追加しましょう。 同じ例に従って、[追加]セクションに追加しますが、[請求]、[配送]、またはチェックアウトの任意のセクションに追加できます。

WooCommerce> Checkoutに移動し、 Checkoutタブに移動して、 Additionalセクションを開きます。 「新しいフィールドの追加」ボタンを押して、親フィールドのパラメーターを設定します。 上記の例を使用して、「タイプ」として「選択」を選択し、カスタムラベルとプレースホルダーテキストを追加します。

次に、左側の[オプション]タブに移動し、ユーザーが選択できるすべての可能なオプションを設定します。 この例では、「はい」または「いいえ」の2つの答えしか持てないユーザーに質問をしています。 この質問への回答には追加料金（高速配送や国際配送など）は追加されないため、価格を0に設定します。すべてのパラメーターを構成したら、変更を保存します。

子フィールドを作成する

次に、子フィールド（カスタムアップロードフィールド）を作成し、条件付きパラメーターを設定する必要があります。

これを行うには、フィールドを作成し、タイプ、ラベル、およびボタンのプレースホルダーを設定します。 次に、右側のセクションに移動して、[条件付きフィールド要件をアクティブ化する]チェックボックスをオンにします。 その後、前の手順で作成したフィールドを親フィールドとして選択し、子フィールドをアクティブ化する親フィールドの値を選択します。 この場合、ユーザーが最初の質問に「はい」と答えたときにのみアップロードファイルを表示します。

完了したら、変更を保存することを忘れないでください。

それでおしまい！ これで、WooCommerceチェックアウトページに条件付きフィールドが正常に設定されました。

次に、チェックアウトページに移動し、条件付きフィールドが正しく機能することを確認します。 最初は親フィールドのみが表示されますが、「はい」を選択すると、ファイルのアップロードボタンが表示されます。

WooCommerceに条件付きフィールドを追加する方法の詳細については、完全なガイドをご覧ください。

結論

全体として、WooCommerceチェックアウトにカスタムアップロードフィールドを追加すると、顧客がチェックアウトプロセス中に必要なファイルをアップロードできるため、便利です。

ユーザーがファイルや画像をアップロードする必要がある状況がいくつかあります。 たとえば、オンラインホテル予約のID確認、飛行機のチケットの購入時、衣類のカスタムデザイン、アイテムの交換または払い戻し、または特定の認証が必要なサービスなどです。 そのため、買い物客がチェックアウト時にファイルをアップロードできるようにすると、プロセス全体がより簡単で便利になります。

この記事では、次のことについて説明しました。

• カスタムアップロードフィールドを追加する利点
• CheckoutManagerを使用してWooCommerceにカスタムアップロードフィールドを追加する方法の詳細な手順
• 条件付きフィールドとは何か、およびそれらがどのように機能するか
• WooCommerceに条件付きフィールドを追加してチェックアウトを最適化する方法

ストアにカスタムアップロードフィールドを追加しましたか？ 私たちが含めるべき他の方法を知っていますか？ 以下のコメントでお知らせください！