Diviのショップモジュールの使い方

こんにちは、根本です。今回は、Diviのショップというモジュールの使い方をご紹介していきます。

Diviのショップモジュールとは？

Diviのショップモジュールは、WooCommerceのプラグインをインストールしている場合に使用することができるモジュールで、WooCommerceで作成した商品を表示することができます。

コンテンツ設定

では、実際にショップモジュールの使い方を確認していきましょう。まずは、コンテンツの設定です。

コンテンツ

• 製品ビュータイプ：商品の表示タイプを選択します。
• 製品数：1つのモジュールで何個の商品を表示するかを設定します。
• 列レイアウト：1つのモジュールの中で商品を何列で表示するかを設定します。

要素

「要素」では、「ページネーションを表示」を「はい」に切り替えるとモジュールの中にページを切り替えるページネーションが表示され、そのモジュールに表示できない商品をページを移動することで表示することができます。

デザイン

オーバーレイ

• オーバーレイアイコン色：オーバーレイ時に表示されるアイコンの色を設定します。
• オーバーレイの背景色：オーバーレイ時の商品画像の背景色を設定します。
• オーバーレイアイコン：オーバーレイアイコンの種類を選択します。

オーバーレイというのは、商品にカーソルを置いた時の効果です。デフォルトだと、青いプラスボタンが表示されます。

画像

• 画像 角丸長方形：商品画像の4つの角の丸みを調節します。
• 画像 ボーダースタイル：商品画像にボーダーを付ける場合は、どの辺に追加するのかを選択します。
• 画像 ボーダー幅：画像につけるボーダーの幅を調節します。「0」だとボーダーが表示されません。
• 画像 ボーダーカラー：ボーダーの色を設定します。
• 画像 ボーダースタイル：「直線」や「二重線」など、ボーダーのタイプを選択します。
• 画像とビデオ：商品画像に付けるシャドー効果を選択します。

「画像」では、商品画像のボーダーを中心に設定していきます。その他にも、上記には記載していませんが、「画像 色相」や「画像 彩度」などを組み合わせて画像の色を調節することができます。

星評価

• Star Rating Alignment：星の位置を設定します。
• Star Rating Color：星の色を設定します。
• Star Rating Size：星の大きさを調節します。
• 星評価 文字間隔：それぞれの星の間隔を調節します。

「星評価」は、商品タイトルの直後に表示されるレビューのことです。

ちなみに、デフォルトでは商品を購入してもらったお客さんはレビューを投稿できないようになっているので、商品の作成画面で、「レビューを有効化」にチェックを入れておきます。

すると、こんな感じで、商品の下の位置にレビューを投稿してもらうフォームが表示されます。

テキスト

• 文字列の揃え：商品名や星の評価、値段テキストの位置をセットで設定します。
• 文字サイズ：全ての文字に適用されるシャドーの設定をします。

「テキスト」では、商品名や星の評価、値段テキスト全てに適用される設定項目になります。別々に細かい設定をしたい場合は、以下のテキストタブで設定をしてみてください。

タイトル・価格・セールバッジ・セールスプライス・テキスト

• 販売バッジカラー：これは、「セールスバッジ テキスト」のみの設定になります。
• フォント：テキストのフォントを変更できます。
• ソフトライト：の文字の太さを選択します。
• 書式のコピー：テキストの書式（斜体にしたり、打ち消し線を引いたり）を設定します。複数の書式を選択することも可能です。
• 文字の揃え：テキストの位置を設定します。
• テキストカラー：文字の色を設定します。
• 文字サイズ：文字の大きさを調節します。
• 文字間隔：テキストの各文字の隙間を調節します。
• 行の高さ：縦の幅を調節します。
• 文字サイズ：テキストにかけるシャドウを設定します。

「タイトル テキスト」と「価格 テキスト」、「セールバッジ テキスト」、「セールスプライス テキスト」の4つのテキスト関連の設定は、ほとんど同じ設定項目になっているので、1つにまとめてしまいました。