JetWooBuilderとJetEngineで商品ページを拡張する考え方

WooCommerceの商品ページは、商品名、価格、画像、カートボタンだけなら標準機能でも作れます。けれども、比較されやすい商品や説明量の多い商品では、それだけだと判断材料が足りません。素材、サイズ、保証、使い方、対応する関連商品などを、毎回本文に手書きしていると更新も崩れやすくなります。

この記事では、JetWooBuilderで商品ページの見た目を作り、JetEngineで商品ごとの追加情報をデータとして持たせる考え方を解説します。例にするのは、WooCommerceの商品ページに「商品スペック」と「関連情報」を追加する構成です。

この記事のCTAでは、JetWooBuilder個別リンクではなく、指定済みのCrocoblock公式リンクを使います。複数プラグインを組み合わせる話なので、単体機能だけでなく全体の導入判断として確認してください。

Crocoblock公式サイトを見てみる

この記事で分かること

• JetWooBuilderとJetEngineの役割分担
• 商品ページに追加する入力項目の考え方
• Elementor側で商品テンプレートへ情報を出す方法
• 表示条件で必要な商品だけ追加ブロックを出す考え方
• 商品情報を増やしすぎて管理しづらくなる境界

まず何を作るのか

今回作るのは、通常の商品ページに、商品スペック、保証情報、使い方、関連情報を追加したテンプレートです。WooCommerceの商品として価格や在庫は持ちつつ、JetEngineの入力項目で追加説明を整理します。Elementor側では、JetWooBuilderで単一商品ページのテンプレートを作り、必要な場所に追加情報を表示します。

例として、オンラインショップで販売する「作業用デスクライト」を想定します。標準の商品説明だけでも販売ページは作れますが、購入前に知りたい情報はもう少し細かいはずです。明るさ、対応デスク幅、保証期間、交換パーツ、使い方動画、関連アクセサリー。これらを本文に手書きすると、商品が増えるほど管理が重くなります。

ここでJetEngineを使う理由は、商品情報を文章ではなく入力項目として分けられるからです。比較・更新・出し分けに使う情報は、本文ではなくデータ化する。この考え方が、静的な商品ページとの違いです。

JetWooBuilderとJetEngineの役割

JetWooBuilderは、WooCommerceの商品ページや商品一覧の見た目をElementorで作るためのプラグインです。単一商品ページのテンプレートを作り、商品画像、価格、カートボタン、商品説明、関連商品などを配置していきます。

一方でJetEngineは、商品ごとに追加したい情報を入力項目として持たせたり、その情報を動的に表示したりする役です。商品ページをきれいに作るだけならJetWooBuilderの話で済みますが、商品ごとに違うスペックや保証情報を管理したいなら、JetEngine側の設計が重要になります。

役割を混ぜると、どこで何を直すべきか分からなくなります。見た目はJetWooBuilderのテンプレート、商品ごとの追加データはJetEngineの入力項目、と分けておくと、商品が増えても修正の場所が見えやすくなります。

JetEngineでどのデータを持たせるのか

WooCommerceの商品は、すでに商品名、価格、在庫、商品画像、説明文を持っています。そこにJetEngineで追加するのは、標準項目だけでは扱いにくい情報です。今回なら、商品スペックと関連情報を入力項目として追加します。

ここで大事なのは、文章の見出しを増やすことではありません。購入前の判断に使う情報を、あとから表示しやすい単位に分けることです。素材、サイズ、保証、使い方を1つの長文にすると、テンプレート側で並べ替えたり、商品一覧に一部だけ出したりしにくくなります。

Elementor側ではどう表示するのか

Elementor側では、JetWooBuilderで単一商品ページのテンプレートを作ります。最初に標準の商品情報を置き、その下や横にJetEngineの追加項目を出すイメージです。ページの構成は、次のように考えると整理しやすいです。

• 上部: 商品画像、商品名、価格、カートボタン
• 中部: 商品スペックのカード
• 下部: 使い方、保証、注意文
• 最後: 関連商品やサポート情報

商品スペックは、JetEngineのDynamic Fieldのような動的表示で1項目ずつ出します。たとえば「主な素材」は material_note、「保証期間」は warranty_months から出します。保証期間は数字だけだと分かりにくいため、表示時に「12か月保証」のように前後の文字を足すと読みやすくなります。

商品ページは購入導線があるため、説明ブロックを増やしすぎるとカートボタンが遠くなります。追加情報は、購入前の不安を減らすために置きます。説明したいことを全部並べるのではなく、返品や問い合わせを減らすために必要な情報から優先します。

商品編集画面での入力順を決める

商品ページの拡張で意外と大事なのが、担当者が商品編集画面でどの順番に入力するかです。テンプレート側の見た目だけを先に作ると、編集画面に項目が散らばり、どこを直せば商品ページに反映されるのか分かりにくくなります。

たとえば、商品編集画面では次の順番にまとめます。

• 基本説明: 商品の短い説明と標準価格
• 購入前の確認: サイズ、素材、対応環境
• 安心材料: 保証期間、サポートURL、注意文
• 関連導線: 一緒に使う商品、詳しい使い方ページ

この順番にしておくと、担当者は「購入前の不安を減らす情報」を先に入力できます。商品説明の文章を整える前に、サイズや保証のような確認項目を埋められるため、商品ページの情報不足に気づきやすくなります。

入力項目の名前も、管理画面で読める日本語にしておきます。フィールド名は fit_size のような英数字で構いませんが、ラベルは「対応サイズ」の方が親切です。制作担当者と運用担当者が別の場合、ここを分かりやすくしておくと引き継ぎが楽になります。

表示条件で必要な商品だけ出す

すべての商品に同じ追加ブロックを出す必要はありません。保証情報がある商品だけ保証ブロックを出す、注意文がある商品だけ注意文を出す、といった表示条件を使うと、空欄の見出しが出る事故を減らせます。

サンプルの表示条件は次のように考えます。

この出し分けは便利ですが、条件を増やしすぎるとテンプレートが読みにくくなります。最初は、空欄なら出さない、セール中なら補足を出す、保証があるなら表示する、くらいで十分です。条件が増えてきたら、商品カテゴリごとにテンプレートを分ける方が分かりやすい場合もあります。

運用すると何が楽になるのか

商品情報を入力項目として分けておくと、商品ページの更新が安定します。担当者は商品編集画面で素材や保証期間を直すだけで、テンプレート側の表示に反映できます。本文の装飾を崩したり、商品ごとに見出しの書き方が変わったりする心配が減ります。

また、商品一覧や比較ページへ広げるときにも役立ちます。たとえば、一覧カードに「保証あり」「軽量」「初心者向け」のような短い情報を出したい場合、本文から文字を拾うより、入力項目から出す方が安定します。将来的に絞り込み検索を作る場合も、入力項目として分かれている方が扱いやすいです。

運用面では、商品ページの修正依頼にも対応しやすくなります。「保証期間だけ直したい」「対応サイズだけ変えたい」という依頼なら、テンプレートのHTMLや装飾を触らず、商品編集画面の入力項目だけを直せます。これは小さな違いに見えますが、商品数が増えるほど効いてきます。

さらに、商品ごとに説明文の書き方がばらつく問題も減ります。本文に自由に書いていると、ある商品は「保証1年」、別の商品は「一年保証」、別の商品は書き忘れ、という状態になりがちです。入力項目として分け、テンプレート側で「12か月保証」のように表示を統一すれば、ショップ全体の読みやすさも揃えやすくなります。

関連情報をどこまで増やすか

商品ページを拡張していると、関連情報をどんどん足したくなります。使い方記事、保証ページ、比較表、関連商品、レビュー、動画、問い合わせ前の補足説明。どれも役立つ可能性はありますが、商品ページに全部置くと読みにくくなります。この記事では質問集のような区画は作らず、必要な情報だけをブロックとして考えます。

関連情報は、購入前の迷いを減らすものから優先します。サイズで迷う商品ならサイズ表、保証が不安な商品なら保証説明、組み合わせが重要な商品なら関連アクセサリー。逆に、ブランド紹介や長い制作背景は、商品ページではなく別ページに分けた方がいいこともあります。

JetEngineの関連づけを使うなら、商品と関連記事、商品とアクセサリーのように関係を作れます。ただし、関連づけを増やすほど入力作業も増えます。最初は「商品編集画面で選ぶ関連リンク」くらいから始め、必要になったら本格的な関連データへ広げる方が無理がありません。

小さく試すならどこまで作るか

初回の実装では、商品ページ全体を一気に作り替えなくても構いません。まずは1カテゴリ、または代表的な商品3件だけで試します。たとえば、デスクライトカテゴリの商品にだけ「素材」「対応サイズ」「保証期間」を追加し、単一商品テンプレートにスペック欄を出します。

この段階で見るべきなのは、デザインの完成度よりも入力と表示の往復です。商品編集画面で値を入れる、商品ページで表示を確認する、空欄の商品ではブロックが出ないかを見る。この流れを確認してから、他の商品カテゴリへ広げます。

もし、商品ごとに必要な項目がかなり違うなら、共通項目とカテゴリ別項目を分けます。全商品に必要なのは保証期間と注意文だけ、家具カテゴリだけにサイズ欄、デジタル商品だけに対応環境欄、というように分けると入力の負担を抑えられます。

ここを決めないまま入力項目を増やすと、どの商品でも使わない空欄だらけの管理画面になります。JetEngineは柔軟ですが、柔軟だからこそ、最初に「どの商品で本当に使う項目か」を決める必要があります。

どこから複雑になりすぎるのか

商品ページの拡張は、売り場に近い分だけ慎重にした方がいいです。表示条件を間違えて保証情報が出ない、古い注意文が残る、関連商品のリンク切れに気づかない、といったミスは購入前の不安につながります。JetWooBuilderやJetEngineは便利ですが、商品情報の正確性、在庫管理、決済、法的表示を自動で保証するものではありません。

特に、個人情報、決済、配送、返品条件に関わる表記は、ショップ側のルールと整合させる必要があります。商品テンプレートで見た目を整える前に、WooCommerce側の商品設定、税表示、配送設定、特定商取引法に関わるページなどを別に確認してください。

また、商品数が多いサイトでは、動的表示や条件分岐を増やしすぎると表示速度に影響する場合があります。大量の商品一覧で同じ追加フィールドを多く読み込むなら、表示する情報を絞る、一覧と詳細で出す項目を分ける、キャッシュや表示速度を確認する、といった調整が必要です。

この構成が向いている人・向いていない人

向いているのは、Elementorで商品ページを作り込みたいけれど、商品ごとの細かい情報を本文に手書きしたくない人です。スペックが多い商品、保証や使い方の説明が重要な商品、関連商品を整理したいショップに向いています。

向いていないのは、商品点数が少なく、標準の商品説明だけで十分なサイトです。追加項目を作るほど入力の手間も増えます。まずは標準の商品ページで問題が出ているかを見てから、必要な項目だけを足す方が現実的です。

まとめ

JetWooBuilderとJetEngineを組み合わせると、WooCommerceの商品ページを見た目だけでなく、商品データの扱いから整えられます。JetWooBuilderでテンプレートを作り、JetEngineで素材、サイズ、保証、使い方、関連情報のような追加項目を持たせる。これだけでも、本文に手書きする商品説明より管理しやすくなります。

最初は、すべての商品に必要なスペック欄と、空欄なら出さない保証ブロックくらいから始めるのがおすすめです。商品ページは購入判断に直結するため、便利な出し分けを増やすより、正確で更新しやすい情報設計を優先してください。

Crocoblock公式サイトを見てみる