WooCommerce の商品ページをカスタマイズする方法
公開: 2022-10-18どの e コマース Web サイトでも、製品ページは最も重要な部分として求められます。 関連商品などの追加情報とともに、商品に関するすべての詳細が整然と含まれているため.
デフォルトの WooCommerce 製品ページは、基本的な製品のクイック ビュー、カートに追加、およびその他の基本的な機能には問題ありませんが、これは現代の競争の激しい e コマース環境では十分ではありません。 製品ページは、最も重要なページの 1 つとして、WooCommerce が構築したビジネス プラットフォームで重要な機能を果たします。 ただし、デフォルトのページはそれをカットしていません。
製品ページをカスタマイズすることの重要性は、いくら強調してもしすぎることはありません。
製品ページをカスタマイズすることで、本質的に顧客に独自のショッピング体験を提供することになります。これは、訪問者の維持と販売数の増加にも重要です.
この投稿では、WooCommerce 製品ページ エディターとカスタム WooCommerce ウィジェットを利用して魅力的な製品ページを作成する方法などのプロセスについて説明します。
目次
WooCommerce 製品ページのカスタマイズに必要なツールは?
何よりもまず、サーバーに最新バージョンの WordPress をインストールする必要があります。さらに、ストア/ショップ ページのすべての機能に対応するために、WooCommerce プラグインをインストールする必要があります。
また、機能主導のe コマース WordPress テーマも必要です。最後に、 WooCommerce Elementor Shop Builderプラグインも必要です。 Elementor ショップ ビルダー プラグインを使用すると、個々のショップ ページとマーケットプレイスの商品グリッド、商品リスト、商品比較ブロックなどを完全に制御およびカスタマイズできます。
WooCommerce の商品ページをカスタマイズする方法
WordPress が正常にインストールされ、機能する e コマース テーマがサーバーに既にインストールされていることを願っています。 それでは、必要な追加の WordPress リソースとツールから始めて、製品ページのカスタマイズの段階的なプロセスを見ていきましょう。
ステップ 1: Elementor WooCommerce アドオン プラグインのインストール
さまざまな要素と WooCommerce 製品のバリエーション見本を使用して WooCommerce 製品ページをカスタマイズし、最新の製品ページを顧客に提示するこの実例では、ShopReady と呼ばれる WooCommerce製品ページ ビルダービジュアル コンポーザに似たものを使用します。
ShopReady Elementor ショップ ビルダーは、堅牢な e コマース ストア Web サイトを作成するための、すべてを網羅した素晴らしいバンドル ツールです。 このプラグインには、ユースケース固有の機能とツールを備えた、専門的に作成された 105 以上のウィジェットが付属しています。 たとえば、この e コマース プラグインを使用すると、価格、サイズ、重量、色、評価、配送などで製品をフィルタリングできる機能的な WooCommerce 製品フィルターを作成できます。
この WooCommerce アドオン プラグインの使用を開始するには、まずダウンロードします。 これを行うには、 WordPress ダッシュボードにログインし、 そして、[インストール] ボタンをクリックします。
プラグインが正常にインストールされるまで待ち、[有効化] をクリックします。
ShopReady メニューが WordPress ダッシュボードに表示されます。 ここから、ショップ ページ カスタマイザー プラグインによって提供されるすべてのウィジェット、モジュール、およびプリセット コンテンツにアクセスできます。
このシンプルなメニューから、ウィジェットの有効化/無効化、テンプレートの作成、およびさまざまな機能の API キーの挿入を行うことができます。
このプラグインのもう 1 つの優れた機能は、WooCommerce 機能の通貨切り替え機能です。 この機能を有効にするには、以下の手順に従う必要があります。
Exchangerateによって作成された通貨 API キーを追加するには、[API] タブをクリックします。
Exchangerate アカウント ダッシュボードにログオンし、API キーをコピーして取得します。 API キーを貼り付けた後、 WordPress ダッシュボード > ShopReady > APIに移動し、[ステップ 2: プリセットの製品ページ テンプレートを使用するか、最初から作成する
次のステップは、製品ページの作業を開始することですが、その前に WooCommerce ウェブサイトに製品を追加する必要があります. その方法がわからない場合は、このガイドに従ってください – WooCommerce クイック製品追加方法.
製品ショーケース用のページのカスタマイズを開始するには、ShopReady – WooCommerce Builder を使用して、プラグイン ダッシュボードに移動し、[テンプレート] タブをクリックして、簡単な製品ページを作成します。 製品テンプレート カテゴリを有効にして、単一製品のセットアップを探します。 編集アイコンをクリックします。
そして、 Elementor Editor画面にリダイレクトされます。 ページのカスタマイズを開始するには、プラス記号をクリックして Elementor セクションを追加します。 ページの外観と使用するウィジェットに応じて、ページに追加できるさまざまなタイプの Elementor セクションがあります。
ステップ 3: Elementor ウィジェットを使用した WooCommerce 製品ページのカスタマイズ
- 商品タイトルの追加
WooCommerce製品ページの基本的なElementorセクション構造を配置したので、製品タイトルを追加することから始めることができます. これを行うには、製品ページに製品タイトル ウィジェットをドラッグ アンド ドロップする必要があります。
適切な製品タイトルを表示するには、[コンテンツ] タブをクリックします。その下に、[エディターの更新]オプションがあります。 デモ製品オプションから適切な製品タイトルを選択します。
このデータが適切な製品タイトルを表示するには、 WooCommerce 製品ダッシュボードから適切な製品情報を追加または編集する必要があります。
- 商品ページへのアイキャッチ画像の追加
次に、製品イメージ ギャラリーと製品のフィーチャー イメージが必要になります。 この目的のために、 eコマース向けのオールインワン Elementor アドオンによって提供される複数の画像ウィジェットのいずれかを使用できます。
この例では、ShopReady Thumbnail with Zoom ウィジェットを利用します。これは、タイトルが示唆することを行います。 このウィジェットを使用すると、顧客が製品画像にカーソルを合わせたときに、製品画像の WooCommerce 製品ホバー ズーム バージョンを表示できます。
前と同じように、[デモ製品] オプションの[コンテンツ] タブから正しい製品イメージを選択できます。
- 価格設定ウィジェットのブロックを追加する
eコマース製品ページにあるもう1つの重要な項目は、製品の価格設定ブロックです. このためには、WooCommerce 製品属性を正しい更新で更新し、製品タイトルの下に配置する必要があるShopReady価格ウィジェットを使用する必要があります。
正しい価格を表示するには、[コンテンツ] タブの [デモ製品] オプションから製品タイトルを選択します。
- 商品説明の追加
この WooCommerce 製品アドオンの製品説明ウィジェットを使用して、高度にカスタマイズ可能な製品説明を追加することもできます。 スタイル タブから、製品の説明が大衆にどのように表示されるかをカスタマイズするオプションがあります.
- カートに入れる機能の追加
カートに追加は、顧客がチェックアウト ページに進む前に、カート ページに複数の製品を入れることができるもう 1 つの非常に重要な機能です。
e コマース ショップ ページで強力なカートに追加機能を使用するには、ShopReady カートに追加ウィジェットを利用できます。 このウィジェットを使用すると、顧客がカートに追加ブロックから直接カートの製品数量を増減できるようになります。
また、WooCommerce 製品のスタイリングElementor スタイルタブのタイポグラフィ、色、背景、余白、パディングなどから、Elementor のカートに追加ボタンをカスタマイズすることもできます。
- 商品ページへのメタデータの追加
顧客により良いショッピング エクスペリエンスを提供するには、WooCommerce に商品を追加する際に追加したメタデータと商品属性を使用して、WooCommerce 商品フィルターを実装する必要があります。
これらのデータを製品ページに表示するには、 ShopReady メタウィジェットを検索し、カートに追加ボタンの下にドロップします。
[コンテンツ] タブの [デモ製品] オプションから正しい製品タイトルを選択すると、製品タグとメタデータが正しく表示されます。
- 商品ページにSNSシェアボタンを追加
顧客は、シンプルなソーシャル メディア共有ボタン ブロックを使用して、WooCommerce 製品ページから直接ソーシャル メディアで製品投稿を共有することもできます。 ドラッグアンドドロップの Elementor Social Share ウィジェットを使用するだけで作成できます。
ブロックは、コンテンツタブから直接、ソーシャル メディアのアイコン、テキスト、および共有可能なリンクでカスタマイズできます。 また、Elementor Styleタブからソーシャル共有ブロックの外観を変更するようにカスタマイズすることもできます。
これで、WooCommerce 製品ページのカスタマイズの基本が完了しました。
ステップ 4: 関連製品を WooCommerce 製品ページに追加する
オンラインでの売り上げを伸ばす優れた方法は、WooCommerce 製品アドオンの関連製品ウィジェットを使用して、製品ページに関連製品を紹介することです。 ShopReady関連商品ウィジェットを使用すると、見事な商品スライダー ブロックをセクションで作成できます。
ウィジェットを使用するには、単一の製品ブロックの下にウィジェットをドラッグ アンド ドロップし、単一の製品ページで紹介したい各製品を個別に選択するだけです。
結論は
この有益なガイドが、WooCommerce 製品ページ テンプレートのカスタマイズと、これらの素晴らしいツールを利用して e コマース Web サイトをより優れた機能で盛り上げる方法について、より幅広い理解を得るのに役立つことを願っています.
WooCommerce ポップアップ製品の詳細を製品比較表に追加することで、ShopReady は e コマース マーケットプレイスが必要とするすべてのものを提供できます。 この件に関してご質問がある場合は、下のコメント セクションからお気軽にお問い合わせください。