WooCommerce ショップ ページ (チェックアウトと商品) をカスタマイズするにはどうすればよいですか?

ショップ、製品、またはチェックアウトページをカスタマイズするための高度なオプションがないことを WooCommerce のせいにできますか?もちろん、そうすべきではありません。実際、プラグインや WooCommerce の無料拡張機能を使用して、さらにカスタマイズを追加することをお勧めします。

目次

• WooCommerce ショップページのカスタマイズ
• WooCommerce 製品をカスタマイズする
• カスタムフィールドを使用してチェックアウトページをデザインする

WooCommerce ショップページのカスタマイズ

つまり、WooCommerce のショップページの設定と調整は次の 4 つのステップで終了します。

ショップページをカスタマイズするにはどうすればよいですか？

1. ページを選択してください

   ショップページを表示するにはそれが必要です。既存のページでも新しいページでも構いません。

   

2. 製品カタログのオプションをカスタマイズする

   製品ページは、「外観」メニュー→「カスタマイズ」→「WooCommerce」→「製品カタログ」でデザインできます。

   

3. ページをメニューまたはウィジェットに追加します

   WooCommerce では、メニューまたはウィジェット (またはその両方) に製品カタログへのリンクを表示できます ( [外観] → [メニュー/ウィジェット] )。

   

4. 製品カタログのカスタマイズ

   ページを調整するためのオプションは他にもありますか?

   はい。たとえば、CSS スタイル、コンテンツ、ショートコード、リダイレクト、カスタム コードの追加などです。

   したがって、標準のページ レイアウトを新しいセクションや要素で強化することができます。

   

   

WooCommerce 製品をカスタマイズする

WooCommerce を使用する際の明らかな部分は、新しい商品を追加することです。デフォルトでは、属性とバリエーションを使用できます。属性は追加情報に表示されます (テーマに応じて)。

もちろん、バリエーションも役に立ちます (属性も使用します)。

しかし、よりカスタマイズ可能なオプションやカスタム フィールドを備えた製品を構築するには、WooCommerce だけでは十分ではありません。

冒頭で述べたように、WooCommerce の機能を拡張するためのプラグインと呼ばれる構成要素があります。また、カスタムフィールドを追加して WooCommerce 製品ページをカスタマイズするための無料プラグインが 1 つあります。

プラグインを使用して WooCommerce 製品ページをカスタマイズするにはどうすればよいですか?

拡張機能をダウンロード、インストール、アクティブ化した後、いくつかの手順で製品ページを調整できるようになります。

1. 特定の製品のフィールド グループを追加する

   まず、新しいフィールドに対して 1 つ以上の製品を選択できます (下のスクリーンショットに表示されています)。

2. フィールドの場所を選択してください

   また、プラグインを使用すると、「カートに追加」ボタンの前後に新しい製品オプションを表示できます。

   

3. カスタムフィールドを使用して WooCommerce 製品ページを調整する

   プラグインの中心的な機能は、新しいフィールドを追加することです。 Flexible Product Fields の無料版には、18 個のフィールド タイプがあります。

   

   各フィールドには、ラベル、プレースホルダー、ツールヒント、CSS クラス、最大文字数などの設定があります。フィールドは必須またはオプションの場合があります。

   

4. WooCommerce 製品ページのカスタマイズ - 例

   1 つ以上の製品の最終エフェクト (無料プラグインを使用)。

   

ご覧のとおり、無料のプラグインを使用して WooCommerce 製品ページをカスタマイズすることが可能です。ダウンロードするか、WordPress リポジトリで詳細を読むことができます。

要約すると、Flexible Product Fields プラグインを使用すると、WooCommerce でカスタム製品を構築できます。

カスタムフィールドを使用してチェックアウトページをデザインする

さらに、WP Desk には、WooCommerce チェックアウト ページをカスタマイズするための無料プラグインもあります。

柔軟なチェックアウト フィールドを使用すると、既存のフィールドを管理したり、新しいカスタム フィールドをチェックアウト ページに追加したりできます。

WooCommerce チェックアウト ページのカスタマイズ クイック ガイド

(プラグインをインストールして有効化した後)

1. デフォルトのチェックアウトフォーム

   標準 (クラシック) チェックアウト ページには、事前定義されたフィールドが含まれています。

   

2. フォームを調整する

   新しいフィールドを削除または追加することで、WooCommerce チェックアウト ページをカスタマイズできます。

   

3. チェックアウトフィールドの再配置と管理

   ビジュアル チェックアウト ページ エディターを使用すると、フォームを迅速にカスタマイズできます。無料のプラグインは 10 を超えるカスタム フィールドをサポートしています。

   

4. チェックアウトのフィールドが少なくなる

   最終的な効果、つまりより単純なフォームを見てください。

   

まとめ

WooCommerce をカスタマイズするには、ショップ ページ、商品ページ、チェックアウト フォームの調整など、複数の方法があります。無料のプラグインを使用すると、カスタム コードを記述する必要はありません。