Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

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

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

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

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

How to customize WooCommerce product pages (no code method)

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

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

The default WooCommerce product page

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

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

動画チュートリアル

Subscribe to WPBeginner

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

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

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

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

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

The SeedProd theme builder

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

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

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

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

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

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

Adding the SeedProd license key to your WordPress website

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

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

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

Installing a WooCommerce template kit using SeedProd

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

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

Previewing a WooCommerce website kit

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

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

An example of a WooCommerce template, created using SeedProd

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

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

SeedProd's WooCommerce starter template

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

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

Creating a custom product page using SeedProd

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

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

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

Customizing a product page using SeedProd

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

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

The SeedProd drag and drop page builder

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

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

The SeedProd theme builder

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

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

The Featured Product Image WooCommerce block

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

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

Customizing WooCommerce blocks using SeedProd

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

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

An Add To Cart button on an online store

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

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

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

SeedProd's Font Awesome icon library

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

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

SeedProd's built-in Font Awesome library

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

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

Adding templates to an Add To Cart button

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

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

Adding a button style to a WooCommerce product page

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

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

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

Product data tabs on an eCommerce store

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

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

Deleting blocks in WooCommerce

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

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

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

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

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

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

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

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

Editing the product description in SeedProd with AI

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

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

Inserting a prompt into the SeedProd AI tool

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

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

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

Revising the SeedProd AI-generated text and inserting it

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

WooCommerceの関連商品を表示する

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

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

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

Adding linked products in WooCommerce

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

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

A products related section on an online store

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

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

Showing related products on a custom WooCommerce page design

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

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

How to change the order of related products on a custom WooCommerce store

星の評価を追加する

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

Adding star ratings to a custom product page

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

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

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

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

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

Showing the product stock on an eCommerce site

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

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

Adding your own messaging to an online store

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

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

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

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

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

Replacing the featured product image

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

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

A WooCommerce product image gallery

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

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

Customizing the product image 'zoom' icon

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

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

Adding borders to product images using SeedProd

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

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

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

Adding social sharing icons using SeedProd

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

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

Adding social sharing icons for Facebook, Twitter, and more

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

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

Changing the size of social networking icons in WordPress

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

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

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

Creating a rotating customer testimonial

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

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

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

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

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

The SeedProd Recent Products block

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

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

Adding pagination to your online store

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

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

Showing an items count in a 'recently viewed products' section

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

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

Adding filtering and sorting to an online store

WooCommerceの人気商品を表示する

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

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

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

Highlighting your best selling products

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

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

Highlighting top rated WooCommerce products

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

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

Showing reduced and sale products

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

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

Publishing a custom WooCommerce product page

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

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

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

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

Editing the header template

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

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

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

Publishing a custom WooCommerce theme using 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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

7件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. THANKGOD JONATHAN says

    Thank you for the post.
    But will I be able to do this with the Seedpro and Woocommerce free version? or should I upgrade first before I could be able to do that?

  3. THANKGOD JONATHAN says

    I have WPforms already installed on my site with my woocommerce store. Will I be able to do that with it or should I switch to Seedprod instead?

    • WPBeginner Support says

      WPForms is for creating forms on your site, for changing your site’s design you would need to use a plugin like SeedProd.

      管理者

  4. John Akpama says

    Lovely and insightful tutorial. I’m guessing this is relatively easier for stores with one product or a few products. If you have over a hundred products is there a way to make this a global template and apply automatically to all products without having to build one after the other? Thanks in advance

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。