WooCommerce チェックアウトおよび製品ページでカスタム フィールドを作成する

公開: 2018-08-01

標準の WooCommerce では、コードを記述せずにカスタム フィールドを作成することはできません。 ただし、WooCommerce の注文を効果的に処理するために、カスタム製品またはチェックアウト フィールドが必要な場合があります。 心配しないで。 2 つの無料プラグインを使用すると、ストアにカスタム フィールドを追加できます。

WooCommerce が提供しない製品または注文に関する特定の情報が必要な場合があることをご存知でしょう。

WooCommerce にカスタム フィールドを追加して、注文の詳細を取得します。 それを簡単に行うための2 つの無料プラグインを紹介しましょう。

目次

  • WooCommerce のカスタム フィールドとは何ですか?
  • WooCommerce 製品のカスタム フィールド
  • WooCommerce Checkout カスタム フィールド

WooCommerce のカスタム フィールドとは何ですか?

カスタム フィールドは、製品や注文などを説明する追加の情報と考えることができます。 これらは、製品をより適切に表示し、WooCommerce 注文を効果的に処理するための詳細を取得するのに役立ちます!

カスタム フィールドの例

  • チェックボックス
  • テキストフィールド
  • ラジオボタン
  • 日付ピッカー
  • カラーピッカー

注文フォームでは次のように表示されます。

WooCommerce カスタム注文フォーム
ラジオボタン、チェックボックス、日付ピッカー、テキストフィールド、カラーピッカー
もちろん、コンピューター ウィザード、カー コンフィギュレーター、またはギフト ラッピング オプションを WooCommerce 製品ページで直接作成するなど、さまざまなことに使用できます。

別の例として、顧客が注文にファイルをアップロードしたり、会計目的で VAT EU 番号を入力したりできるようにすることができます。 また、チェックアウト フィールドのタイプを変更したり、一部を非表示にしたりすることもできます。

カスタムフィールドを追加しましょう

おそらく、WooCommerce で次の 2 種類のカスタム フィールドを作成する必要があります。

  • 注文に関する詳細を取得するためのWooCommerce チェックアウト ページのカスタム フィールド、
  • WooCommerce 製品ページをカスタマイズして、製品により多くのオプションがあるようにするための新しいフィールド。

両方お見せします。

WooCommerce 製品のカスタム フィールド

まず、そのためのプラグインが必要です。 見てください:

ここからダウンロードしてください:

柔軟な商品分野 WooCommerce

刻印、ギフトラッピング、ギフトメッセージ、名刺、切手を販売する製品ウィザードを作成し、必要に応じて課金 (固定またはパーセンテージ) します。

無料でダウンロードまたはWordPress.org にアクセス
10,000以上のアクティブなインストール
最終更新日: 2023-03-13
WooCommerce 7.1 - 7.5.x で動作

まず、 WooCommerce プラグイン用の無料の柔軟な製品フィールドを使用して追加できる、製品ページの新しいカスタム フィールドのサンプル セットを見てみましょう。

WooCommerce でカスタム フィールドを作成する: 商品ページ
サンプルの WooCommerce 製品ページ

ご覧のとおり、完全なウィザードを作成できます。 お客様は、この方法でコンピューターをパーソナライズできます。 また、一部のオプションは追加料金が必要です。 プラグインは合計金額に追加料金を追加します (PRO で利用可能)。 顧客は自分専用のコンピュータを注文し、全額を前払いすることができます。

見た目に戻ります。 これが基本構成です。 CSS スタイルは一切使用せず、デフォルトの WooCommerce テーマである Storefront を使用しました。 もちろん、フィールドの外観は自由にカスタマイズできます。 プラグインには、この目的のためのオプションがあります。

柔軟な製品分野

つまり、このプラグインを使用すると、製品のアドオンを作成できます。 WooCommerce ストアの商品に新しいカスタム フィールドを追加できます。 例はすでに見ました。

柔軟な商品分野 WooCommerce

刻印、ギフトラッピング、ギフトメッセージ、名刺、切手を販売する製品ウィザードを作成し、必要に応じて課金 (固定またはパーセンテージ) します。

無料でダウンロードまたはWordPress.org にアクセス
10,000以上のアクティブなインストール
最終更新日: 2023-03-13
WooCommerce 7.1 - 7.5.x で動作
プラグインは無料で利用できます! 条件付きロジックなどの追加オプションが必要な場合は、プラグインをアップグレードすることもできます。 プラグインのドキュメントを読む →

WooCommerce 製品に追加できるフィールドの種類

  • 文章
  • テキストエリア
  • 番号
  • Eメール
  • URL
  • マルチチェックボックス
  • 色付きラジオ
  • 時間
  • 見出し
  • 段落
  • 画像
  • HTML
  • チェックボックス
  • ラジオボタン
  • 選択する
  • 複数選択
  • 画像付きラジオ
  • 見出し
  • 日付 (PRO)
  • ファイルのアップロード (PRO)
これらすべてのフィールドについては、WooCommerce 製品パーソナライゼーション オプション ガイドで説明しました →

そのガイドをチェックする必要があります。 多くのユースケースがあることがわかります。 以下を実装するための構成を順を追って説明します。

  • シンプルな予約システム、
  • ギフトラッピング機能、
  • ケータリングダイエットの魔法使い、
  • コンピュータウィザードなど

WooCommerce Checkout カスタム フィールド

それでは、チェックアウト ページから WooCommerce 注文にカスタム フィールドを追加する方法をお見せしましょう!

このプラグインが必要になります:

ここからダウンロードしてください:

柔軟なチェックアウト フィールド WooCommerce

WooCommerce チェックアウト フォームから不要なフィールドを編集、追加、または非表示にします。 コンバージョンとユーザー エクスペリエンスの向上がすべてです。

無料でダウンロードまたはWordPress.org にアクセス
80,000以上のアクティブなインストール
最終更新日: 2023-03-13
WooCommerce 7.1 - 7.6.x で動作

WooCommerce プラグイン用の無料の柔軟なチェックアウト フィールドを使用してカスタマイズされたチェックアウト ページの例を見てみましょう。

チェックアウトフォームの新しいフィールド
WooCommerce チェックアウト ページのサンプル

プラグインを使用すると、WooCommerce チェックアウト ページを追加、削除、並べ替え、効果的にカスタマイズできます!

WooCommerce チェックアウト フィールドの並べ替え
WooCommerce 注文カスタム フィールドの構成

柔軟なチェックアウト フィールド

つまり、柔軟なチェックアウト フィールドを使用すると、WooCommerce チェックアウトでカスタム フィールドを作成できます→

WooCommerce チェックアウト ページに新しいカスタム フィールドを追加する
WooCommerce チェックアウト ページに新しいカスタム フィールドを追加する

また、このプラグインを使用すると、デフォルトの WooCommerce チェックアウト フィールドを編集または再配置できます!

たとえば、チェックアウトを高速化するために、一部の請求先住所フィールドを無効にすることができます。

表示するチェックアウト フィールドを減らして、WooCommerce 注文の情報を減らします
表示するチェックアウト フィールドを減らして、WooCommerce 注文の情報を減らします

世界中の80,000 を超える店舗がこのプラグインを毎日使用しています。

無料版のチェックアウト フィールド タイプ

  • 文章
  • テキストエリア
  • 番号
  • Eメール
  • 電話
  • URL
  • チェックボックス
  • 見出し
  • 段落
  • 画像
  • HTML

PRO版のフィールド

  • マルチチェックボックス
  • ラジオボタン
  • 選択 (ドロップダウン)
  • 複数選択
  • 画像付きラジオ
  • 日にち
  • 色付きラジオ
  • 時間
  • ファイルのアップロード
WooCommerce チェックアウトにカスタム フィールドを追加する方法については、こちらをご覧ください。

この無料の WooCommerce 拡張機能をダウンロードして、チェックアウト ページをカスタマイズします。

柔軟なチェックアウト フィールド WooCommerce

WooCommerce チェックアウト フォームから不要なフィールドを編集、追加、または非表示にします。 コンバージョンとユーザー エクスペリエンスの向上がすべてです。

無料でダウンロードまたはWordPress.org にアクセス
80,000以上のアクティブなインストール
最終更新日: 2023-03-13
WooCommerce 7.1 - 7.6.x で動作
プラグインのドキュメントを読む →

まとめ

WooCommerce にカスタム商品とチェックアウト フィールドを追加する

この記事では、WooCommerce でカスタム フィールドを作成するために使用できるプラグインを紹介しました。

WooCommerce でカスタム フィールドを作成するために使用できるプラグインは 2 つあります。

  • 柔軟なチェックアウト フィールドをダウンロード →
  • 柔軟な製品フィールドをダウンロード →

どちらのプラグインも無料でダウンロードできます。 ただし、無料版はすべての機能をサポートしているわけではありません。

無料デモですべてのプラグイン (PRO バージョンも含む) をテストできます。

プラグインやカスタム フィールドの作成についてご不明な点がございましたら、お気軽にお問い合わせください。

プラグインの詳細