Divi 5のWooCommerce製品モジュールについて知っておくべきことすべて

WooCommerceとの互換性はDivi 5に拡張されており、WooCommerceの組み込みテンプレートに依存せずに製品ページを完全に制御できます。新しく統合されたWooCommerce製品モジュールを使用すると、ブランドに一致する魅力的でユーザーフレンドリーなレイアウトを設計し、販売を促進するのに役立ち、FlexBoxを含むDivi 5のすべての機能をタップして、最新のレイアウトコントロールを備えた製品ページを構築します。

この投稿では、モジュールの主要な機能をカバーし、次のDivi 5 eコマースWebサイトに使用する方法を示します。飛び込みましょう。

WooCommerce製品モジュールとは何ですか？

WOO製品モジュールは、Divi 5内の特殊なコンテンツ要素であり、Woo-Poweredストアの製品とカテゴリページをカスタマイズするように設計されています。これらのモジュールは、プラグインに標準装備されているWooCommerceテンプレートを置き換え、カスタマイズ可能なレイアウトを作成できるようにします。これらの従来のテンプレートとは異なり、Divi 5のモジュールは、WooCommerceのコア機能との互換性を維持しながら、創造的な自由を可能にします。

Divi 5に17のウコンマースモジュールのリリースは、重要なマイルストーンを示しています。これらのモジュールは、すべての製品およびカテゴリページのデザインの側面をカバーしており、レガシーモードではなくなりました。つまり、すべてDivi 5の最新のアーキテクチャに完全に最適化されています。より効率的な基盤へのこの移行により、Divi 5のパフォーマンスが向上し、よりスケーラブルであり、WordPressの将来と互換性があります。

カートとチェックアウトのページに焦点を当てた残りの8つのWOOモジュールは、すぐに展開されると予想されます。

Divi 5のWooCommerce製品モジュールの主要な機能

WooCommerce製品モジュールがDIVI 5に統合された今、あなたが期待できる主要な機能について説明しましょう。

包括的なモジュールセット

Divi 5のWooCommerce製品モジュールの最初のバッチには、製品およびカテゴリページのデザインの特定の側面を処理するために設計されたツールが含まれています。これらのモジュールは次のとおりです。

• Woo Breadcrumbs：ナビゲーションのパンバントレイルを表示して、ユーザーがストアを簡単にナビゲートできるようにします。
• WOO通知：カートの更新、エラー、確認などのシステムメッセージが表示されます。
• WOO製品CARTへの追加：オプションの数量コントロールを備えたカートに追加ボタンをレンダリングします。
• WOO製品の説明：メインの長型製品の説明を出力します。
• WOO製品ギャラリー：グリッドまたはスライダー形式の追加製品画像を表示します。
• WOO製品画像：メイン製品画像または画像のギャラリーを示しています。
• WOO製品情報：重量、寸法、属性などの製品の詳細を表示します。
• WOO製品メタ：製品SKU、カテゴリ、タグを表示します。
• WOO製品価格：販売価格を含む製品の価格を表示します。
• WOO製品評価：平均的な星評価とレビューカウントを示しています。
• WOO製品レビュー：顧客が製品レビューを表示および提出できるようにします。
• WOO製品ストック：製品の可用性と在庫レベルを示します。
• WOO製品タブ：説明、追加情報、レビュー用のデフォルトの製品タブを表示します。
• WOO製品タイトル：カスタマイズ可能な見出しとして製品の名前を出力します。
• Woo Product Upsell：高価値の購入を促進するためにUpsell製品を促進します。
• WOO製品：カテゴリページのカスタマイズ可能な製品グリッドを作成します。
• WOO関連製品：カテゴリまたはタグに基づいて関連製品を表示します。

一緒に、これらのモジュールは、ナビゲーションパン粉から動的な製品ディスプレイまで、製品とカテゴリのページを構築するために必要なすべてを提供します。

創造的な自由

Divi 5のWooCommerce製品モジュールは、標準のWooCommerceテンプレートの制約から無料のユーザーを無料でユーザーにします。これらのモジュールを使用すると、製品ページのレイアウト、構造、設計を完全に制御し、ユニークなエクスペリエンスを作成できます。

モジュールは動的なコンテンツをサポートしています。つまり、製品データをWooCommerceから直接引き出し、価格、株式レベル、および説明のリアルタイムの更新を確保します。これにより、サードパーティのプラグインやカスタムコードを必要とせずに、エンゲージメントとコンバージョンを駆動するページを構築できます。

カスタマイズオプション

各モジュールには広範な設計設定があり、すべてビジュアルビルダー内で管理可能です。タイポグラフィ、色、間隔、アニメーションのオプションを使用して、製品ギャラリー、販売バッジ、ボタンなどなどの要素をカスタマイズできます。

たとえば、WOO製品ギャラリーモジュールのレイアウトを調整して、スライダーまたはグリッドに画像を表示したり、カスタムカラーとホバーエフェクトでカート製品を追加したり、WOO製品評価モジュールを微調整して、デザインと完全に星評価を調整したりできます。

これらの設定では、まとまりのあるブランドのストアページを簡単に作成できます。

テーマビルダー付きの動的テンプレート

Divi 5のテーマビルダーを使用すると、製品およびカテゴリページのグローバルテンプレートを作成できるようにすることで、WooCommerce製品モジュールの可能性を最大限に受け入れることができます。テーマビルダーを使用すると、ストア内のすべての製品とカテゴリに適用される単一のテンプレートを設計し、一貫したまとまりのある外観を確保できます。

動的なウコンマースコンテンツ用のループビルダー

Divi 5ループビルダーは、動的なWooコンテンツを構築する代替方法を提供します。ループビルダーを使用すると、WooCommerce製品を照会し、Divi要素を使用して柔軟な製品ループを設計し、専用製品モジュールの固定構造を超えるレイアウト、リスト、およびカルーセルを作成できます。単一製品レイアウトには、WOO製品モジュールを使用します。製品のコレクションとアーカイブには、ループビルダーを使用します。

Divi 5のWooCommerce製品モジュールの使用方法

このセクションでは、新しいWooCommerce製品モジュールを使用して、Divi 5のテーマビルダーに製品ページの作成を説明します。

新しいテーマビルダーテンプレートを作成します

WordPressダッシュボードでDivi>テーマビルダーに移動します。クリックして、新しいテンプレートを追加します。

[ダイアログ]ボックスが表示されたら、 [新しいテンプレートの構築]をクリックします。

次に、テンプレートを製品に割り当てる必要があります。製品の下で、すべての製品を選択してテンプレートを割り当てます。

[作成]テンプレートをクリックして割り当てます。

[カスタムボディの追加]をクリックします。これにより、製品ページテンプレートの本文を構築できます。

ダイアログボックスが表示されたら、ビルドカスタムボディを選択します。

製品テンプレートを構築します

テーマビルダーが起動したら、テンプレートをゼロから構築したり、施設レイアウトを選択したり、AIで構築したりできます。このチュートリアルのために、ゼロからビルドを選択します。

緑色のアイコンをクリックして、新しい行を追加します。

オプションが表示されたら、 2列の行を選択します。 Divi 5ページまたはテンプレートに追加する新しい行は、デフォルトでFleboxを使用します。 Divi 5のFlexboxレイアウトシステムは、WooCommerce製品モジュールがさまざまな画面サイズにわたってスタックする方法を変更するなど、製品ページの外観をより強く制御できます。

下にスクロールして、 WOO製品モジュールオプションを表示します。クリックすると、17個のDIVI 5 WOOモジュールと8個のレガシー（DIVI 4）モジュールがあります。

Woo Product Imagesモジュールを追加します

Woo Product Imagesモジュールを見つけて選択し、最初の列に追加します。

この投稿は、デフォルトで[コンテンツ]タブの製品フィールドで選択されています。既存の製品を使用してテンプレートを構築する場合は、ドロップダウンメニューから選択してください。これは、テンプレートが作成中にどのように見えるかをプレビューする素晴らしい方法です。最終的な保存の前に、この投稿にそれを交換することを忘れないでください。

要素ドロップダウンメニューを展開して、設定を表示します。ここでは、注目の画像、ギャラリー画像、販売バッジなど、モジュールに表示される画像を制御できます。

[デザイン]タブの画像ドロップダウンメニューをクリックして、設定を表示します。ここでは、利用可能なすべてのスペース（フォースフル幅）を占有するように画像を強制したり、境界線、ボックスシャドウを追加したり、間隔を調整したり、フィルターを追加したりできます。

また、背景色、テキスト、境界などを割り当てることで、販売バッジをスタイリングすることもできます。

WOO製品タイトルモジュールを追加します

2番目の列で、 [製品モジュール]をクリックしてスクロールしてWOO製品タイトルモジュールを選択します。

[コンテンツ]タブの製品フィールドのドロップダウンメニューを使用して、製品を選択し、テンプレート内でどのように見えるかをプレビューします。

次に、[モジュールの設計]タブに移動し、タイトルテキストドロップダウンメニューを展開します。ここでは、フォントを割り当てて、必要に応じて見出しをスタイリングできます。

WOO製品価格モジュールを追加します

製品タイトルの下で、クリックして新しいモジュールを追加します。 WOO製品モジュールとスクロールを選択して、 WOO製品価格モジュールを選択します。

[デザイン]タブでは、テキスト、販売テキスト、新しい価格テキストなど、製品の価格のあらゆる側面をスタイリングできます。

WOO製品評価モジュールを追加します

次に、WOO価格モジュールの下にWOO製品評価モジュールを追加します。

要素の下の[コンテンツ]タブでは、星評価と顧客レビューカウントを表示または非表示にすることを選択できます。

[デザイン]タブでは、レイアウトドロップダウンメニューを使用すると、Star Ratingを表示する方法を選択できます。要素をインラインまたは積み重ねることができます。

その他のスタイリングオプションには、星の色、テキストサイズ、文字間隔の割り当てや、評価テキストのスタイリングオプションが含まれます。

WOO製品説明モジュールを追加します

Woo Star Ratingモジュールの下で、クリックして新しいWooモジュールを追加します。今回は、 WOO製品説明モジュールを選択します。 [コンテンツ]タブで、表示する説明（説明または短い説明）を選択します。

[デザイン]タブでは、フォント、重量、スタイル、アライメント、色、サイズなどのオプションを使用して説明をスタイリングできます。

WOO製品を追加して、カートモジュールに追加します

次に、 CARTモジュールにWOO製品を追加します。顧客はカートに製品を追加し、製品に割り当てられたバリエーションを選択できます。

[コンテンツ]タブの[要素]を切り替えると、数量フィールドと使用可能な在庫を表示または非表示にできます。クイックノート：表示する在庫数量については、WOO製品自体の在庫の管理を確認する必要があります。

フィールドラベル、テキスト、ドロップダウンメニュー（バリエーション用）、および[デザイン]タブのブランディングに合わせてボタンをスタイリングできます。

WOO製品メタモジュールなどのモジュールを続けて、SKU番号とカテゴリを表示します。

WOO製品タブモジュールを追加して、製品に関する説明、レビュー、および追加情報を表示することもできます。

最大限のリーチのために、製品テンプレートに一連の関連製品を表示して、サイトの訪問者が店内で追加の製品を探索することを促進し、変換の可能性を高めることができます。

テンプレートを保存します

モジュールの追加が終了したら、必要な追加の変更を加えてから、テーマビルダーの右上隅にある保存ボタンをクリックしてテンプレートを保存します。

次に、 [終了]ボタンをクリックして、テーマビルダーダッシュボードに戻ります。

テーマビルダーダッシュボードに戻って、 [変更を保存]をクリックしてテンプレートを保存し、WOO製品に適用します。

ご覧のとおり、Divi 5のWoo製品モジュールを使用して製品テンプレートを作成することは簡単なプロセスです。このチュートリアルではすべてのモジュールをカバーするわけではありませんが、それらすべてを使用して、訪問者を引き付ける印象的な製品またはカテゴリページを作成できます。

ファイルをダウンロードします

無料でダウンロードしてください

Divi Newsletterに参加してください。究極のDiviランディングページレイアウトパックのコピーに加えて、他の驚くべき無料のDiviリソース、ヒント、トリックを大量にメールで送信します。フォローすると、すぐにDiviマスターになります。既にサブスクライブされている場合は、以下のメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

サブスクライブに成功しました。メールアドレスを確認してサブスクリプションを確認し、無料の毎週のDiviレイアウトパックにアクセスしてください！

Divi 5のWooCommerce統合の次は何ですか？

WooCommerceモジュールの2番目のバッチは、カートとチェックアウトのページに焦点を当てており、今後数週間でリリースされ、WooCommerceとの統合をまとめます。これらの追加により、ユーザーは製品ブラウジングからチェックアウトまで、eコマースファネル全体を完全にカスタマイズできます。 Divi 5 Public Betaは、これらの機能をさらに改良し、ユーザーのフィードバックと追加のバグ修正を組み込んで安定性を確保します。

Woocommerceの互換性と統合を超えて、Divi 5は、動的製品スライダーを作成するためのグループCarouselモジュール、軽量アニメーションを追加するためのロッティモジュール、および強化されたレイアウト制御のための新しいFlexboxレイアウトシステムなどの最近の機能とともに進化し続けています。これらの追加により、WOOモジュールが補完され、eコマースサイトにさらに創造的な可能性があります。

Divi 5のWOO製品モジュールを今すぐお試しください

Divi 5のWOO製品モジュールを使用すると、比類のない柔軟性と創造性を備えた魅惑的な製品とカテゴリページを作成できます。モジュールは、すべての直感的なインターフェイス内で、創造的な自由、動的なコンテンツ統合、パフォーマンスのブレンドを提供します。カスタマイズ可能な製品ギャラリーからテーマビルダーを介したカスタムレイアウトまで、Divi 5は高いコンバージョンストアページを簡単に作成できます。

Divi 5に飛び込む準備はできていますか？最新のDivi 5 Public Alphaをダウンロードして、これらのモジュールを調査し、WooCommerceサイトをどのように変換できるかを確認してください。私たちはあなたの考えを聞きたいです。コメントでフィードバックを共有するか、ソーシャルメディアチャネルで私たちとつながります。