WooCommerce のカスタム商品ページビルダー (無料プラグイン) を使用してください!

公開: 2018-07-23

WooCommerce 製品コンフィギュレーターとカスタム製品ページ ビルダーが必要ですか? この記事では、無料のプラグインを使用して WooCommerce 製品ページのデザインをカスタマイズし、カスタム フィールドを追加する方法を紹介します。 無料の WooCommerce プラグインである Flexible Product Fields を使用します。 詳細を読んで、構成を順を追って説明してください!

デザインを調整したり、WooCommerce 製品にフィールドを追加したりする簡単な方法が不足していることはありませんか?

カスタムフィールドを追加して単一の製品ページを管理する WooCommerce の無料プラグインをお見せしましょう!

目次

  • WooCommerce 商品ページ無料ビルダー
  • 柔軟な製品フィールドで WooCommerce 製品をカスタマイズ
  • カスタム製品構成 - ステップバイステップ ガイド

WooCommerce 商品ページ無料ビルダー

Flexible Product Fields は非常に強力なプラグインです。 この WooCommerce プロダクト ビルダーを使用すると、多様なフィールド タイプを追加して、プロダクト ページを簡単に充実させることができます。

カスタム製品ビルダー WooCommerce
柔軟な製品ページ: WooCommerce の製品ページビルダーを使用すると、このような結果を得ることができます

次のフィールド タイプを追加できます。

  • 文章
  • テキストエリア
  • 番号
  • Eメール
  • URL
  • チェックボックス
  • マルチチェックボックス
  • 選択する
  • 無線
  • 複数選択
  • 色付きラジオ
  • 時間
  • 見出し
  • 段落
  • 画像
  • HTML
  • 日にち
  • ファイルのアップロード
  • 画像付きラジオ

この記事の後半で、このプラグインをインストールして構成する方法を紹介します。

WooCommerce カスタム製品 - リングを作成する

このガイドでは、例としてリングを使用します。 最後に、その他の使用例を紹介します。

新しいフィールドでパーソナライズされた製品ページをもう一度見てください。

カスタム製品ビルダー WooCommerce
柔軟な製品ページ: WooCommerce の製品ページビルダーを使用すると、このような結果を得ることができます

これは、デフォルトの WooCommerce テーマのフィールドの基本的なセットアップとスタイリングです: Storefront

もちろん、 CSS を使用してこれらのフィールドのスタイルを設定できます。

ここで、次の追加オプションをリングに追加することにしました。

  • 保険
  • サイズ
  • 彫刻
  • ギフトラッピング

もちろん、あなたのものを追加することもできます。

保険

Insurance フィールドは選択ボックスです。

WooCommerce の追加の製品オプション ビルダー
選択(ドロップダウン)は保険フィールドとして使用できます

顧客は保険を追加できます。 「基本保険」は、最初のデフォルトのオプションです。 顧客は保険を辞退することができます (「保険は必要ありません」オプション)。

保険料は、リング価格のパーセンテージとして計算されます。

  • 基本保険 - 商品代金の5%
  • アドバンス保険 - 商品代金の10%
  • 究極の保険 - 製品価格の 20%

フィールドのオプションに固定価格を設定することもできます。 構成は後ほど紹介します。

サイズ

次のフィールドは「サイズ」です。

これは、製品ページに追加する別の選択フィールドになります。

製品ビルダー WooCommerce 柔軟な製品フィールド
サイズは別の選択フィールドです

刻印&ギフトラッピング

もう一つの分野は「彫刻」です。

これは、追加するテキスト フィールドになります。

お客様はリングに刻印するテキストを提供できます。

追加のチェックボックスで追加された「ギフトラッピング」オプションもあります。

WooCommerce 単一製品ビルダー
リング:刻印(仮置き)

次に、WooCommerce の単一製品ページ ビルダーで追加したばかりのすべてのフィールドを構成する方法を紹介します。

柔軟な製品フィールドで WooCommerce 製品をカスタマイズ

WooCommerce 商品ページビルダー

プロダクト ビルダー WooCommerce。 このプラグインを使用すると、商品ページにフィールドを追加できます。 価格設定と条件ロジックも追加!

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

このビデオを見て、この WooCommerce カスタム プロダクト ビルダーが無料バージョンで提供するものを確認してください。

プラグインを入手してインストールする

まず、Flexible Product Fields の無料版が必要です。WordPress.org から無料でダウンロードするか、柔軟な製品フィールドを検索してストアのプラグイン セクションから直接インストールできます。

価格設定や条件付きロジックなど、この記事で説明した一部の機能は、 PRO バージョンで利用できます。
プロダクト ビルダー WooCommerce のインストール
フレキシブル プロダクト フィールドをインストールしてアクティブ化する

商品フィールドをカスタマイズする

次に、WordPress メニューでProducts → Product Fieldsを選択します。

メニューの製品フィールド
ここでは、柔軟な製品フィールドを見つけることができます

これで、製品ページのカスタマイズを開始できます。

カスタム製品構成 - ステップバイステップ ガイド

構成画面を見てください。

カスタム製品ビルダー WooCommerce
柔軟な商品フィールドで指輪商品をカスタマイズする

フィールド グループを商品Ringに割り当てました。

フレキシブル商品フィールドの無料版では、商品を 1 つずつ割り当てる必要があります。 ただし、PRO バージョンでは、カテゴリのすべての製品またはストア内のすべての製品のいずれかを選択できます。

プラグインの構成を順を追って説明します。

  1. 新しいフィールドを追加

    まず、使用可能なフィールド リストから[選択]フィールドを選択し、そのラベルを定義します。

    次に、 [全般]タブで、以下に示すようにオプションを構成しました。

    WooCommerce の追加の製品オプション ビルダー
    選択フィールドに保険オプションを追加する

    WooCommerce 製品の追加製品オプションの改善についてお読みください。
  2. フィールドに価格を追加する

    価格設定タブで、この記事の前半で説明したように、価格タイプをパーセンテージとして設定します。

    商品ページをカスタマイズする
    [価格設定] タブにパーセント タイプの価格を追加する

    WooCommerce 製品に追加の価格フィールドを追加する方法について詳しくは、こちらをご覧ください。
  3. サイズの選択を追加

    次に、 [サイズ]フィールドのオプションを作成して構成しました。 こちらもセレクトタイプ。

    サイズ値選択ドロップダウン フィールド
    WooCommerce 商品ページビルダーでサイズラベルと値を定義する
  4. 彫刻用のテキスト フィールドを追加します。

    Engraving フィールドを追加します。 これはテキストフィールド タイプです。 また、 Placeholder を設定しました。 見て:

    WooCommerce カスタム製品ビルダー
    商品に刻印オプションを追加する
  5. ギフトラッピングのチェックボックスを追加

    最後のフィールドは「ギフトラッピング」フィールドです。 チェックボックス型のフィールドです。 お客様はこれを選択するかどうかを選択できます。

    WooCommerce の追加の製品オプション ビルダー
    ギフトラッピングのチェックボックスを追加する

それで全部です! リング用の WooCommerce カスタム製品コンフィギュレーターを正常に構成しました。

他のフィールドが必要ですか? すべてのフィールドを説明したガイドを確認してください →柔軟な製品フィールドから.

まとめ

この記事では、ストアで WooCommerce のカスタム製品コンフィギュレーターを構成する方法を学びました。 以下のコメント セクションでフィードバックをお待ちしています。

また、次のような多くのユースケースをすでに作成しています。

  • 部屋の予約
  • ケータリングの注文
  • カーコンフィギュレーター
  • コンピュータコンフィギュレータ