WooCommerce チェックアウトおよび製品ページでカスタム フィールドを作成する
公開: 2018-08-01標準の WooCommerce では、コードを記述せずにカスタム フィールドを作成することはできません。 ただし、WooCommerce の注文を効果的に処理するために、カスタム製品またはチェックアウト フィールドが必要な場合があります。 心配しないで。 2 つの無料プラグインを使用すると、ストアにカスタム フィールドを追加できます。
WooCommerce が提供しない製品または注文に関する特定の情報が必要な場合があることをご存知でしょう。
WooCommerce にカスタム フィールドを追加して、注文の詳細を取得します。 それを簡単に行うための2 つの無料プラグインを紹介しましょう。
目次
- WooCommerce のカスタム フィールドとは何ですか?
- WooCommerce 製品のカスタム フィールド
- WooCommerce Checkout カスタム フィールド
WooCommerce のカスタム フィールドとは何ですか?
カスタム フィールドは、製品や注文などを説明する追加の情報と考えることができます。 これらは、製品をより適切に表示し、WooCommerce 注文を効果的に処理するための詳細を取得するのに役立ちます!
カスタム フィールドの例
- チェックボックス
- テキストフィールド
- ラジオボタン
- 日付ピッカー
- カラーピッカー
- 等
注文フォームでは次のように表示されます。

別の例として、顧客が注文にファイルをアップロードしたり、会計目的で VAT EU 番号を入力したりできるようにすることができます。 また、チェックアウト フィールドのタイプを変更したり、一部を非表示にしたりすることもできます。
カスタムフィールドを追加しましょう
おそらく、WooCommerce で次の 2 種類のカスタム フィールドを作成する必要があります。
- 注文に関する詳細を取得するためのWooCommerce チェックアウト ページのカスタム フィールド、
- WooCommerce 製品ページをカスタマイズして、製品により多くのオプションがあるようにするための新しいフィールド。
両方お見せします。
WooCommerce 製品のカスタム フィールド
まず、そのためのプラグインが必要です。 見てください:
ここからダウンロードしてください:
柔軟な商品分野 WooCommerce
刻印、ギフトラッピング、ギフトメッセージ、名刺、切手を販売する製品ウィザードを作成し、必要に応じて課金 (固定またはパーセンテージ) します。
無料でダウンロードまたはWordPress.org にアクセスまず、 WooCommerce プラグイン用の無料の柔軟な製品フィールドを使用して追加できる、製品ページの新しいカスタム フィールドのサンプル セットを見てみましょう。

ご覧のとおり、完全なウィザードを作成できます。 お客様は、この方法でコンピューターをパーソナライズできます。 また、一部のオプションは追加料金が必要です。 プラグインは合計金額に追加料金を追加します (PRO で利用可能)。 顧客は自分専用のコンピュータを注文し、全額を前払いすることができます。
見た目に戻ります。 これが基本構成です。 CSS スタイルは一切使用せず、デフォルトの WooCommerce テーマである Storefront を使用しました。 もちろん、フィールドの外観は自由にカスタマイズできます。 プラグインには、この目的のためのオプションがあります。
柔軟な製品分野
つまり、このプラグインを使用すると、製品のアドオンを作成できます。 WooCommerce ストアの商品に新しいカスタム フィールドを追加できます。 例はすでに見ました。
柔軟な商品分野 WooCommerce
刻印、ギフトラッピング、ギフトメッセージ、名刺、切手を販売する製品ウィザードを作成し、必要に応じて課金 (固定またはパーセンテージ) します。
無料でダウンロードまたはWordPress.org にアクセスWooCommerce 製品に追加できるフィールドの種類
- 文章
- テキストエリア
- 番号
- Eメール
- URL
- マルチチェックボックス
- 色付きラジオ
- 時間
- 色
- 見出し
- 段落
- 画像
- HTML
- チェックボックス
- ラジオボタン
- 選択する
- 複数選択
- 画像付きラジオ
- 見出し
- 日付 (PRO)
- ファイルのアップロード (PRO)
そのガイドをチェックする必要があります。 多くのユースケースがあることがわかります。 以下を実装するための構成を順を追って説明します。
- シンプルな予約システム、
- ギフトラッピング機能、
- ケータリングダイエットの魔法使い、
- コンピュータウィザードなど
WooCommerce Checkout カスタム フィールド
それでは、チェックアウト ページから WooCommerce 注文にカスタム フィールドを追加する方法をお見せしましょう!
このプラグインが必要になります:

ここからダウンロードしてください:
柔軟なチェックアウト フィールド WooCommerce
WooCommerce チェックアウト フォームから不要なフィールドを編集、追加、または非表示にします。 コンバージョンとユーザー エクスペリエンスの向上がすべてです。
無料でダウンロードまたはWordPress.org にアクセスWooCommerce プラグイン用の無料の柔軟なチェックアウト フィールドを使用してカスタマイズされたチェックアウト ページの例を見てみましょう。

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

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

また、このプラグインを使用すると、デフォルトの WooCommerce チェックアウト フィールドを編集または再配置できます!
たとえば、チェックアウトを高速化するために、一部の請求先住所フィールドを無効にすることができます。

世界中の80,000 を超える店舗がこのプラグインを毎日使用しています。
無料版のチェックアウト フィールド タイプ
- 文章
- テキストエリア
- 番号
- Eメール
- 電話
- URL
- チェックボックス
- 色
- 見出し
- 段落
- 画像
- HTML
PRO版のフィールド
- マルチチェックボックス
- ラジオボタン
- 選択 (ドロップダウン)
- 複数選択
- 画像付きラジオ
- 日にち
- 色付きラジオ
- 時間
- ファイルのアップロード
この無料の WooCommerce 拡張機能をダウンロードして、チェックアウト ページをカスタマイズします。
柔軟なチェックアウト フィールド WooCommerce
WooCommerce チェックアウト フォームから不要なフィールドを編集、追加、または非表示にします。 コンバージョンとユーザー エクスペリエンスの向上がすべてです。
無料でダウンロードまたはWordPress.org にアクセスまとめ
WooCommerce にカスタム商品とチェックアウト フィールドを追加する
この記事では、WooCommerce でカスタム フィールドを作成するために使用できるプラグインを紹介しました。
WooCommerce でカスタム フィールドを作成するために使用できるプラグインは 2 つあります。
- 柔軟なチェックアウト フィールドをダウンロード →
- 柔軟な製品フィールドをダウンロード →
どちらのプラグインも無料でダウンロードできます。 ただし、無料版はすべての機能をサポートしているわけではありません。
プラグインやカスタム フィールドの作成についてご不明な点がございましたら、お気軽にお問い合わせください。