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テンプレートには、カートに追加するCTAボタンもあります。これにより、買い物客はあなたの製品を購入できるようになるため、ボタンを目立たせたいと思うでしょう。

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

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

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 には、すぐに使える「関連商品」ブロックが付属しています。

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

手順については、「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でローテーションするお客様の声を追加する方法」に関するガイドを参照してください。

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でも私たちを見つけることができます。