Avada WooCommerce ビルダーを使用して e コマースを構築する方法

オンライン ストアのセットアップに関しては、WooCommerce が頼りになるpluginです。 オンラインストアを立ち上げて、完成したらすぐに商品の販売を開始するのは、驚くほど簡単です。 Avada は、WooCommerce の包括的なサポートとデザインの統合を提供し、お客様が夢のショップを作成できるようにすると同時に、お客様が思い描いた通りの外観を実現できるようにします。  

Avada は、Web サイトの外観をカスタマイズできる機能を提供することに重点を置いており、これは WooCommerce 統合でも変わりません。 人気の高度なオプション ネットワークを使用すると、次のようなさまざまな設計の可能性を実現するための幅広いカスタマイズから選択できます。

• WooCommerce には、メインの Avada グローバル オプション パネルとは別に、独自の Avada グローバル オプション パネルがあります。
• Avada ページ オプションは各製品で利用できます。
• Avada Builder では、要素をドラッグ アンド ドロップすることで製品ページのデザインを作成できます。

Avada を使用して e コマース サイトを構築するには。 

まず最初に、Avada に wooCommerce をインストールする必要があります。

• WooCommerce のインストール – ステップバイステップの説明
• Web サイトにショップ ページを割り当てる方法
• 製品の作成
• 製品のズーム効果の作成
• WooCommerce での商品画像サイズ設定の調整。

WooCommerce のインストール – ステップバイステップの説明

以下のスクリーンショットに示すように、 Avada >Plugin/ アドオンに移動し、WooCommerceplugin

ステップ 1 – WooCommerceplugin。

ステップ 2 – ドロップダウン メニューから [インストール] を選択します。

plugin自動的にインストールされ、有効化されます。

ステップ 3 – その後、WooCommerce セットアップ ウィザードが表示されます。 Modern Shop や Classic Shop などの Woo デモのいずれかをインポートする場合は、データを失う危険を冒さずにこの手順をスキップできます。 先に進むには、ドロップダウン メニューから [今は行いません] を選択します。 Woo デモのいずれかをインポートしない場合は、「Let's Go!」をクリックして次のステップに進みます。 ボタンをクリックしてセットアッププロセスを開始します。

ステップ 4 – 画面上のプロンプトと指示に従ってプロセスを完了し、ストアに関する必要な情報を入力します。 完了したら [最初の製品を作成] ボタンをクリックすると、最初の製品の作成に進むことができます。 または、セットアップ ウィンドウの下にあるリンクをクリックして、WordPress ダッシュボードに戻ることもできます。

Web サイトにショップ ページを割り当てる方法

通常の WooCommerce インストール プロセスの一部として、セットアップ ウィザードが起動され、ショップを構成し、ショップ ページを顧客に割り当てることができるようになります。 セットアップ ウィザードが作成するページの詳細については、この WooCommerce ドキュメントを参照してください。

また、セットアップ ウィザードが表示されない場合、または何らかの理由でキャンセルした場合は、WooCommerce ページの左上にある [ヘルプ] メニューから [セットアップ ウィザード] を選択することで、いつでもセットアップ ウィザードに戻ることができます。窓。

ショップ ページを手動で設定するには、WooCommerce 設定の [製品] タブ(WooCommerce > 設定 > 製品) に移動し、ドロップダウン メニューからメイン ショップ ページとなるページを選択します。 アクションの結果として、WooCommerce はこのページに商品を表示します。

WooCommerce > 設定 > 詳細にある詳細タブで設定できます。

製品の作成

ステップ 1 – WordPress 管理者のサイドバーで、[製品] > [製品の追加] タブに移動します。

ステップ 2 – ページの上部に製品の名前を入力します。

ステップ 3 – 製品説明のテキストを投稿コンテンツフィールドに入力します。 すべての製品情報がこのセクションに表示されます。

ステップ 4 – 「製品 データ」ボックスにすべての製品情報を入力します。 たとえばamp価格、SKU、配送はすべて可能なオプションです。

ステップ 5 – [製品の簡単な説明] ボックスに、メイン画像の横に表示される製品の簡潔な説明を入力します。

ステップ 6 –メインの注目画像は、ページの右側にある製品 画像 これは製品ごとに完了する必要があります。

ステップ 7 – 単一の画像ではなく画像のギャラリーを使用する場合は、 製品 ギャラリーに画像を追加します

ステップ 8 – [製品 カテゴリ] ボックスに、製品に適用するカテゴリを入力します。 製品 タグの空白に製品に適切なタグを入力します。

ステップ 9 – 必要な情報をすべて入力したら、[公開] ボタンをクリックすると、アイテムがメインのストアフロント ページに表示されます。

製品のズーム効果の作成

Avada > オプション > WooCommerce > 一般 WooCommerce > WooCommerce 製品画像ズーム オプション、または Woo 製品画像要素の一般タブ > ズーム オプションが有効になっていることを確認する必要 WooCommerce レイアウトを使用している場合は、製品画像をズームします

WooCommerce 製品画像の幅– メイン画像の幅 (下記の設定を参照) とアップロードされる画像の実際のサイズは両方とも、 Avada > オプション > WooCommerce > 一般 WooCommerce > WooCommerce 製品画像幅または製品画像の最大幅設定 Woo 製品画像要素内。 単一の製品ギャラリーのコンテナ列の幅は、選択した設定によって決まります。 必要な調整を行ったら、WooCommerce メイン画像の幅を設定する準備が整います。

WordPress のメイン画像の幅– WooCommerce のメイン画像の幅の設定は、WordPress ウェブサイトのカスタマイザーにあります。 WordPress ダッシュボードから、 [外観] > [カスタマイズ] > [WooCommerce] > [製品画像]と、メイン画像の幅設定が表示されます。 これにより、ギャラリーに表示される画像の実際のサイズが決まります。

ズーム効果がより詳細になるほど、画像に設定した画像サイズが大きくなります。 明確にするために、WooCommerce 設定の画像サイズが Avada のグローバル オプションの画像幅と一致する場合、ページ上の画像の上にマウスを置いたときにズームは表示されません。 さらに、アップロードする実際の画像のサイズは、Web サイトのデザインのメイン画像の幅設定と同じかそれより大きくなければなりません。

WooCommerce 画像サイズを変更した後は、必ずサムネイルを再生成してください。 これにより、Web サイトに既にアップロードされている画像に新しい画像サイズが適用されます。 これを行うには、Regenerate Thumbnailspluginを使用できます。

WooCommerce での商品画像サイズ設定の調整。

WooCommerce には、ストアのカタログ画像セクションと単一商品画像セクションの商品画像のサイズを調整するオプションが含まれています。 さらに、WooCommerce ストアで使用される画像サイズと連動する特定の Avada 設定があります。 これらの画像サイズ設定を構成するときは、Avada のグローバル オプション設定も考慮する必要があることに留意することが重要です。 これらの各オプションについては後ほど詳しく説明します。

商品用にアップロードする画像が、ソースでは WooCommerce 設定で指定された画像サイズよりも小さいとします。 その場合、ショップ ページのフロントエンドで視覚的なレイアウトの不一致に気づく場合があります。 これは決してバグではありません。 それは単純に、画像が小さすぎて WooCommerce 設定が影響を及ぼさないためです。 これらの設定は、画像の寸法に関する画像の最大の幅と高さと考えることができます。 指定された制限を下回るものはサイズ変更されません。

ショップを設定するときは、WooCommerce の画像サイズ設定と画像の実際のサイズの両方を必ず考慮してください。 要約すると、画像は WooCommerce ストアの画像サイズ設定と同じか、それよりも大きいサイズにする必要があります。

画像サイズ設定を変更すると、サイトにすでにアップロードされている画像に変更を反映させるために、サムネイルを再生成する必要があります。 したがって、Regenerate Thumbnailspluginの使用を強くお勧めします。 さらに、次の手順を使用して画像サイズを調整できます。

ステップ 1 – 管理者サイドバーで、「外観」タブに移動し、次に「カスタマイズ」タブに移動して、サイトのカスタマイズを開始します。

ステップ 2 –ページの上部にある WooCommerce

ステップ 3 製品 イメージにあります。

ステップ 4 – 単一の商品ページに画像をアップロードするときに、メイン画像の幅オプションを選択します。 サムネイルの幅は、カタログ内の製品のサムネイルの幅です。 空白に希望の幅の値を入力します。

ステップ 5 Pluginにあるpluginを使用する必要があります。 まず、Regenerate Thumbnailsplugin [WP Admin] > [Tools]に移動します。ここで、画像のサムネイルを再生成して、新しい画像サイズを作成することを選択できます。