ElementorでWooCommerceショップページを編集する方法

公開: 2022-01-26

WooCommerceショップがあり、ビジネスを成長させたい場合は、Elementorを使用してWooCommerceショップページを編集する方法を紹介します。

この記事では、いくつかの簡単な手順でWooCommerceショップページを編集するプロセスを紹介します。 プロセスを学ぶためにあなたは最後まで私たちと一緒にいなければなりません。

WooCommerceをインストールし、ビジネスのショップページを設定したと仮定します。 このページを編集するプロセスを示しましょう。

ショップページを編集するための簡単な手順がいくつかあります。 これについて心配する必要はありません。

手順は次のとおりです。

ステップ1:単一の製品テンプレートを作成する

ステップ2:事前に設計された製品ページテンプレートを選択するか、最初から作成します

ステップ3:ページを構成する製品ウィジェットを追加します

ステップ4:別の製品で製品ページをプレビューする

ステップ5:条件を設定する

始めましょう!

ステップ1:単一の製品テンプレートを作成する

ElementorでWooCommerceショップページを編集する方法

Elementorで単一の製品テンプレートの設計を開始し、通常の単一のテンプレートを作成するのと同様の手順に従います。

これを行うには、WordPressダッシュボード>テンプレート>新規追加に移動する必要があります。 次に、テンプレートオプションから[単一ページ]を選択し、[作成]ボタンをクリックする必要があります。

ステップ2:事前に設計された製品ページテンプレートを選択するか、最初から作成します

始めるための最も簡単な方法に従ってください。 事前に設計された製品ページテンプレートの1つを使用して、サイトに合わせてカスタマイズします。 製品ページにはいくつかの異なるスタイルから選択できるため、さまざまなスタイルを選択できます。

ウィジェットの追加を開始する前に、全幅テンプレートに切り替えて、全幅の製品ページで作業していることを確認してください。

Elementorを使用して、製品ページのレイアウトとスタイルを完全にカスタマイズできます。

ゼロから構築する別のオプションがあります。 編集パネルでは、製品の特別なウィジェットを見ることができます。

ステップ3:ページを構成する製品ウィジェットを追加します

次に、商品ページを構成する要素を作成します。 製品ウィジェットの完全なリストについては、このテーマに関するドキュメントをご覧ください。 このチュートリアルでは、次のElementorウィジェットを使用し、他のプラグインは使用しません。

  • 製品タイトルウィジェット
  • 商品画像ウィジェット
  • ウーブレッドクラムウィジェット
  • 簡単な説明ウィジェット
  • 商品評価ウィジェット
  • 製品価格ウィジェット
  • 製品メタウィジェット
  • カートウィジェットに追加
  • 製品関連
  • 製品データタブ
  • アップセルウィジェット

レイアウトをいじったり、要素を移動したりする完全な自由があります。

他のウィジェットを使用して、製品ページをより効果的で魅力的なものにする機会があります。 動的コンテンツ機能を使用して、共有ボタン、召喚状ウィジェット、注目の画像、ドロップダウンメニュー、さらにはカスタムフィールドをテンプレートに追加できます。

ステップ4:別の製品で製品ページをプレビューする

製品テンプレートが正しいデザインであることを確認するために、いくつかの異なる製品でプレビューすることをお勧めします。

左下のパネルにある目のアイコンをクリックしてから、設定をクリックする必要があります。 [プレビュー設定]で、表示する特定の製品を選択します。 次に、適用して確認し、どのように見えるかを確認します。

ステップ5:条件を設定する

これは、商品テンプレートが表示される場所を決定するための条件を設定する最後の段階です。 デフォルトでは、テンプレートはサイトのすべての製品ページに影響します。 製品の特定のカテゴリを選択することもできます。

[公開]をクリックすると、単一の製品が公開されます。

全部できた! これで、wsdgetsを使用してWooCommerceショップページを正常に編集できました。 これで、これまで以上に多くの訪問者をサイトに期待できます。

結論

ElementorのWooCommerceBuilderを使用すると、製品ページを視覚的に作成および微調整するための設計の柔軟性を得ることができます。 これにより、時間を節約でき、アイデアからライブで完全に機能するオンラインWooCommerceストアに移行するまでの時間を大幅に短縮できます。

WooCommerce Webサイトのこの例を見て、インスピレーションを得るために確認できるWooCommerceテーマは多数あります。

一緒にいてくれてありがとう。 良い1日を。