WooCommerceの製品ページをカスタマイズする方法（コード不要）

WooCommerceの商品ページは、訪問者を顧客に変える上で多くの役割を果たします。

しかし、デフォルトのレイアウトを使用している場合、それらのページは他の何千ものストアと同じように見えがちで、個々の商品が際立つのが難しくなります。

良いニュースは、ブランドを反映し、訪問者を購入に導く商品ページを作成するために、開発者を雇ったりコーディングを学んだりする必要がないということです。

いくつかのページビルダーをテストした後、SeedProdを使用すると、ビジュアルなドラッグ＆ドロップエディターでこのプロセスが簡単になることがわかりました。

このガイドでは、コードを一行も触ることなく、プロフェッショナルに見え、コンバージョン率の高いカスタムWooCommerce商品ページを作成する方法を説明します。

優れたWooCommerce製品ページとは？🤔

優れたWooCommerceの商品ページは、カジュアルな閲覧者をバイヤーに変えます。ストアはそれぞれ異なりますが、コンバージョン率の高いページには通常、これらの5つの重要な要素が共有されています。

• 高品質な商品画像：顧客は商品を触ることができないため、明確なビジュアルは信頼を築き、品質を伝えるために不可欠です。
• 魅力的な商品紹介: 機能だけでなく、利点を強調する説得力のあるコピーを使用し、ユーザーがなぜあなたの製品を必要とするのかを理解できるようにしましょう。
• 明確な行動喚起 (CTA): 「カートに追加」ボタンはページ上で最も目立つ要素であるべきで、ユーザーは次に何をすべきかを正確に把握できます。
• ソーシャルプルーフ: レビュー、星評価、お客様の声を表示することは、訪問者にあなたの製品が信頼できるものであることを安心させるのに役立ちます。
• アップセルとクロスセル: 関連製品や高価格帯の製品を提案することで、ユーザーの閲覧を続けさせ、平均注文額を増やすことができます。

ここに、これらのデザイン原則を実践しているNutribulletの素晴らしい例があります。

さて、コードなしでWooCommerceの商品ページをカスタマイズする方法を見ていきましょう。このガイドをナビゲートするために、これらのクイックリンクを使用できます。

ステップ1：SeedProdプラグインをインストールして有効化する

WordPress には WooCommerce 商品ページを編集する方法がいくつかありますが、ストアオーナーにとって最も効果的なソリューションは SeedProd であることがわかりました。その理由は以下のとおりです。

標準のWordPressサイトエディターとは異なり、このWooCommerceプラグインを使用すると、商品ページのデザインを完全に制御できます。標準のエディターでは提供されない、高度なeコマース固有の機能を利用できます。

多くのドラッグ＆ドロップページビルダーは、複雑な機能と分かりにくいインターフェースでユーザーを圧倒します。SeedProdは異なるアプローチを取ります。そのクリーンで直感的なインターフェースは、学習曲線なしでページを作成するのに役立ちます。

SeedProdは、WooCommerceに特化したツールでも際立っています。すぐに使用できる300以上のデザイン済みのテンプレートと、専門的なeコマースブロックにアクセスできます。

ドラッグ＆ドロップビルダーを使用すると、カスタムコードを作成せずにストアのあらゆる要素をカスタマイズできます。初心者でもプロでも、数時間ではなく数分でプロフェッショナルな見た目のWooCommerceページを作成できます。

SeedProdは、オンラインストアを始めたばかりの場合や、より良い結果を得るためにテーマを変更することを検討している場合に最適です。現在のテーマは置き換えられますが、ストアのデザインを完全に制御したい場合は、その変更は価値があります。

このチュートリアルではSeedProdの有料版を使用します。有料ですが、限定のSeedProdクーポンコードを使用して、購入をさらに節約できます。さらに、商品ページをカスタマイズするために必要な主要機能はプレミアムバージョンでのみ利用可能です。

すべての機能と実際の例の詳細については、SeedProd の包括的なレビューをご覧ください。

まず最初に行う必要があるのは、SeedProdプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、SeedProd » 設定に移動してライセンスキーを入力してください。

この情報はSeedProdウェブサイトのアカウントで見つけることができます。ライセンスキーを入力したら、「キーの検証」ボタンをクリックしてください。

ステップ2：WooCommerce テンプレートキットを選択する

これが完了したら、あなたのオンラインストア用のWooCommerceテンプレートキットを選択する時間です。単にSeedProd » Theme Builderに移動し、「Theme Template Kits」ボタンをクリックしてください。

カスタムWooCommerceテーマを作成しているので、「WooCommerce」タブをクリックしてすべてのeコマースキットを表示します。

デザインをプレビューするには、マウスカーソルを合わせ、虫眼鏡アイコンをクリックするだけです。

これにより、テンプレートキットが新しいタブで開きます。

これはライブプレビューなので、リンクをクリックしたり、メニューをナビゲートしたり、ボタンを使用したり、その他のインタラクティブなコンテンツとやり取りしたりすることで、キット内の他のデザインを見ることができます。

カスタムのWooCommerce製品ページを作成しているので、製品ページのレイアウトを確認してください。後でカスタマイズできる良いベースになるかどうかを確認してください。

使用したいテンプレートキットを見つけたら、カーソルを合わせて、表示されるチェックマークをクリックします。このガイドではWooCommerce Starter Themeを使用しますが、好きなテンプレートを使用できます。

SeedProdはキット全体をWordPressウェブサイトにインポートするため、そのキットを使用してカスタム商品アーカイブ、ショップページ、ブログインデックスなどを作成できます。

これらのすべてのテンプレートを表示するには、SeedProd » Theme Builderに移動してください。

ステップ3：WooCommerce商品ページテンプレートのカスタマイズ

テンプレートをインストールしたら、WooCommerceの商品ページをカスタマイズする準備ができました。

開始するには、事前にデザインされた商品ページテンプレートにカーソルを合わせ、表示される「デザインを編集」リンクをクリックします。

これにより、テンプレートがSeedProdのドラッグ＆ドロップエディタで開かれ、右側にWooCommerceテンプレートのプレビュー、左側にいくつかのブロック設定が表示されます。

SeedProdは、WooCommerceの商品コンテンツを使用して、商品ページがどのように表示されるかの例を表示します。

すべてのWooCommerceテンプレートには、SeedProdのデザインのコアコンポーネントである組み込みブロックが付属しています。

ブロックをカスタマイズするには、ページプレビューでクリックして選択し、左側のメニューで変更を加えるだけです。

たとえば、テンプレートには、いくつかの方法でカスタマイズできる組み込みの「注目の商品」ブロックが含まれています。

開始するには、左側のメニューでブロックのサイズと配置を調整したい場合があります。

「詳細設定」タブでさらに多くの設定を見つけることができます。ここでは、境界線を追加したり、影を追加したり、CSSアニメーションを追加したりすることで、画像を際立たせることができます。

変更を加えると、ライブプレビューが自動的に更新されるため、さまざまな設定を試して、オンラインストアで最も見栄えの良いものを確認できます。

WooCommerceテンプレートには、カートに追加する「カートに追加」ボタンもあります。これにより、買い物客はあなたの製品を購入できるようになるため、ボタンを目立たせたいと思うでしょう。

開始するには、「カートに追加」を「今すぐ購入」や「今日手に入れよう」などの独自のカスタムメッセージに置き換えることができます。

ボタンにアイコンフォントを追加して、訪問者がこのボタンの機能を一目で理解できるようにすることもできます。

SeedProd には、商品ページで使用できる 1,400 以上の Font Awesome アイコンの組み込みライブラリが含まれています。左側のメニューで、「アイコン」セクションをクリックして展開します。

アイコンをボタンテキストの前または後に表示するかどうかを選択できるようになりました。

決定したら、「アイコンを選択」ボタンをクリックするだけです。

使用できるすべての異なるFont Awesomeアイコンが表示されます。気に入ったアイコンを見つけたら、クリックしてください。

ボタンのメッセージに満足したら、「テンプレート」タブをクリックして見た目を変更できます。ここでは、使用できるさまざまなボタンテンプレートが見つかります。

これらのデザインのいずれかを使用するには、目的のデザインをクリックするだけです。

テンプレートを選択した後、「詳細設定」タブをクリックすることで、ボタンの外観を微調整できます。ここで、ボタンと数量ボックスの間隔を変更したり、角丸を作成するために境界線の半径を増やしたりできます。

その他のオプションとして、「ボタンのスタイル」ドロップダウンを開き、リストから新しいスタイルを選択します。

設定のほとんどは自己説明的です。そのため、さまざまな種類の効果を作成できるかどうかを確認するために、それらを確認する価値があります。

もう1つの重要なセクションは、商品データタブブロックです。これは、商品タグ、属性、カテゴリなどの詳細情報を買い物客に表示します。

これを踏まえて、ブロックを選択してクリックし、左側のメニューでどのような変更が可能かを確認する価値があります。たとえば、背景色、文字色を変更したり、パディングを増やしたりできます。

デフォルトのブロックを削除するには、ブロックの上にマウスカーソルを合わせるだけです。

次に、表示されるゴミ箱アイコンをクリックします。

エディターのドラッグ＆ドロップ操作で、ブロックをページ上で移動させることもできます。

ステップ4：WooCommerceの商品ページを最適化する

テンプレートに組み込まれているブロックは素晴らしい出発点ですが、製品ページから最良の結果を得るためには、それらを最適化する必要があります。

SeedProd には、コンバージョン率の高いオンラインマーケットプレイスやストアを作成するために使用できる多くの WooCommerce ブロックがあります。参考までに、WooCommerce 商品ページに施したい変更点をいくつかご紹介します。

SeedProd AIを使用して商品紹介文を作成する

優れた製品説明は、WooCommerceの売上と機会損失の違いを生む可能性があります。しかし、多数の製品に対してユニークで魅力的な説明を書くのは時間がかかる場合があります。

ここで、SeedProd の AI コンテンツジェネレーターのような AI ツールが非常に役立ちます。これらは、ブランドの声や製品の仕様に完全に一致するように、後で洗練できる出発点を提供します。

SeedProd AIを使用するには、製品ページテンプレートのどこかにある「短い説明」ブロックをクリックします。次に、左側のサイドバーパネルで「AIで編集」をクリックします。

次に、AI に生成させたい内容を指示するプロンプトを入力します。

商品に関する具体的な詳細（例：素材など）を追加して、コンテンツが商品の内容を正確に説明するようにできます。その後、「テキストを生成」ボタンを押します。

完了すると、生成されたコンテンツ全体が表示されます。ここでは、そのままにしておくか、言語をよりシンプルにするか、テキストをよりシンプルまたは長くすることができます。

テキストのトーンを変更したり、多言語オンラインストアを運営している場合は、テキストを複数の言語に翻訳することもできます。

テキストの外観に満足したら、「挿入」をクリックするだけです。

AI ツールの使用方法の詳細については、マーケティングを強化するために AI を使用する方法に関するガイドをお読みください。

関連するWooCommerce商品を表示する

商品ページに関連商品を掲載することで、より多くの売上を上げ、平均注文額を増やすことができるかもしれません。これらは、買い物客が一緒に購入しやすい商品や、互いを補完する商品である可能性があります。

例えば、顧客がラップトップを購入した場合、ラップトップバッグにも興味があるかもしれません。

SeedProd には、すぐに使える「関連商品」ブロックが付属しています。

ただし、このブロックを最大限に活用するには、関連商品をセットアップする必要があります。これは、「商品データ」セクションに移動し、「関連商品」タブをクリックすることで実行できます。これは次の画像で確認できます。

手順については、WordPressでWooCommerceの商品レコメンデーションを追加する方法に関するガイドを参照してください。

これが完了したら、SeedProdエディターで「関連商品」ブロックを見つけて、レイアウトにドラッグします。

デフォルトでは、ブロックには関連商品が1つ、1列で表示されます。

「列」と「ページあたりの投稿数」のボックスに新しい数字を入力するか、矢印ボタンをクリックすることで、より多くの商品を表示できます。

複数の商品を表示する場合、「並び替え」ボックスを使用して商品の配置を変更できます。たとえば、顧客が最も気に入っているように見えるため、評価の高い商品を最初に表示することができます。

「注文」ドロップダウンを開き、関連アイテムを昇順（ASC）または降順（DESC）で表示するかどうかを選択することもできます。

星評価を追加する

各製品に星評価を表示すると、買い物客にあなたのアイテムが良い品質であることを安心させるのに役立ちます。そうは言っても、デザインにスター評価ブロックをドラッグしたいかもしれません。

最良の結果を得るために、星評価を画面の上部に表示することをお勧めします。これにより、顧客は簡単に見つけることができます。これにより、他の購入者が商品を推奨しているかどうかをすぐに確認できるため、買い物客はより迅速に購入の決定を下すことができます。

商品在庫を表示してFOMO（取り残されることへの恐れ）を利用する

FOMO（「機会損失への恐れ」の略）は、顧客に今すぐ行動を起こすよう促します。

限定版の商品を販売している場合や、定期的に在庫が少ない場合は、残りの商品の数を表示したい場合があります。これにより、買い物客は、商品が売り切れるリスクを待つのではなく、今すぐ購入するように促すことができます。

この情報を表示するには、「商品在庫」ブロックをデザインにドラッグします。このブロックは、「商品の在庫設定」で「在庫管理」を有効にしている場合にのみデータを表示することに注意してください。

デフォルトでは、ブロックには在庫数とそれに続く「在庫あり」が表示されます。このデフォルトのテキストに独自のメッセージを追加したい場合があります。

これを行うには、左側のメニューにある小さなテキストエディタに直接入力するだけです。テキストを追加する場合は、「[sp_product_stock]」タグを編集しないように注意してください。このタグは、SeedProd が残りのアイテムの総数を表示するために使用します。

おすすめ画像（Featured Image）を商品に置き換える

商品の注目の画像は、オンラインストアで買い物客が何を購入しているかを確認できるようにします。

ただし、単一のアイキャッチ画像を商品ギャラリーに置き換えたい場合もあります。例えば、同じ商品を異なる角度から表示したい場合などです。一部のストアでは、インタラクティブな360度画像を使用して、顧客が商品をより詳細に確認できるようにしています。

WooCommerce製品にギャラリーを追加した場合、デフォルトの製品の目玉画像ブロックをギャラリーブロックに置き換えるのが理にかなっています。

これを行うには、アイキャッチ商品ブロックにカーソルを合わせ、表示されたゴミ箱アイコンをクリックします。

次に、商品ギャラリー画像ブロックを左側のメニューで見つけて、ページレイアウトにドラッグします。

このブロックはページの上部近くに追加することをお勧めします。これにより、訪問者は購入するものをすぐに確認できます。

ショッパーは、製品ギャラリーにマウスを重ねることで、画像を拡大できます。

デフォルトでは、ズームアイコンは現在の目玉画像の右上隅に表示されますが、「上部位置」と「右位置」のスライダーを使用してこれを変更できます。

「フォントサイズ」スライダーを使用して虫眼鏡アイコンを大きくしたり小さくしたり、アイコンの色や背景色を変更したりすることもできます。

「画像境界線」と「サムネイル」の境界線設定を使用して、さまざまな画像の周りに境界線を追加することも可能です。

シェアリングボタンでソーシャルメディアで話題を作りましょう

ショッパーがあなたの商品をソーシャルメディアで共有すると、より多くの人をオンラインストアに誘導できます。それを念頭に置いて、商品ページにソーシャル共有ボタンを追加することをお勧めします。

SeedProdには、Facebook、Twitter、LinkedIn、Pinterestに対応したソーシャル共有ブロックがあります。このブロックをページにドラッグアンドドロップするだけで、FacebookとTwitterの共有ボタンが自動的に追加されます。

その他のソーシャルネットワークを追加するには、「新規共有を追加」ボタンをクリックするだけです。

次に、ドロップダウンメニューからソーシャルメディアサイトを選択できます。

使用したいすべてのネットワークを追加した後、「サイズ」ドロップダウンを使用して共有ボタンのサイズを変更できます。

より大きなソーシャル共有ボタンはより目立ちますが、カートに追加するなどの他のコンテンツから注意をそらす可能性があります。

お客様の声とビジネスレビューを表示する

WooCommerceでは、顧客が個々の製品をレビューできますが、顧客の証言を表示したい場合もあります。これらは、最高のレビューからの引用、優れた顧客サービスに関するコメント、または強調したいその他のコンテンツである可能性があります。

SeedProdのレビューブロックを使用すると、回転するレビューを作成できます。これは、限られたスペースに多くの情報を表示するのに最適な方法です。

詳細については、WordPressでローテーション testimonialを追加する方法に関するガイドをご覧ください。

WooCommerce で最近表示された商品を強調表示する

「最近表示した商品」セクションは、顧客が最近見たがカートに追加しなかった商品を再確認することを奨励します。これにより、顧客は商品を比較し、自分に合ったアイテムを見つけることができます。

また、顧客が考えを変えて、最近見たがショッピングバスケットに追加しなかった商品を購入する機会も与えます。

それを踏まえて、SeedProdの最近の商品ブロックをデザインに追加することを検討してください。

ブロックを追加した後、左側のメニューの設定を使用して列数を変更できます。

さまざまな商品をたくさん表示したい場合は、「ページネーション」トグルをアクティブにしてページネーションを追加できます。

「ページネーション」を有効にした場合、追加の設定にアクセスできるようになります。

まず、「最近の商品」ブロックの上部に「商品数表示」トグルを有効にすることで、結果の総数を表示できます。

「並べ替え」スライダーを有効にすることも検討してください。これにより、訪問者は最近の製品を並べ替えることができます。

次の画像でわかるように、これにより領域に「デフォルトの並べ替え」ドロップダウンが追加されます。

最も人気のあるWooCommerce製品を表示する

おすすめ商品や評価の高い商品を商品ページに表示することを検討してください。これらの商品はすでに好調なので、より多くの人に見せることで、より簡単に売上を伸ばすことができます。

もう1つのオプションは、現在セール中の商品を表示することです。これにより、顧客は最良の取引を得るために、これらの商品を今すぐ購入する動機付けになります。

SeedProdには、これらの商品を自動的に取得できるブロックがいくつかあります。トップセラーを表示したい場合は、ベストセラー商品ブロックをデザインに追加してください。

WooCommerceの商品ページで人気商品をどのように表示するかについては、こちらのガイドをご覧ください。

星評価が最も高い商品を表示したい場合は、トップ評価商品ブロックをページにドラッグします。

最後に、現在セール中のすべての商品を一覧表示するセール商品ブロックがあります。

どのブロックを追加する場合でも、クリックして選択し、左側のメニューにある設定を確認してください。これらの設定はすべてわかりやすいので、さまざまな効果を作成するために確認する価値があります。

ステップ5：カスタム WooCommerce 商品ページを公開する

製品ページの見た目に満足したら、変更を保存する時間です。「保存」の横にあるドロップダウン矢印をクリックし、「公開」オプションを選択してください。

カスタム商品ページは、カスタムWooCommerceテーマ全体を有効化するまで、オンラインストアに表示されません。これにより、テーマキット内の他のデザインを確認し、SeedProdのドラッグ＆ドロップビルダーを使用して変更を加えることができます。

例えば、通常はヘッダーとフッターのテンプレートを編集して、独自のナビゲーションメニュー、ストアのカスタムロゴ、その他のコンテンツを表示したいと思うでしょう。

他のテンプレートを編集するには、SeedProd » Theme Builder にアクセスしてください。次に、カスタマイズしたいテンプレートにカーソルを合わせます。

その後、表示される「デザインを編集」リンクをクリックできます。

次に、さらにブロックを追加して、左側のメニューの設定を使用してカスタマイズすることで、デザインを変更します。

すべてのテンプレートの設定が完了するまで、これらの手順を繰り返してください。

カスタムWooCommerceテーマを公開する準備ができたら、SeedProd » Theme Builderに移動します。次に、「SeedProdテーマを有効化」トグルをクリックして「はい」と表示させます。

さて、オンラインストアにアクセスすると、カスタムWooCommerce商品ページがライブで表示されます。

ボーナス：WooCommerceの売上を伸ばすための専門家によるヒント

WooCommerceストアを次のレベルに引き上げたいですか？売上とエンゲージメントを向上させるための専門家が承認した戦略をいくつかご紹介します。

• 魅力的なWooCommerceコンテストを実行する – コンテストを作成して、顧客のロイヤルティとエンゲージメントを高めます。顧客が繰り返し利用したくなる効果的なコンテストを設定および管理する方法を学びます。
• アップセルの技術を習得する – 戦略的に商品をアップセルすることで、平均注文額とコンバージョン率を向上させます。当社のガイドでは、WooCommerce でアップセル技術を実装する方法を説明しています。
• クーポンをスケジュールして時間を節約する – WooCommerce でクーポンをスケジュールしてプロモーションを自動化します。この時間節約テクニックにより、セールが希望どおりのタイミングで公開されます。
• エクスプレスボタンでチェックアウトを効率化 – エクスプレスチェックアウトボタンを追加して、カート放棄を減らします。よりスムーズなショッピング体験のためにこの機能を実装する方法を説明します。
• 魅力的なBOGOオファーを作成する – WooCommerceで1つ購入するともう1つ無料になるオファーを設定する方法を学び、顧客を惹きつけ、売上を伸ばしましょう。
• ライブセール通知を活用する – ライブセール通知で緊急性とソーシャルプルーフを作成します。当社のガイドでは、WooCommerceストアでこれを設定する方法を説明しています。
• 放棄されたカートを回復する – 潜在的な販売を逃さないでください。放棄されたカートを回復し、販売に転換するための効果的な方法を探ってください。
• WooCommerceの自動化を実装する – 売上を増やし、業務を効率化するのに役立つ強力なWooCommerceの自動化機能を発見してください。

動画チュートリアル

WPBeginnerを購読する

WooCommerceの商品ページに関するよくある質問

WooCommerceの製品ページをカスタマイズすることについて、読者からよく寄せられる質問を以下に示します。

SeedProdで商品ページをコンバージョン向けに最適化できますか？

はい、もちろんです！ SeedProd には、訪問者を顧客に変えるのに役立つように設計された組み込みのマーケティングツールが付属しています。

ドラッグ＆ドロップビルダーを使用すると、次のようなコンバージョン重視の要素を簡単に追加できます。

• カウントダウンタイマー – フラッシュセールや期間限定オファーの緊急性を高めます。
• 信頼を築くための、レビューやお客様の声ブロックを使用したソーシャルプルーフ。
• 商品ページから直接購読者リストを増やすためのメールオプトインフォーム。
• 割引や特別プロモーションを強調するための、目を引くバナーまたはコールトゥアクションブロック。

これらの要素はすべて、ストアのブランディングに合わせてスタイル設定でき、商品ページがプロフェッショナルに見え、より多くの売上を促進します。

SeedProd のカスタマイズは WooCommerce のアップデート後に壊れますか？

いいえ、そうはなりません。SeedProdは独自のブロックを使用して独立したテンプレートを構築するため、WooCommerceやテーマが更新されても、カスタム商品ページのデザインはそのまま維持されます。

WooCommerceのコアファイルを一切変更しないため、変更は安定しており、アップデートにも影響されません。

とはいえ、完全な互換性と新機能へのアクセスを確保するために、SeedProdとWooCommerceの両方を最新バージョンに更新しておくことは常に良い考えです。

SeedProd でどのような WooCommerce 要素を追加できますか？

SeedProd は、コーディングなしでカスタム商品ページを構築するための専用 WooCommerce ブロックを幅広く提供します。簡単に次を追加できます：

• 製品タイトル、画像、ギャラリーで商品を展示します。
• 購入を容易にする製品価格とカートに追加ボタン。
• 商品の詳細を明確にするための商品説明と短い説明。
• ソーシャルプルーフを強調するための商品レビューと評価。
• 追加購入を促進するための関連記事とアップセル。

WooCommerceブロック以外にも、SeedProdのマーケティングツールを使用してページを改善し、視覚的に魅力的なページを維持しながらコンバージョンを向上させることができます。

この記事が、コーディングなしでWooCommerceの製品ページをカスタマイズするのに役立ったことを願っています。また、WooCommerceのポップアップを作成して売上を伸ばす方法や、ストア向けのおすすめのWooCommerceプラグインに関するガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。