オンラインストアのセットアップに関しては、WooCommerceが頼りになるpluginです。 オンラインストアを立ち上げて、完成したらすぐに商品の販売を開始するのはとてつもなく簡単です。 Avadaは、WooCommerceの包括的なサポートとデザインの統合を提供します。これにより、夢のショップを作成しながら、思い描いているフレームに正確に見えるようにすることができます。
Avadaは、Webサイトの外観をカスタマイズする機能を提供することを目的としています。これは、WooCommerceの統合と同じです。 人気の高度なオプションネットワークを使用して、次のようなさまざまな設計の可能性に合わせて、さまざまなカスタマイズから選択できます。
- WooCommerceには、メインのAvadaグローバルオプションパネルとは別に、独自のAvadaグローバルオプションパネルがあります。
- Avadaページオプションは、各製品で利用できます。
- Avada Builderを使用すると、要素をドラッグアンドドロップして製品ページのデザインを作成できます。
Avadaを使用してeコマースサイトを構築します。
まず、AvadaにwooCommerceをインストールする必要があります。
- WooCommerceのインストール–ステップバイステップの説明
- あなたのウェブサイトにショップページを割り当てる方法
- 製品の作成
- 製品のズーム効果の作成
- WooCommerceでの商品画像サイズ設定の調整。
WooCommerceのインストール–ステップバイステップの説明
以下のスクリーンショットに示すように、 Avada > Plugin /アドオンに移動し、WooCommerce pluginを探します。
ステップ1 -WooCommerce pluginをインストールしplugin 。
ステップ2–ドロップダウンメニューから[インストール]を選択します。
pluginは自動的にインストールされ、アクティブ化されます。
ステップ3–その後、WooCommerceセットアップウィザードが表示されます。 ModernShopやClassicShopなどのWooデモのいずれかをインポートする場合は、データを失うリスクなしにこの手順をスキップできます。 先にスキップするには、ドロップダウンメニューから[今すぐではない]を選択します。 Wooデモのいずれかをインポートしていない場合は、[Let's Go！]をクリックして次の手順に進みます。 ボタンをクリックして、セットアッププロセスを開始します。
ステップ4–画面のプロンプトと指示に従ってプロセスを完了し、ストアに関する必要な情報を入力します。 終了時に[最初の製品を作成]ボタンをクリックすると、最初の製品の作成に進むことができます。 または、セットアップウィンドウの下にあるリンクをクリックして、WordPressダッシュボードに戻ることもできます。
あなたのウェブサイトにショップページを割り当てる方法
通常のWooCommerceインストールプロセスの一部として、セットアップウィザードを起動して、ショップを構成し、ショップページを顧客に割り当てることができるようにする必要があります。 セットアップウィザードが作成するページの詳細については、このWooCommerceドキュメントを参照してください。
または、セットアップウィザードが表示されない場合、または何らかの理由でキャンセルした場合は、WooCommerceページの左上にある[ヘルプ]メニューから[セットアップウィザード]を選択すると、いつでもセットアップウィザードに戻ることができます。窓。
ショップページを手動で設定するには、 WooCommerce設定–WooCommerce>設定>製品–の[製品]タブに移動し、ドロップダウンメニューからメインショップページになるページを選択します。 WooCommerceは、アクションの結果として、このページに製品を表示します。
残りのページは、 WooCommerce>Settings>Advanced。
製品の作成
ステップ1 -WordPress管理サイドバーで、[製品]>[製品の追加]タブに移動します。
ステップ2–ページの上部に、製品の名前を入力します。
ステップ3–投稿コンテンツフィールドに製品説明のテキストを入力します。 このセクションには、すべての製品情報が表示されます。
ステップ4– [製品 データ]ボックスにすべての製品情報を入力します。 たとえば amp 、送料はすべて可能なオプションです。
ステップ5– [製品の簡単な説明]ボックスに、メイン画像の横に表示される製品の簡潔な説明を入力します。
ステップ6–メインの注目画像は、ページの右側に商品 画像 これは、すべての製品について完了する必要があります。
ステップ7–単一の画像の代わりに画像のギャラリーを使用する場合製品 ギャラリーに画像を追加します
ステップ8– [製品 カテゴリ]ボックスに、製品に適用されるカテゴリを入力します。 製品 タグ]ボックスに製品に適切なタグを空欄に入力し
ステップ9–必要な情報をすべて入力したら、[公開]ボタンをクリックすると、アイテムがメインのストアフロントページに表示されます。
製品のズーム効果の作成
Avada Layoutsを使用している場合は、WooCommerce ProductImagesZoomオプションがAvada>Options>WooCommerce> General WooCommerce> WooCommerce Product Images Zoomオプション、またはWoo Product タブ WooCommerce Layoutsを使用している場合は、製品画像がズーム
WooCommerce製品画像の幅–メイン画像の幅（以下の設定を参照）とアップロードされた画像の実際のサイズは、どちらもAvada>オプション>WooCommerce>一般的なWooCommerce>WooCommerce製品画像の幅または製品画像の最大幅の設定WooProductImages要素で。 単一の製品ギャラリーのコンテナ列の幅は、選択した設定によって決まります。 必要な調整を行うと、WooCommerceのメイン画像の幅を設定する準備が整います。
WordPressのメイン画像の幅– WooCommerceのメイン画像の幅の設定は、WordPressWebサイトのカスタマイザーにあります。 WordPressダッシュボードから、 [外観]>[カスタマイズ]>[WooCommerce]> [製品画像]に移動します。ここで、[メイン画像の幅]設定が表示されます。 これにより、ギャラリーに表示される画像の実際のサイズが決まります。
ズーム効果が詳細になるほど、画像に設定した画像サイズが大きくなります。 明確にするために、WooCommerce設定の画像サイズがAvadaのグローバルオプションの画像幅と一致する場合、マウスをページ上の画像の上に置いたときにズームは表示されません。 さらに、アップロードする実際の画像のサイズは、Webサイトのデザインの[メイン画像の幅]設定と同じかそれ以上である必要があります。
WooCommerceの画像サイズを変更した後は、必ずサムネイルを再生成してください。 これにより、新しい画像サイズが、Webサイトにすでにアップロードされているすべての画像に適用されます。 これを実現するには、サムネイルの再生成pluginを使用できます。
WooCommerceでの商品画像サイズ設定の調整。
WooCommerceには、ストアのカタログセクションと単一商品画像セクションの商品画像のサイズを調整するためのオプションが含まれています。 さらに、WooCommerceストアで使用される画像サイズと連動して機能する特定のAvada設定があります。 これらの画像サイズ設定を構成するときは、Avadaグローバルオプション設定も考慮する必要があることを覚えておくことが重要です。 これらの各オプションについては、後で詳しく説明します。
商品用にアップロードする画像が、WooCommerce設定で指定された画像サイズよりもソースで小さいと仮定します。 その場合、ショップページのフロントエンドで視覚的なレイアウトの不一致に気付く場合があります。 これは決してバグではありません。 これは、WooCommerceの設定が画像に影響を与えるには画像が小さすぎるためです。 これらの設定は、画像のサイズに関する画像の最大の幅と高さと考えることができます。 指定された制限を下回るものはサイズ変更されません。
ショップを構成するときは、WooCommerceの画像サイズ設定と実際の画像サイズの両方が考慮されていることを確認してください。 要約すると、画像はWooCommerceストアの画像サイズ設定と同じかそれ以上である必要があります。
画像サイズの設定を変更した場合は、サムネイルを再生成して、サイトに既にアップロードされている画像を有効にする必要があります。 したがって、サムネイルの再生成pluginを使用することを強くお勧めします。 さらに、画像サイズは以下の手順で調整できます。
ステップ1-管理サイドバーで、 外観]タブ、[カスタマイズ]タブの順に移動して、サイトのカスタマイズを開始します。
ステップ2– WooCommerce ]タブにし
ステップ3–単一の製品イメージのイメージ設定は、構成ウィンドウの「製品 イメージ」タブにあります。
ステップ4–単一の製品ページに画像をアップロードする場合は、メインの画像幅オプションを選択します。 サムネイルの幅は、カタログ内の製品のサムネイルの幅です。 希望の幅の値を空欄に記入してください。
ステップ5–画像サイズを変更して保存した後でサムネイルを再生成するには、Pluginplugin。 pluginインストールしてから、 WP管理]> [ツール]タブに移動します。このタブで、画像のサムネイルを再生成して、新しい画像サイズを作成することを選択できます。
