オンラインストアを立ち上げるなら、WooCommerce は頼りになる pluginです。驚くほど簡単にオンラインストアを立ち上げ、準備が整えばすぐに商品を販売できます。Avada は WooCommerce 向けの包括的なサポートとデザイン統合を提供しており、理想のショップを構築しながら、思い描いた通りの外観を実現できます。.
Avadaはウェブサイトの外観をカスタマイズする機能を提供することに重点を置いており、WooCommerceとの連携も同様です。人気の高度なオプションネットワークをご利用いただくことで、幅広いカスタマイズオプションから選択し、様々なデザインの可能性を実現できます。
Avada を使用して eCommerce サイトを構築します。.
まず、Avada に wooCommerce をインストールする必要があります。.
Avada >Pluginイン / アドオンに移動しpluginを探します。
ステップ 1 – WooCommerceplugin。
ステップ 2 – ドロップダウン メニューから「インストール」を選択します。
plugin は自動的にインストールされ、有効化されます。.
ステップ3 – その後、WooCommerceセットアップウィザードが表示されます。Modern ShopやClassic ShopなどのWooデモをインポートする場合は、データを失うリスクなしにこのステップをスキップできます。スキップするには、ドロップダウンメニューから「今はしない」を選択してください。Wooデモをインポートしない場合は、「Let's Go!」ボタンをクリックして次のステップに進み、セットアッププロセスを開始してください。
ステップ4 – 画面上の指示に従ってプロセスを完了し、ストアに関する必要な情報を入力します。入力が完了したら「最初の商品を作成」ボタンをクリックすると、最初の商品の作成に進むことができます。または、設定ウィンドウの下にあるリンクをクリックしてWordPressダッシュボードに戻ることもできます。
WooCommerceの通常のインストールプロセスの一環として、セットアップウィザードが起動します。このウィザードでは、ショップの設定やショップページを顧客に割り当てることができます。セットアップウィザードで作成されるページの詳細については、こちらのWooCommerceドキュメントをご覧ください。.
あるいは、セットアップ ウィザードが表示されない場合、または何らかの理由でキャンセルした場合は、ウィンドウの左上にある WooCommerce ページの [ヘルプ] メニューから [セットアップ ウィザード] を選択することにより、いつでもセットアップ ウィザードに戻ることができます。.
ショップページを手動で設定するには、 WooCommerce 設定の「商品」タブ（WooCommerce > 設定 > 商品）に移動し、ドロップダウンメニューからメインショップページとなるページを選択します。これにより、WooCommerce はあなたの操作の結果として、このページに商品を表示します。
WooCommerce > 設定 > 詳細設定にある詳細設定タブで設定できます。
ステップ 1 – WordPress 管理サイドバーで、「製品」>「製品の追加」タブに移動します。
ステップ 2 – ページの上部に製品の名前を入力します。
ステップ3 – 商品の説明文を投稿コンテンツ欄に入力します。商品情報はすべてこのセクションに表示されます。
ステップ4 商品 データ」ボックスに商品情報をすべて入力しますamp、価格、SKU、配送など、あらゆるオプションが考えられます。
ステップ 5 – [製品の簡単な説明] ボックスに、メイン画像の横に表示される製品の簡潔な説明を入力します。
ステップ 6 、ページの右側にある製品 画像の下に配置する必要があります
ステップ 7 単一の画像ではなく画像のギャラリーを使用する場合は、 製品 ギャラリーにさらに画像を追加します
ステップ8 – 「商品 カテゴリー」ボックスに、商品に該当するカテゴリーを入力します。次に、「商品 タグ」ボックスに、商品に該当するタグを入力します。
ステップ 9 – 必要な情報をすべて入力したら、「公開」ボタンをクリックすると、アイテムがメインのストアフロント ページに表示されます。
Avada レイアウトを使用している場合は、 「Avada > オプション > WooCommerce > 全般的な WooCommerce > WooCommerce 製品画像 、または Woo 製品画像要素の「全般」タブ > 「製品画像 WooCommerce レイアウトを使用している場合) で、WooCommerce 製品画像ズーム オプションが有効になっていることを確認する必要があります。
WooCommerce商品画像の幅– メイン画像の幅（下記の設定を参照）とアップロードする画像の実際のサイズは、どちらもAvada > オプション > WooCommerce > 一般的なWooCommerce > WooCommerce商品画像の幅、またはWoo商品画像要素の商品画像の最大幅の設定よりも大きくする必要があります。単一商品ギャラリーのコンテナ列の幅は、選択した設定によって決まります。必要な調整が完了したら、WooCommerceメイン画像の幅を設定できます。
WordPressのメイン画像の幅– WooCommerceのメイン画像の幅の設定は、WordPressウェブサイトのカスタマイザーで確認できます。WordPressダッシュボードから「外観」>「カスタマイズ」>「WooCommerce」>「商品画像」、「メイン画像の幅」の設定があります。この設定で、ギャラリーに表示される画像の実際のサイズが決まります。
ズーム効果をより細かくするには、画像に設定した画像サイズを大きくする必要があります。具体的には、WooCommerce設定の画像サイズがAvadaのグローバルオプションの画像幅と一致している場合、ページ上の画像にマウスオーバーしてもズーム効果は表示されません。また、アップロードする画像のサイズは、ウェブサイトデザインのメイン画像の幅と同じか、それよりも大きくする必要があります。.
WooCommerceの画像サイズを変更した後は、必ずサムネイルを再生成してください。これにより、ウェブサイトに既にアップロードされている画像にも新しい画像サイズが適用されます。これを行うには、Regenerate Thumbnails plugin ご利用ください。.
WooCommerceには、ストアのカタログと個別商品画像セクションで商品画像のサイズを調整するためのオプションがあります。さらに、WooCommerceストアで使用される画像サイズと連動する特定のAvada設定があります。これらの画像サイズ設定を行う際には、Avadaのグローバルオプション設定も考慮する必要があることに注意してください。これらの各オプションについては、後ほど詳しく説明します。.
商品用にアップロードした画像が、WooCommerce設定で指定された画像サイズよりも小さい場合を考えてみましょう。その場合、ショップページのフロントエンドでレイアウトの視覚的な矛盾に気付くかもしれません。これは決してバグではありません。画像が小さすぎてWooCommerce設定の影響を受けなかっただけです。これらの設定は、画像のサイズにおける幅と高さの最大値と考えることができます。指定された制限を下回る画像はサイズ変更されません。.
ショップを設定する際は、WooCommerce の画像サイズ設定と実際の画像サイズの両方を考慮する必要があります。つまり、画像は WooCommerce ストアの画像サイズ設定と同じか、それよりも大きいサイズにする必要があります。.
画像サイズ設定を変更した場合、既にサイトにアップロードされている画像に反映させるには、サムネイルを再生成する必要があります。そのため、Regenerate Thumbnails plugin ご利用を強くお勧めします。また、画像サイズは以下の手順で調整できます。
ステップ 1 - 管理サイドバーで、「外観」タブに移動し、「カスタマイズ」タブに移動してサイトのカスタマイズを開始します。
ステップ 2 –ページ上部の WooCommerce
ステップ 3 – 単一製品画像の画像設定は、設定ウィンドウの「製品 画像」タブにあります。
ステップ4 – 個々の商品ページに画像をアップロードする際、メイン画像の幅のオプションを選択してください。サムネイルの幅は、カタログ内の商品のサムネイルの幅です。空欄にご希望の幅を入力してください。
ステップ5 – 画像サイズを変更して保存した後、サムネイルを再生成するには、 Pluginにあるpluginpluginをインストールし 「WP Admin」>「Tools」に移動して、画像サムネイルの再生成を選択し、新しい画像サイズを作成します。
市場で最も人気のある WordPress テーマの 2 つは、Astra と OceanWP です。プロ…
当社独自のページ ビルダーである Avada Builder が、2 つのインターフェースで利用できるようになりました: Avada…