WooCommerce商品ページのカスタマイズ方法（コードなし方法）

商品ページはWooCommerceストアのデジタル店頭です。ウインドウショッピングがオンラインで行われ、閲覧が購入に変わる場所です。

よく練られた商品ページは、単に項目を紹介するだけではありません。ストーリーを語り、質問に答え、訪問者を「お買い物カゴに入れる」ボタンへと優しく誘導します。

しかし、ここで朗報があります。コーディングの達人でなくても、魅力的でコンバージョンの高い商品ページを作ることができるのです。

この投稿では、ユーザーフレンドリーなページビルダーSeedProdを使ってWooCommerceの商品ページをカスタマイズする方法をご案内します。

なぜWordPressでWooCommerce商品ページをカスタマイズするのか？

初期設定では、セットアップウィザード中にWooCommerceが オンラインストアに商品ページを作成します。残念なことに、それらは最も見栄えの良いものでも、最もコンバージョンに最適化されたものでもありません。

商品ページを最適化することで、購入者がその商品が自分に合っているかどうかを判断しやすくなり、より多くの訪問者を購入者に変えることができる可能性があります。これは、店舗へのトラフィックを増やすことなく収益を増やす最も簡単な方法のひとつです。

それでは、コードなしでWooCommerce商品ページをカスタマイズする方法を見ていきましょう。このガイドのナビゲーションには、以下のクイックリンクをご利用ください：

動画チュートリアル

Subscribe to WPBeginner

文章での説明がお好きな方は、そのまま読み進めてください。

ステップ1: SeedProdプラグインのインストールと有効化

WooCommerceのカスタム商品ページを作成する最も簡単な方法は、SeedProdを使用することです。

SeedProdは最高のドラッグアンドドロップWordPressページビルダーで、300以上のプロがデザインしたテンプレートが付属しています。

さらに良いことに、SeedProdの高度なテーマビルダーを使用すると、コードの行を個別に記述することなく、カスタムのWordPressテーマを作成することができます。

このドラッグ＆ドロップテーマビルダーを使用して、商品ページを含むオンラインストアのあらゆる部分をカスタマイズできます。

SeedProdには既製のWooCommerceテンプレートとeコマースブロックがあり、コンバージョンの高いオンラインストアを素早く作成することができます。

ただ、この方法は現在のWooCommerceテーマを置き換えることになりますのでご注意ください。

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

注： SeedProdには無料版もありますが、WooCommerceブロックとテーマビルダーが付属しているため、プレミアムプラグインを使用します。テーマビルダーを使用するには、Pro以上のサブスクリプションを購入する必要があります。

有効化した後、SeedProd ” Settingsに進み、ライセンスキーを入力してください。

この情報は、SeedProdサイトのアカウントで確認できます。ライセンスキーを入力した後、「Verify Key」ボタンをクリックしてください。

ステップ2：WooCommerceテンプレートキットを選ぶ

あなたのオンラインストアに使用するWooCommerceテンプレートキットを選択します。SeedProd ” Theme Builderにアクセスして、’Theme Template Kits’ボタンをクリックしてください。

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

デザインをプレビューするには、マウスオーバーして虫眼鏡をクリックするだけです。

新しいタブでテンプレートキットが開きます。

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

カスタマイザーでWooCommerceの商品ページを作成するのですから、商品ページのデザインを必ずチェックしてください。後でカスタマイズできる良いベースになるかどうか確認してください。

使いたいテンプレートキットが見つかったら、マウスオーバーし、外観が表示されたらチェックマークをクリックしてください。このガイドではWooCommerceスターターテーマを使用していますが、お好きなテンプレートを使用することができます。

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

これらのテンプレートをすべて見るには、SeedProd ” Theme Builderにアクセスしてください。

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

テンプレートのインストールが完了したら、商品ページのカスタマイゼーションを開始します。

まず、商品ページテンプレートにマウスオーバーし、「デザインを編集」リンクをクリックしてください。

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

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

すべてのWooCommerceテンプレートにはビルトインブロックが付属しており、SeedProdのすべてのデザインのコアコンポーネントとなっています。

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

例えば、このテンプレートには注目商品ブロックがビルトインされており、いくつかの異なる方法でカスタマイズすることができます。

手始めに、左側のメニューにある設定を使ってブロックのサイズとアライメントを変更するとよいでしょう。

高度な’タブには、さらに多くの設定があります。ここでは、枠線や影を追加したり、CSSアニメーションを追加したりして、画像を本当に目立たせることができます。

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

WooCommerceテンプレートには、Add To Cartコールトゥアクションボタンもあります。これにより、買い物客は商品を購入することができるので、ボタンを目立たせたいでしょう。

まず始めに、「カートに入れる」を「今すぐ購入」または「今日ゲット」などのカスタマイザーメッセージに置き換えることができます。この変更を行うには、カートに追加ボタンを選択し、’ボタンテキスト’フィールドに新しいテキストを入力するだけです。

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

SeedProdには、商品ページで使用できる1400以上のFont Awesomeアイコンのビルトインライブラリが付属しています。左側のメニューで、「アイコン」セクションをクリックして展開してください。

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

アイコンの選択」ボタンをクリックしてください。

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

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

どのデザインも、使いたいものをクリックしてください。

テンプレートを選択した後、「詳細設定」タブをクリックすると、ボタンの外観を微調整することができます。ここでは、ボタンと数量ボックスの間隔を変更したり、角をカーブさせるために枠線の半径を大きくしたりすることができます。

もう一つの設定は、’Button Style’ ドロップダウンを開き、リストから新しいスタイルを選択することです。

ほとんどの設定は自明なので、どのような種類のエフェクトが作れるか、一通り見てみる価値はあるだろう。

もう一つの重要なセクションは、商品データタブ・ブロックです。商品タグ、属性、カテゴリーなどの詳細情報が表示されます。

それを念頭に置いて、クリックしてブロックを選択し、左側のメニューでどのような変更ができるか見てみる価値がある。例えば、背景色、文字色、パディングの増加などを変更することができます。

初期設定のブロックを削除するには、そのブロックの上にマウスオーバーするだけです。

ゴミ箱内のアイコンが外観に表示されたらクリックします。

エディターでドラッグ＆ドロップを使ってブロックをページ内で移動させることもできる。

ステップ4：カスタマイザーWooCommerce商品ページの最適化

テンプレートにビルトインされたブロックは素晴らしいスタートですが、商品ページから最高の結果を引き出すためには、それらを最適化する必要があります。

SeedProdには、コンバージョンの高いオンラインマーケットプレイスやストアを作成するために使用できるWooCommerceブロックがたくさんあります。ここでは、WooCommerceの商品ページに追加したいことをいくつかご紹介します。

SeedProd AIを使って商品説明を書く

良い商品説明は、WooCommerceでの販売とチャンスを逃すことの分かれ目になります。しかし、多数の商品に対してユニークで魅力的な説明を書くのは時間がかかるものです。

そこで、SeedProdのAIコンテンツジェネレータのようなAIツールが非常に役立ちます。これらのツールは、あなたのブランド・ボイスと製品仕様に完全に一致するように、あなたが絞り込むことができる出発点を提供します。

SeedProd AIを使用するには、先に進み、商品ページテンプレートの任意の場所にある「短い説明」ブロックをクリックします。次に、左サイドバーパネルの「AIで編集」をクリックします。

あとはプロンプトを入力するだけで、AIに何をジェネレータする必要があるかを伝えることができる。

商品の具体的な詳細（材質など）をインサーターすることで、その項目がどのようなものかを正確に表現したコンテンツになります。そして、「テキストをジェネレータする」ボタンを押してください。

完了すると、完全なジェネレータコンテンツが表示されます。ここで、あなたはそれをそのままにするか、言語をもっとシンプルにするか、テキストをもっとシンプルにするか、長くするかすることができます。

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

テキストの形に満足したら、「インサーター」をクリックする。

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

WooCommerceの関連商品を表示する

商品ページに関連項目を表示することで、より多くの売上を獲得し、平均注文金額を増やすことができるかもしれません。関連商品とは、買い物客がよく一緒に購入する商品や、お互いを補い合うような項目を指します。

例えば、カスタマイザーがノートパソコンを購入した場合、ノートパソコン用バッグにも興味を持つかもしれない。

SeedProdには、既製の関連商品ブロックが付属しています。しかし、このブロックを最大限に活用するには、以下の画像にあるように、WooCommerceプラグインでリンクされた商品を設定する必要があります。

リンクされた商品を追加する方法については、WooCommerceで商品をアップセルする方法のガイドをご覧ください。

これで、SeedProdエディターでProducts Relatedブロックを見つけ、レイアウトにドラッグするだけです。

初期設定では、ブロックは関連商品を個別カラムで1つ表示します。

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

複数の商品を表示する場合、「並び順」ボックスを使ってこれらの項目の並び方を変更できます。例えば、カスタマイザーが最も気に入っている項目として、評価の高い商品を最初に表示することもできます。

順序」ドロップダウンを開き、関連項目を昇順（ASC）または降順（DESC）のどちらで表示するかを選択することもできます。

星の評価を追加する

各商品に星評価を表示することで、買い物客にあなたの項目が良質であることを安心させることができます。そのため、星評価ブロックをデザインにドラッグすることをお勧めします。

最高の結果を得るためには、カスタマイザーが見つけやすい画面の上部に星の評価を表示することをお勧めします。これにより、買い物客は他の買い物客が商品を勧めているかどうかがすぐにわかるので、より早く購入の決断をすることができます。

在庫を見せることでFOMOを利用する

FOMO（買い逃し恐怖症）は、買い物客に今すぐ行動を起こすよう促す。

限定品を販売している場合や、定期的に少量の在庫を確保している場合は、残りの商品数を表示するとよいでしょう。そうすることで、買い物客に、商品が売り切れるのを待つよりも、今すぐ買うよう説得することができます。

この情報を表示するには、Product Stockブロックをデザイン上にドラッグします。

初期設定では、このブロックには残りの項目数が表示され、その後に「在庫あり」と表示されます。この初期設定のテキストに独自のメッセージを追加することもできます。

これを行うには、左側のメニューにある小さなテキストエディターに入力するだけです。テキストを追加する場合は、'[sp_product_stock]’タグを編集しないように注意してください。

アイキャッチ画像を商品に置き換える

商品のアイキャッチ画像によって、買い物客はオンラインストアで何を買うのかを確認することができます。

しかし、個別アイキャッチ画像を商品ギャラリーに置き換えたい場合もあるでしょう。例えば、同じ商品をさまざまな角度から見せることもできます。買い物客が商品をより詳しく探せるように、インタラクティブな360度画像を使用している店舗もあります。

WooCommerce商品にギャラリーを追加した場合、初期設定の商品アイキャッチ画像ブロックをギャラリーブロックに置き換えることは理にかなっています。

これを行うには、注目商品ブロックにマウスオーバーし、ゴミ箱内のアイコンが表示されたらクリックするだけです。

左側のメニューから商品ギャラリー画像ブロックを探し、ページレイアウトにドラッグします。

このブロックをページの上部に追加し、訪問者が何を購入するのかをすぐに確認できるようにすることをお勧めします。

買い物客は商品ギャラリーにマウスオーバーすることで、画像を拡大することができます。

初期設定では、ズームアイコンは現在のアイキャッチ画像の右上に表示されますが、’Position Top’と’Position Right’スライダーを使って変更することができます。

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

また、「Image Border（画像の枠線）」と「Thumbnails（サムネイル）」の枠線設定を使って、さまざまな画像の周りに枠線を追加することも可能です。

共有ボタンでソーシャルメディアで話題を作る

買い物客があなたの商品をソーシャルメディアでシェアすれば、より多くの人があなたのオンラインストアにアクセスするようになります。このことを念頭に置いて、商品ページにソーシャルシェアボタンを追加することをお勧めします。

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

さらにソーシャルネットワークを追加するには、’Add New Share’ボタンをクリックするだけです。

その後、ドロップダウンメニューからソーシャルメディアサイトを選択することができます。

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

大きなソーシャル共有ボタンはより目立つが、カートに入れるを含むページの他のコンテンツの邪魔になるかもしれない。

カスタマイザーとビジネスレビューを表示する

WooCommerceでは、カスタマイザーが商品をレビューすることができます。最高のレビューからの引用や、優れたカスタマイザーサービスについてのコメントなど、強調したいコンテンツを表示することができます。

SeedProdのTestimonialsブロックでは、回転式のテスティモニアルを作成することができ、小さなスペースで多くの情報を表示するのに最適な方法です。

詳しくは、WordPressで回転証言を追加する方法をご覧ください。

WooCommerceで最近表示した商品をハイライトする

最近見た商品」の表示により、カスタマイザーは最近見たけれどもお買い物カゴに入れなかった商品をもう一度見ることができます。これにより、カスタマイザーは商品を比較し、自分に合った項目を見つけることができます。

また、最近訪問したが買い物かごに入れなかった商品を、気持ちを切り替えて購入するチャンスにもなる。

とはいえ、SeedProdのRecent Productsブロックをデザインに加えるのもよいでしょう。

ブロックを追加した後、左側のメニューの設定でカラム数を変更することができます。

たくさんの異なる商品を表示したい場合は、「ページ送り」トグルを有効化してページ送りを追加することができます。

ページ送り」を有効化すると、いくつかの追加設定にアクセスできるようになる。

手始めに、「項目数を表示」トグルを有効化することで、「最近の商品」ブロックの上部に結果の合計数を表示することができます。

また、「Show Order By」スライダーを有効化すると、訪問者が最近の商品を並べ替えることができます。

以下の画像でわかるように、このエリアには「初期設定ソート」ドロップダウンが追加されます。

WooCommerceの人気商品を表示する

商品ページには、売れ筋商品や人気商品を表示するとよいでしょう。これらの項目はすでに好調なので、より多くの人に見せることで、簡単に売上を増やすことができます。

もう一つのオプションは、現在セール中の商品を表示することです。これによって、買い物客は今すぐこれらの項目を購入し、最もお得な買い物をしようという気になる。

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

詳しくは、WooCommerce商品ページに人気商品を表示する方法をご覧ください。

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

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

どのブロックを追加しても、クリックして選択し、左側のメニューの設定を見てください。これらの設定はすべて簡単なので、どのような異なる効果が作れるか見てみる価値がある。

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

商品ページの見た目に満足したら、変更を保存しましょう。保存」の隣にある矢印をクリックし、「公開する」オプションを選択してください。

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

例えば、ヘッダーとフッターのテンプレートを編集して、独自のナビゲーションメニューやお店のカスタマイザーロゴ、その他のコンテンツを追加することが一般的です。WordPressサイトのフッターに追加するもののチェックリストをご覧ください。

その他のテンプレートを編集するには、SeedProd ” Theme Builderにアクセスしてください。そして、カスタマイズしたいテンプレートにマウスオーバーしてください。

その後、’Edit Design’リンクが表示されたら、それをクリックします。

あとは、ブロックを追加してデザインを変更し、左メニューの設定を使ってカスタマイズするだけ。

すべてのテンプレートの設定に満足するまで、この手順を繰り返してください。

カスタムWooCommerceテーマをライブにする準備ができたら、SeedProd ” Theme Builderにアクセスしてください。そして、’SeedProdテーマを有効化’トグルをクリックして’はい’と表示させます。

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

ボーナス：WooCommerceの売上を上げるための専門家のヒント

WooCommerceストアを次のレベルに引き上げたいですか？売上とエンゲージメントを高めるための専門家お墨付きの戦略をご紹介します：

• WooCommerceで魅力的なコンテストを開催– コンテストを開催することで、顧客のロイヤリティとエンゲージメントを高めましょう。顧客をリピーターにする効果的なコンテストの設定と管理方法を学びましょう。
• アップセルをマスターしよう– 戦略的に商品をアップセルすることで、平均注文金額を増やしましょう。このガイドでは、WooCommerceでアップセリングのテクニックを実装する方法をご紹介します。
• クーポンをスケジュールして時間を節約– WooCommerceでクーポンをスケジュールしてプロモーションを自動化しましょう。この時間節約テクニックを使えば、お望みのタイミングでクーポンを発行することができます。
• エクスプレスボタンでチェックアウトを効率化– エクスプレスチェックアウトボタンを追加してお買い物カゴの放棄を減らしましょう。よりスムーズな購入体験のために、この機能を実装する方法をご紹介します。
• 魅力的なBOGOオファーの作成– WooCommerceでBuy-one-get-one-freeオファーを設定してカスタマイザーを魅了し、売上を伸ばす方法をご紹介します。
• ライブセール通知の活用– ライブセール通知で緊急感と社会的証明を作りましょう。WooCommerceストアの設定方法について説明します。
• お買い物カゴの回収– 売り上げの可能性を逃さない。お買い物カゴを回収し、売上につなげる効果的な方法をご紹介します。
• WooCommerceオートメーションの実装– 売り上げを伸ばし、業務を効率化する強力なWooCommerceオートメーションをご紹介します。

この投稿が、コーディングなしでWooCommerce商品ページをカスタマイズするのにお役に立てば幸いです。また、WooCommerceのポップアップを作成して売上を増やす方法や、専門家が選んだあなたのストアに最適なWooCommerceプラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.