最新のSeedProdニュース

ビジネス成長を支援するWordPressチュートリアル、ヒント、リソース

WooCommerceショップページを簡単にカスタマイズする方法

WooCommerceストアのページを簡単にカスタマイズする方法 

執筆者: 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。
    
レビュー担当者: レビュアーアバター ターナー ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同創設者です。彼は20年以上のビジネスおよび開発経験を持ち、彼のプラグインは2500万回以上ダウンロードされています。

要約:WooCommerceストアのページをカスタマイズする方法

あなたのWooCommerceショップページは、テンプレートファイルから構築された商品アーカイブであるため、通常のページのように編集することはできません。代わりにこれらの方法を使用します。

  1. 概要 – WooCommerceのarchive-product.phpテンプレートから生成される、ストアのメイン商品リスト
  2. 方法1:SeedProd – WooCommerceブロックと完全なデザインコントロールを備えたドラッグ&ドロップビルダー、コード不要
  3. 方法2:WordPressエディター – ブロックテーマではサイトエディター、クラシックテーマではWooCommerceカスタマイザー
  4. ショップページタイトル – 名前を変更したり、AIOSEOでSEOタイトルを変更したり、スタイルを変更したり、非表示にしたりできます
  5. カテゴリページ – すべてのカテゴリページは、一度カスタマイズする商品アーカイブテンプレートから生成されます
  6. 商品ギャラリー – 商品エディターにギャラリー画像を追加し、SeedProdの商品ギャラリー画像ブロックで表示します

クライアントのために最初に設定したWooCommerceストアでは、ショップページが素っ気なく、ブランドイメージと全く合っていませんでした。

もしあなたが同じような状況なら、心配しないでください。WooCommerceはWordPressにeコマースを追加する最も一般的な方法であり、一行のコードを書かずにWooCommerceショップページをカスタマイズできます。

ドラッグ&ドロップビルダーまたはWordPressの組み込みエディターを使用してページ全体を再設計する方法を説明します。その後、ショップページのタイトル、商品カテゴリページ、商品ギャラリーに進みます。

WooCommerceストアページとは何ですか?

WooCommerceストアページは、ストアのすべての商品を一覧表示するデフォルトの商品アーカイブページです。WooCommerceをインストールすると、テーマのレイアウト設定を使用してこのページが自動的に作成されます。

ストアのメインカタログまたはストアフロントと考えてください。通常、顧客は特定の商品のページにクリックする前にここで閲覧します。

デフォルトでは、ストアページは商品リストからコンテンツを取得し、以下を表示します:

  • 商品画像
  • タイトルと短い説明
  • 価格
  • 商品カテゴリとタグ
  • 星評価とレビュー(有効な場合)

テーマとWooCommerceのテンプレートファイルから動的に生成されます。

プレーンな商品グリッドレイアウトを表示するデフォルトのWooCommerceショップページ

適切に設計されたストアページは、訪問者が探しているものをすばやく見つけるのに役立ち、購入プロセスでの摩擦を減らし、売上を増加させます。

WordPressエディターでWooCommerceストアページを直接編集しても、期待どおりには機能しません。ストアページは、WooCommerceがPHPフックとショートコードを使用して商品アーカイブを動的に表示するために使用する、archive-product.phpという名前のテンプレートファイルから生成されます。

だから、ショップページで「ページを編集」をクリックしても、WooCommerceのショップページテンプレートや商品グリッドを制御することはできません。カスタマイズするには、SeedProdのようなプラグインが必要になります。これはテンプレートを独自のデザインに置き換えたり、組み込みのWooCommerceカスタマイザーやサイトエディターのオプションを使用したりします。

WooCommerceのショップページをカスタマイズすべき理由

物理的な店舗に入ったときに、棚に商品が無造作に散らばっていて、看板やカテゴリ、おすすめ商品がない状況を想像してみてください。おそらくすぐに店を出るでしょう。

多くの買い物客が、デフォルトのWooCommerceショップページにアクセスしたときに経験するのはまさにこれです。文脈や方向性のないプレーンな商品グリッドは、高い直帰率と販売機会の損失につながります。

ショップページをカスタマイズすると、以下のことができます。

  • ユーザーエクスペリエンス(UX)を向上させることで、顧客がお探しのものを簡単に見つけられるようにする
  • コンバージョンを増加させることで、ベストセラー、セール、または高利益率の商品を強調する
  • SEOを改善することで、キーワードを豊富に含んだコンテンツとスキーママークアップを追加する
  • 直帰率を下げることで、より良いナビゲーションと視覚的な階層を提供する
  • ブランドの信頼を構築することで、お客様の声、レビュー、またはユーザー生成コンテンツを表示する

最適化されたWooCommerceストアのデザインは、訪問者をバイヤーに変えるための重要な部分です。まだストアをゼロから構築している場合は、WordPressでオンラインストアをセットアップする方法に関するこのガイドが良い出発点になります。

WordPressでWooCommerceショップページをカスタマイズする方法

WordPressでWooCommerceショップページをカスタマイズするには、いくつかの方法があります。詳しく見ていく前に、オプションを簡単に見てみましょう。

方法最適コードが必要?
SeedProd完全なデザインコントロール、カスタムレイアウト、バナー、特集セクション、ブランドに合わせたWooCommerceショップいいえ
WordPressエディター(サイトエディター / カスタマイザー)簡単なレイアウト変更、商品の並び順、列数、追加プラグイン不要いいえ
AIOSEO検索結果に表示されるショップページのSEOタイトルを変更するいいえ
カスタムコードツールでは提供されない高度な変更はい(開発者推奨)

方法1:SeedProdを使用してWooCommerceショップページをカスタマイズする

最初の方法として、SeedProdを使用して完全にカスタムなWooCommerceショップを構築します。

SeedProd ドラッグ&ドロップ WordPress ウェブサイトビルダー

SeedProdは、WordPress向けの最高のドラッグ&ドロップウェブサイトビルダーであり、100万人以上のユーザーがいます。コードなしでカスタムWordPressテーマ、コンバージョン率の高いランディングページ、レスポンシブなウェブサイトレイアウトを作成できます。

GTmetrixでページ速度を測定したところ、SeedProdは556ミリ秒で読み込まれ、Elementorの1,882ミリ秒と比較して、HTTPリクエストは半分でした。これは、ページ速度が重要なカスタムWooCommerceショップにとって強力な選択肢となります。

このプラグインでは、WooCommerceとの連携により、オンラインストア全体を作成することも可能です。数回のクリックで、ショップページ、商品ページ、ショッピングカート、チェックアウトなどをカスタマイズできます。

SeedProdには300以上のプロフェッショナルなテーマとテンプレートが用意されています。そこから、使いやすいコンテンツブロックとセクションを使用して、WooCommerceストアのデザインをカスタマイズできます。

SeedProdでWooCommerceショップページをカスタマイズするには、これらの手順に従ってください。

ステップ 1. SeedProd ウェブサイトビルダーをインストールする

最初のステップは、SeedProdウェブサイトビルダープラグインのコピーをダウンロードすることです。

無料版の制限: SeedProdの無料版では、シンプルなランディングページを作成できます。このチュートリアルで紹介するWooCommerceブロックは、SeedProd Eliteプランに含まれています。

次に、WordPressウェブサイトにSeedProdをインストールする必要があります。ヘルプが必要な場合は、 WordPressプラグインのインストール の手順に従ってください。

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

ライセンスキーフィールドを表示するSeedProd設定ページ

SeedProdウェブサイトにログインし、「ダウンロード」セクションからコピーすることで、ライセンスキーを見つけることができます。

SeedProdライセンスキーを見つける

ライセンスキーを入力し、次のステップに進む前に ライセンスキーの確認 ボタンをクリックしてください。

ステップ2.カスタムWooCommerceテーマを作成する

SeedProdのテーマビルダーは、WooCommerceのショップページをカスタマイズするものです。既存のWordPressテーマを上書きし、独自のデザインに置き換えます。

WordPressダッシュボードから SeedProd » Theme Builder に移動すると、それを見つけることができます。

SeedProdテーマビルダーダッシュボード

SeedProdでeコマーステーマを作成するには、2つの方法があります。

  1. テーマの各部分(テンプレート)を個別に作成する
  2. 既製のWordPressテーマテンプレートで、すべてのテーマテンプレートを作成する

このチュートリアルでは2番目のオプションを使用します。これにより、WooCommerceウェブサイトのすべての部分が自動的に作成されるためです。

画面上部の テーマ ボタンをクリックして、SeedProdのテーマテンプレートギャラリーを起動します。オンラインストアのデザインを含む多くのテーマから選択できます。

WooCommerceストアデザインのSeedProdテーマテンプレートギャラリー

このチュートリアルでは、「家具店」テーマを使用します。

テーマをインポートするには、サムネイルにカーソルを合わせ、チェックマークアイコンをクリックします。

SeedProd WooCommerceストアの家具店テンプレートの選択

下のスクリーンショットに示すように、SeedProdはテーマのすべてのテンプレートを自動的に作成します。これには以下が含まれます:

テーマビルダーで自動的に作成されたSeedProd WooCommerceテーマテンプレート

各テンプレートは、SeedProdのドラッグアンドドロップビルダーでカスタマイズできます。ステップ3でショップページテンプレートをカスタマイズする方法を説明します。

ステップ3. WooCommerceショップページをカスタマイズする

SeedProdでWooCommerceショップページをカスタマイズするには、「ショップページ」テンプレートにカーソルを合わせ、 デザインを編集 リンクをクリックします。

SeedProd WooCommerceショップページテンプレートの編集デザインリンク

リンクをクリックすると、ショップページテンプレートがSeedProdのビジュアルドラッグアンドドロップページビルダーで開きます。

左側には、ページに追加できるブロックとセクションがあります。右側では、ページがどのように見えるかをリアルタイムでプレビューできます。

WooCommerceショップページのプレビューを表示するSeedProdドラッグ&ドロップビルダー

デフォルトでは、ショップページにすべての商品のリストが表示されます。新しいレイアウト、コンテンツブロック、セクションを追加することで、これを変更できます。

たとえば、セールやプロモーションを紹介するスクロールバナーを追加したいとします。その場合は、 イメージカルーセル ブロックをドラッグして、カスタムバナー画像をアップロードできます。

WooCommerceショップページに追加されたSeedProd画像カルーセルブロック

次に、ブロック設定でカルーセルをダークまたはライトテーマに変更したり、スライダーを自動再生したり、画像キャプションを表示したりしてカスタマイズできます。

SeedProd画像カルーセルブロックの設定パネル

注目の商品やベストセラー商品を強調したい場合はどうすればよいでしょうか?そのためには、ページに新しいセクションを追加し、下にスクロールしてWooCommerceブロックパネルに移動し、ベストセラー商品ブロックをページにドラッグします。

WooCommerceショップページでのSeedProd売れ筋商品ブロック

このブロックは、トップセラー商品を均一なグリッドで表示します。

均一なグリッドで表示されるWooCommerce売れ筋商品

カスタム背景色を指定することで、この新しいページセクションをより目立たせることができます。

カスタム背景色のオプションを表示するSeedProdセクション設定

次に、ベストセラー商品ブロックの詳細設定で、色、タイポグラフィ、カートに追加ボタンを変更できます。

SeedProd WooCommerce商品グリッド詳細設定パネル

SeedProdのWooCommerceブロックを使用して、カテゴリ別に商品を表示することもできます。そのためには、商品グリッドブロックをドラッグし、「クエリタイプ」をカスタムクエリに変更して、カテゴリで選択オプションをクリックします。

SeedProd製品グリッドをWooCommerceカテゴリのカスタムクエリに設定

そこから、商品グリッドに含めるカテゴリを選択できます。

ショップページに追加できるその他のブロックには、次のようなものがあります。

  • お客様の声で信頼性と信憑性を高める
  • カウントダウンタイマーでセールに緊急性を作り出す
  • よくある質問を表示するアコーディオン
  • ユーザー生成コンテンツを表示するためのFacebookまたはTwitter埋め込み

さらに、WooCommerceのショップページのタイトルを変更することもできます。これはこのガイドの後半で説明します。

ショップページに満足したら、画面右上にある緑色の保存ボタンをクリックします。

SeedProdの緑色の保存ボタンでWooCommerceショップページの変更を公開

これで、同じプロセスに従って、WooCommerceストアの他の部分をカスタマイズできます。「テーマエディター」のいずれかの「デザインを編集」をクリックし、ブランドに合わせてレイアウトとスタイルをカスタマイズします。

ステップ4. カスタムショップページを公開する

WooCommerceサイトが希望どおりの外観になったら、公開する準備ができました。そのためには、 SeedProd » テーマエディター に移動し、右上隅にある「SeedProdテーマを有効にする」トグルを「はい」の位置に切り替えます。

SeedProdテーマビルダーの有効化トグルでカスタムWordPressテーマをアクティブ化

これで、WooCommerceのショップページをウェブサイトでライブプレビューできます。

カスタマイズされたWooCommerceショップページのSeedProdライブプレビュー

方法2:WordPressエディターを使用してWooCommerceショップページをカスタマイズする

サードパーティ製のビルダーを使用したくない場合は、WordPressとWooCommerceにはショップのレイアウトを調整するための組み込みツールが用意されています。どちらのオプションを使用するかは、アクティブなeコマーステーマによって異なります。

サイトエディター(ブロックテーマ)を使用する

サイトでブロックテーマ(Twenty Twenty-FourやTwenty Twenty-Fiveなど)を使用している場合は、サイトエディターでWooCommerceショップページテンプレートを直接編集できます。

WordPressダッシュボードから外観 » エディターに移動します。テンプレートリストを開き、商品カタログテンプレート(一部のテーマではショップと表示されます)を探します。それをクリックしてテンプレートエディターを開きます。

サイトエディターでWooCommerce製品カタログテンプレートを編集

そこから、ブロックを追加、削除、または並べ替えて、WooCommerceショップのレイアウトを変更できます。完了したら、保存をクリックします。

WordPressブロックエディターで製品カタログテンプレートにブロックを追加および並べ替え

クラシックカスタマイザー(クラシックテーマ)を使用する

サイトでクラシックテーマを使用している場合、WooCommerceはWordPressカスタムizerに直接表示設定を追加します。

WordPressダッシュボードから外観 » カスタマイズに移動します。次に、カスタマイズオプションを表示するにはWooCommerce » 商品カタログをクリックします。

「ショップページの表示」ドロップダウンメニューをクリックし、レイアウトを選択します。

たとえば、「カテゴリーを表示」を選択すると、ショップページに商品カテゴリーのみが表示されます。

WooCommerceカスタム製品カタログの表示設定パネル

または、「商品を表示」を選択すると、商品のみが表示されます。

「カテゴリーと商品を表示」オプションを使用すると、まず商品カテゴリーを表示し、次に商品のグリッドを表示することもできます。

製品カテゴリと製品グリッドの両方を表示するWooCommerceショップページ

また、商品を次のように並べ替えることもできます。

  • 人気
  • 平均評価
  • 最新
  • 価格

また、各ページに表示する1行あたりの商品数と行数を選択することもできます。

WooCommerceカスタムの1行あたりの製品数と1ページあたりの行数の設定

これは、WooCommerce Customizerを使用してスタイル設定されたショップページのプレビューです。

カスタマイズ後のWooCommerceカスタムショップページのプレビュー

WooCommerceでショップページのタイトルを変更する方法

WooCommerceは、インストール時にショップページの名前を「Shop」としますが、多くのストアオーナーはそれを変更しません。クラフトストアの場合、「Handcrafted Creations」のようなより説明的なタイトルは、訪問者が閲覧を開始する前に、あなたが何を販売しているかを伝えます。

SEOにも役立ちます。検索エンジンはタイトルを使用してページの内容を理解するため、関連キーワードを含むタイトルは、ストアがランク付けされる可能性を高めます。

適切な方法は、変更したいタイトルによって異なります。ページ自体のタイトルか、検索結果のタイトルか。ここでは4つの方法すべてを紹介します。

WordPressでショップページの名前を変更する

最も簡単な方法は、他のWordPressページと同様にショップページの名前を変更することです。WordPressダッシュボードのPagesに移動し、ショップページ(通常は「Shop – Shop Page」と表示されます)を見つけて、Editをクリックします。

WordPressの「固定ページ」リストでWooCommerceのショップページを見つける

エディターの上部にある古いタイトルを削除し、新しいタイトルを入力して、Updateをクリックします。

WordPressエディターでショップページのタイトルを変更する

これにより、ページ上、ブラウザタブ、検索結果、およびページをリストするパンくずリストやナビゲーションメニューなど、すべての場所でタイトルが変更されます。

AIOSEOでショップページSEOタイトルを変更する

ページ上のタイトルはそのままにして、検索結果のタイトルで販売を促進したい場合があります。その検索リスティングタイトルはSEOタイトルであり、Googleでストアを訪問する前に人々が見るものです。

Google検索結果のデフォルトのWooCommerceショップページタイトル

それを変更するために、私はAll in One SEO (AIOSEO)を使用しています。これは300万人以上のユーザーを持つ最高のWordPress SEOプラグインです。無料版ではカスタムページタイトルを処理し、Pro版では完全なWooCommerce SEOサポートを追加します。

プラグインがセットアップされたら、WordPressエディターでショップページを開き、AIOSEO Settingsボックスまでスクロールダウンします。

AIOSEO設定でWooCommerceショップページのSEOタイトルを変更する

Page Titleフィールドにカスタムタイトルを入力するか、スマートタグを使用して自動的に作成します。次に、Updateをクリックすると、次回ページがクロールされるときに検索エンジンに新しいタイトルが表示されます。

SeedProdでショップページタイトルを変更する

方法1でSeedProdを使用してショップページを作成した場合、タイトルは他のすべてのブロックと同様にブロックです。SeedProd » Theme Builderに移動し、ショップページテンプレートの「Edit Design」をクリックします。

ビジュアルエディターでタイトルをクリックし、新しいタイトルを入力します。同じパネルから、サイズ、見出しレベル、配置、モバイル表示を調整できます。

SeedProdのビジュアルエディターでWooCommerceショップページのタイトルを編集する

タイトルの色とフォントを変更するには、詳細設定タブをクリックし、ポイント&クリックのスタイリングオプションを使用します。

SeedProdでのWooCommerceショップページタイトルの高度なスタイリングオプション

見た目が気に入ったら、保存をクリックします。

ショップページタイトルを非表示にする方法

カスタムバナーやヒーロー画像が語るように、時には最適なタイトルはタイトルがないことです。CSSの簡単なコードでショップページのタイトルを非表示にできます。

WordPressダッシュボードから外観 » カスタマイズに移動し、追加CSSをクリックします。

追加CSSを使用してWooCommerceでショップページのタイトルを非表示にする

テキストボックスに次のコードを入力し、公開をクリックします。

.woocommerce-products-header {
   display: none;
}

後でタイトルを元に戻すには、コードを削除して再度公開します。WordPressの最高のコードスニペットプラグインであるWPCodeを使用してスニペットを追加することもできます。これにより、ワンクリックでオン/オフを切り替えることができます。

非表示は削除ではありません:このCSSはフロントエンドでタイトルを非表示にするだけです。見出しはページのHTMLに残るので、検索エンジンは引き続き読み取ることができます。

WooCommerceでデフォルトのショップページを変更する方法

WooCommerceでは、ショップページとして機能するページを完全に変更することもできます。カスタムページを作成し、それをストアの入り口として使用したい場合に便利です。

WooCommerce » 設定に移動し、商品タブを開きます。「ショップページ」の見出しの下にある「ショップページ」ドロップダウンから任意のページを選択し、変更を保存をクリックします。

WooCommerceは、そのページを商品アーカイブとして使用します。ショップページは、商品パーマリンクのベースとしても機能するため、切り替えた後は商品URLを再確認してください。

WooCommerceの製品カテゴリページをカスタマイズする方法

検索エンジンは、一般的なストアフロントよりも「ロードバイク」のような特定の検索に一致するため、商品カテゴリページに直接誘導することがよくあります。ストアのページだけが買い物客の目に触れるわけではありません。

ほとんどのストアでは、これらのページは単なる商品グリッドのままです。適切な見出し、バナー、レイアウトでカテゴリページをカスタマイズすると、買い物客が検索するキーワードでランク付けされ、到着したときに滞在する理由が生まれます。

まず商品カテゴリを追加する

まだ商品をカテゴリに整理していない場合は、そこから始めます。WordPressダッシュボードから 製品 » カテゴリ に移動します。

「商品」メニューからWooCommerceに商品カテゴリを追加する

各カテゴリに名前、スラッグ、説明、サムネイルを付けます。その後、WooCommerceは各カテゴリのページを自動的に作成し、次にカスタマイズするのはそれらのページです。

SeedProdでカテゴリページテンプレートをカスタマイズする

ストアのすべてのカテゴリページは、Product Archivesと呼ばれる単一のテーマテンプレートから作成されます。一度カスタマイズすれば、すべてのカテゴリページが一致するように更新されます。

方法1でSeedProdを使用してストアを構築した場合、このテンプレートはすでにWooCommerceテーマの一部です。SeedProd » テーマビルダー に移動し、「Product Archives」テンプレートにカーソルを合わせ、デザインを編集 をクリックします。

SeedProdのテーマビルダーの「商品アーカイブ」テンプレートの「デザイン編集」リンク

テンプレートは、ストアページに使用したものと同じドラッグアンドドロップエディタで開きます。すでに配置されている「アーカイブタイトル」と「アーカイブ製品」の2つのブロックがあります。

SeedProdのドラッグ&ドロップエディターで開かれた「商品アーカイブ」テンプレート

アーカイブタイトルブロックは、各カテゴリの正しい見出しを自動的に表示します。買い物客が「ブラックバイク」カテゴリを開いた場合、見出しはあなたが何もしなくても「カテゴリ:ブラックバイク」と表示されます。

ダイナミックなカテゴリ見出しを表示するSeedProdの「アーカイブタイトル」ブロック

アーカイブ製品ブロックは、買い物客が表示しているカテゴリにフィルタリングされたグリッドを表示し、製品についても同様のことを行います。

フィルタリングされたカテゴリ商品グリッドを表示するSeedProdの「アーカイブ商品」ブロック

左側の設定パネルでブロックをクリックしてスタイルを設定します。タイトルのサイズ、配置、見出しレベルを変更してから、高度なタブでフォント、色、間隔を微調整できます。

SeedProdの「アーカイブタイトル」ブロックの詳細なスタイリング設定

そこから、SeedProdのブロックとセクションを使用して、レイアウト全体を再設計できます。画像ブロックをドラッグして、最新のセールを宣伝するカテゴリバナーを追加したり、製品の横に証言ブロックをドロップして、買い物客が閲覧中に実際の顧客レビューを確認できるようにします。

ここでは、アーカイブブロックを幅広の列に移動し、その隣の狭い列に証言を追加しました。

商品グリッドの横にレビューを配置した、カスタムWooCommerceカテゴリページレイアウト

カテゴリページのデザインに満足したら、保存 をクリックします。方法1でSeedProdテーマがすでに有効になっている場合、変更はすべてのカテゴリページにすぐに反映されます。

SeedProdで構築された、WooCommerceのカスタム商品カテゴリページ(完成)

ストアページ自体にもカテゴリリンクを表示したいですか?製品グリッドブロックを方法1、ステップ3 のようなカスタムクエリに設定するか、製品カタログ設定 の「カテゴリを表示」をオンにします。

ストアページの仕事は、買い物客に製品をクリックさせることです。その後、製品ページで販売を完了する必要がありますが、単一の写真でそれができることはめったにありません。

私はWooCommerceストアで作業したことがありますが、製品ページを除いてすべてが洗練されていました。それらは1つか2つの画像しかなく、異なる角度、色、または詳細を示すものが何もありませんでした。

商品画像のギャラリーを追加したことで、その状況はすぐに変わりました。顧客はページに長く滞在し、質問は減り、実際の店舗で商品を吟味するように商品を詳しく見ることができるようになりました。

WooCommerceには、標準で基本的な商品ギャラリーが付属しています。ここでは、その設定方法と、方法1で作成したのと同じSeedProdテーマを使用して、見た目をカスタマイズする方法を説明します。

まず、商品に表示する追加の写真を用意します。WordPressダッシュボードで商品 » 全商品に移動し、更新したい商品を見つけて、編集をクリックします。

WooCommerce商品の編集

商品エディターで、右側にある「商品ギャラリー」パネルを探します。商品ギャラリー画像を追加リンクをクリックします。

商品ギャラリー画像を追加する

これによりWordPressメディアライブラリが開きます。ここで新しい写真をアップロードしたり、既存の写真を選択したりできます。Shiftキーを押しながら複数の画像を選択し、ギャラリーに追加をクリックします。

商品ギャラリーに画像を追加する

これで、メインの商品画像の下にギャラリーのサムネイルが表示されます。更新をクリックして商品を保存します。

WooCommerce商品ギャラリー

これでギャラリーの内容は整理されました。表示方法(レイアウト、ズーム、ライトボックス)は、商品ページテンプレートによって異なります。そこでSeedProdが登場します。

方法1でSeedProdを使用してショップを作成した場合、すでに商品ページテンプレートがあります。これは、個々の商品ページの外観をすべて制御します。

SeedProd » テーマビルダーに移動し、「商品ページ」テンプレートにカーソルを合わせて、デザインを編集をクリックします。

SeedProdで単一商品ページを編集する

テンプレートは、ショップページで使用したのと同じドラッグアンドドロップビルダーで開きます。

SeedProd商品ページビルダー

ほとんどのテンプレートでは、デフォルトで「商品メイン画像」ブロックが使用されており、商品ごとに1枚の写真が表示されます。代わりに、すべてのギャラリーを表示するには、そのブロックにカーソルを合わせてオレンジ色の境界線が表示されたら、ゴミ箱アイコンをクリックして削除します。

商品メイン画像ブロックを削除する

次に、左側のパネルで商品ギャラリー画像ブロックを見つけて、クリアしたスペースにドラッグします。WooCommerceからすべてのギャラリー画像を直接取得するため、商品の写真を変更してもブロックは最新の状態に保たれます。

SeedProdに商品ギャラリー画像ブロックを追加する

ギャラリーブロックをクリックして設定を開きます。画像ズームオプションを使用すると、買い物客は写真をホバーして拡大できます。ズームボタンの位置、サイズ、色を調整できます。

商品ギャラリー画像のズームカスタマイズ

メイン画像とサムネイルの境界線をスタイル設定することもできます。高度なタブでは、スペーシング、デバイスの表示、アニメーションコントロールを追加できます。

商品ギャラリーの境界線設定

デザインに満足したら、保存をクリックします。方法1からSeedProdテーマがすでに有効になっている場合、変更はすぐに反映されます。

完成した商品ギャラリーの実際の動作です。クリック可能なスライダーと全画面ライトボックス表示を備えています。

SeedProd を使用した WooCommerce 商品画像ギャラリーの例

商品動画も機能します:SeedProdの動画ブロックを同じテンプレートにドラッグして、ギャラリーの下にYouTubeまたはVimeoクリップを埋め込むことができます。商品動画のギャラリー全体については、Smash BalloonのYouTubeフィードプラグインを使用して、デモや顧客レビューを1か所に表示できます。

FAQ:WooCommerceショップページのカスタマイズ

WordPressでWooCommerceのショップページを直接編集できないのはなぜですか?

WooCommerceのショップページは、通常のページコンテンツとして保存されるのではなく、archive-product.phpというテンプレートファイルから生成されます。「ページを編集」をクリックするとページオブジェクトにアクセスできますが、商品グリッドとレイアウトはブロックエディターではなく、WooCommerceのPHPテンプレートシステムから取得されます。デザインを変更するには、SeedProdのようなテンプレートをオーバーライドするツール、または組み込みのCustomizerとSite Editorオプションが必要です。

WooCommerceのショップページに表示される商品をどのように変更しますか?

WordPressの個々の商品設定から商品の表示を制御できます。商品を「おすすめ」に設定して目立たせたり、公開ステータスを調整して表示したり非表示にしたり、商品カテゴリーやタグを使用して表示されるものを整理したりできます。WooCommerce Customizerを使用すると、外観 » カスタマイズ » WooCommerce » 商品カタログの下で、デフォルトの並べ替え順序(人気順、平均評価順、新着順、価格順)を変更することもできます。

WooCommerceのショップページテンプレートファイルの名前は何ですか?

WooCommerceのショップページは、archive-product.phpテンプレートファイルを使用します。これは、WooCommerceプラグインフォルダ内のwoocommerce/templates/にあります。コードでカスタマイズするには、テーマのwoocommerce/フォルダにコピーしてそこで変更します。これにより、プラグインのアップデート時に変更が上書きされるのを防ぐことができます。

WooCommerceのショップページにバナーまたはおすすめセクションを追加するにはどうすればよいですか?

最も簡単な方法は、SeedProdのドラッグアンドドロップビルダーを使用することです。SeedProdでショップページテンプレートを開き、画像カルーセルブロックを商品グリッドの上にドラッグしてスクロール可能なバナーを作成します。おすすめ商品のセクションについては、新しいセクションを追加し、ベストセラー商品またはおすすめ商品ブロックをドロップします。各セクションは、カスタム背景、色、タイポグラフィで個別にスタイル設定できます。

WooCommerceのショップページと商品ページの違いは何ですか?

ショップページ(商品アーカイブとも呼ばれます)は、すべての商品をグリッド表示する一覧ページです。商品ページは各商品の個別のページで、詳細な説明、画像、価格、カートに追加ボタンが表示されます。通常、顧客は最初にショップページにアクセスし、閲覧してから個々の商品ページに移動します。どちらもSeedProdでカスタマイズできます。

WooCommerceの商品カテゴリページをそれぞれ個別にカスタマイズできますか?

はい。アーカイブタイトルやアーカイブ商品などのダイナミックブロックは各カテゴリに自動的に適応するため、各ページには独自のヘッダーと商品が表示されます。たとえば、あるカテゴリに固有のバナーなど、より大きな違いについては、SeedProdの表示条件を使用して、どのテンプレートがどこに適用されるかを制御できます。

カスタムWooCommerceカテゴリページはSEOに役立ちますか?

役立ちます。カテゴリページは、個々の商品よりも広範なショッピングキーワードを対象としており、ほとんどのストアではほとんど空の状態のままなので、少しの労力で大きな成果が得られます。キーワードが豊富で短いカテゴリの説明、明確なヘッダー、質の高い画像を追加してください。AIOSEOのようなSEOプラグインは、各カテゴリページにカスタムSEOタイトルとメタディスクリプションを設定することもできます。

WooCommerceのショップページタイトルにキーワードを含めることはできますか?

はい、SEOにも役立ちます。検索エンジンはタイトルを使用してストアが何を販売しているかを理解するため、「手作りジュエリー」のようなタイトルは、単なる「ショップ」よりも効果的です。ただし、自然にしてください。まず顧客のためにタイトルを書き、販売しているものを明確に表していることを確認してください。

古いショップページタイトルが検索結果に表示され続けるのはなぜですか?

検索エンジンは、タイトルを変更した瞬間にインデックスを更新しません。新しいショップページのタイトルが結果に表示されるまでには、数日または数週間かかる場合があります。これをスピードアップするには、Google Search Consoleでページの再クロールをリクエストし、Googleが追いつく時間を確保してください。

WooCommerceでデフォルトの商品画像を変更するにはどうすればよいですか?

デフォルトの商品画像は、その商品のアイキャッチ画像です。これを変更するには、商品編集画面で「商品画像」パネルの現在の写真をクリックし、メディアライブラリから新しい画像を選択します。この画像は、ショップページのグリッドや商品ギャラリーの最初の画像として表示されます。

プラグインなしでWooCommerceに商品画像ギャラリーを追加できますか?

はい。「商品ギャラリー」パネルはWooCommerceに組み込まれており、ほとんどのテーマでは追加画像がサムネイルで表示されます。ズーム、ライトボックス、スライダーの動作はテーマによって異なりますが、SeedProdのようなツールを使用すると、コードなしでそれらを制御できます。

WooCommerceのショップページを自分好みにするには、開発者や一行のコードは必要ありません。

SeedProdはショップページとカテゴリページの完全な再設計を処理し、WordPressエディターは簡単な表示の調整をカバーし、ショップタイトルの名前変更または非表示は数回のクリックで完了します。

今すぐショップページのカスタマイズを開始できます。

ついでに、WooCommerceコンバージョン追跡の設定方法に関するこのガイドや、カスタムWooCommerceカートページを作成する方法に関するこのガイドも気に入るかもしれません。

お読みいただきありがとうございます!皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTubeX および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。

著者アバター
ステイシー・コリン コンテンツマーケティングスペシャリスト
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。

開示: 当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみを推奨しています。

ChatGPTまたはClaudeとチャットして、このWordPressサイトを運営しましょう。無料プラグインです。 無料で試す