製品ページにWoocommerceカスタムテキストフィールドを追加する方法

公開: 2020-09-21

この投稿では、製品ページにWooCommerceカスタムテキストフィールドを追加するための非常に簡単なソリューションを紹介します。これらのカスタムフィールドは製品アドオンとも呼ばれ、テキストフィールド、選択フィールド、チェックボックスなどが含まれます。これを追加する主な理由は、顧客が製品に関する追加の個人情報を有料で入力できるようにするためです。

WooCommerceは、長年にわたって人気を博しているWordPress向けの強力なeコマースソリューションです。 WooCommerceは、利用可能なすべてのオンラインストアの42％以上を支えていると推定されています。

これは非常に大きな割合であり、セットアップと管理が簡単なオンラインストアを探している場合は、WooCommerceが最適なオプションです。これは無料のオープンソースソリューションであり、WordPressベースのWebサイト向けの非常に有能なeコマースソリューションに進化しました。

製品ページのWoocommerceカスタムテキストフィールド

インターネットで簡単に検索すると、多くの人が実装が難しい複雑なソリューションを提供します。この簡単なチュートリアルでは、この機能を製品ページに追加するPHPコードスニペットを共有します。

このチュートリアルが終了するまでに、オンラインストアのユーザーは、各製品にカスタムメモを追加できるようになります。カスタムフィールドが入力されていない場合、エラーがスローされます。

さらに、カスタムフィールドを追加するためのより簡単な方法を探している場合は、WooCommerceプラグインのProductExtrasが最適なソリューションになります。ただし、これはプレミアムプラグインであり、年間59ドルの料金を支払う必要があります。 WooCommerceプラグインの製品エクストラ

製品ページにカスタムフィールドを追加するのはなぜですか？

これを行う主な理由は、顧客が注文にカスタムメモを追加できるようになるため、顧客維持を改善することです。これにより、売上が増加する可能性があります。

たとえば、顧客は製品にギフト包装またはパーソナライズされたグリーティングカードを必要とし、製品にカスタムノートを追加できます。

これらすべてがテーブルに配置されたので、WooCommerceストアの製品ページにカスタムテキストフィールドを追加するために実行する必要のある手順を見てみましょう。デフォルトの製品ページは次のようになります。

製品ページにWoocommerceカスタムテキストフィールドを追加する手順

従う必要のある手順は次のとおりです。

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、製品ページにWooCommerceカスタムフィールドを追加する関数を追加するテーマ関数ファイルを探します。
次のコードをfunctions.phpファイルに追加します。

 / **

 * @ snippet商品に入力フィールドを追加-WooCommerce

 * /

// -----------------------------------------

// 1。カートに追加の上にカスタム入力フィールドを表示します

add_action（ 'woocommerce_before_add_to_cart_button'、 'njengah_product_add_on'、9）;

関数njengah_product_add_on（）{

    $ value = isset（$ _POST ['custom_text_add_on']）？ sanitize_text_field（$ _POST ['_ custom_text_add_on']）： '';

    echo '<div> <label>カスタムテキストアドオン<abbrclass = "required" title = "required"> * </ abbr> </ label> <p> <input name = "custom_text_add_on" value = "'。 $ value。 '"> </ p> </ div>';

}

// -----------------------------------------

// 2.カスタム入力フィールドが空の場合、エラーをスローします

add_filter（ 'woocommerce_add_to_cart_validation'、 'njengah_product_add_on_validation'、10、3）;

function njengah_product_add_on_validation（$ passed、$ product_id、$ qty）{

   if（isset（$ _POST ['custom_text_add_on']）&& sanitize_text_field（$ _POST ['custom_text_add_on']）== ''）{

      wc_add_notice（ 'カスタムテキストアドオンは必須フィールドです'、 'エラー'）;

      $ passed = false;

   }

   $ passedを返します。

}

// -----------------------------------------

// 3。カスタム入力フィールドの値をカートアイテムデータに保存します

add_filter（ 'woocommerce_add_cart_item_data'、 'njengah_product_add_on_cart_item_data'、10、2）;

関数njengah_product_add_on_cart_item_data（$ cart_item、$ product_id）{

    if（isset（$ _POST ['custom_text_add_on']））{

        $ cart_item ['custom_text_add_on'] = sanitize_text_field（$ _POST ['custom_text_add_on']）;

    }

    $ cart_itemを返します;

}

// -----------------------------------------

// 4。カスタム入力フィールド値をカートで表示

add_filter（ 'woocommerce_get_item_data'、 'njengah_product_add_on_display_cart'、10、2）;

function njengah_product_add_on_display_cart（$ data、$ cart_item）{

    if（isset（$ cart_item ['custom_text_add_on']））{

        $ data [] = array（

            'name' => 'カスタムテキストアドオン'、

            'value' => sanitize_text_field（$ cart_item ['custom_text_add_on']）

        ）;

    }

    $ dataを返します。

}

// -----------------------------------------

// 5。カスタム入力フィールド値を注文アイテムメタに保存します

add_action（ 'woocommerce_add_order_item_meta'、 'njengah_product_add_on_order_item_meta'、10、2）;

関数njengah_product_add_on_order_item_meta（$ item_id、$ values）{

    if（！empty（$ values ['custom_text_add_on']））{

        wc_add_order_item_meta（$ item_id、 'カスタムテキストアドオン'、$ values ['custom_text_add_on']、true）;

    }

}

// -----------------------------------------

// 6。カスタム入力フィールド値を注文テーブルに表示します

add_filter（ 'woocommerce_order_item_product'、 'njengah_product_add_on_display_order'、10、2）;

function njengah_product_add_on_display_order（$ cart_item、$ order_item）{

    if（isset（$ order_item ['custom_text_add_on']））{

        $ cart_item ['custom_text_add_on'] = $ order_item ['custom_text_add_on'];

    }

    $ cart_itemを返します;

}

// -----------------------------------------

// 7。カスタム入力フィールドの値を注文メールに表示します

add_filter（ 'woocommerce_email_order_meta_fields'、 'njengah_product_add_on_display_emails'）;

function njengah_product_add_on_display_emails（$ fields）{

    $ fields ['custom_text_add_on'] = 'カスタムテキストアドオン';

    $ fieldsを返します。

}

結果を確認するには、製品ページを更新するだけで、次のように表示されます。

ユーザーが詳細を入力していない場合、ユーザーが以下に示すようにカスタムテキストを追加するまで、エラーが表示されます。ユーザーが詳細を入力していない場合のエラー

カスタムノートは、次のように注文の詳細にも表示されます。カート上のカスタムテキストアドオン

コードのしくみ

最初に、コードは[カートに追加]の上にカスタム入力フィールドを表示し、カスタム入力フィールドが空の場合はエラーが追加されます。次に、カスタム入力フィールドの値が保存され、カート、注文アイテム、注文テーブル、および注文メールに表示されます。

結論

この投稿では、プラグインの使用を伴う、それほど技術に精通していないユーザーに、より簡単なソリューションを提供しました。次に、functions.phpファイルに配置する必要のあるPHPコードスニペットを共有して、カート、注文アイテム、注文テーブル、および注文メールに顧客のアドオンを表示しました。この投稿が、製品ページにWooCommerceカスタムテキストフィールドを追加するのに役立つことを願っています。

同様の記事

WooCommerceでカスタム関連商品を設定する方法
WordPressカスタムフックの使用方法do_action＆apply_filtersと例
ダウンロードメニューを削除する方法マイアカウントページWooCommerce
WooCommerceで支払い方法を取得する方法»コード例
WooCommerceで画像なしで商品を非表示にする方法
WooCommerce製品画像のズーム効果を削除する方法
WooCommerce製品にカテゴリを追加する方法
WordPressの順不同リストから箇条書きを削除する方法
WooCommerceチェックアウトフォームにフィールドを追加する方法
WooCommerceでチェックアウトテキストに進むを変更する方法
フロントエンドからWoocommerce製品を追加する方法
カートに追加されたアイテムをカウントする方法WooCommerceカートカウントコード
WooCommerceでチェックアウトボタンのテキストを変更する方法[注文する]
例を含む5つのWordPressページネーションコードスニペット[シンプルからアドバンス]
WooCommerceでストックテキストを変更する方法
ロールによる登録後にWooCommerceユーザーをリダイレクトする方法
Woocommerceで注文IDを取得する方法
簡単なトリックでWordPressのURLからハッシュ＃を削除する方法
WooCommerceで価格の後に説明を追加する方法
WooCommerceを変更する方法 'カートに追加'通知