WooCommerceのショップページをフルカスタマイズして最適化する方法

WordPressとWooCommerceでウェブサイトを構築することで、自分のショップを完全に所有することができ、柔軟なフレームワークを使用して、あなたの夢のようにユニークなシステムやデザインを構築することができます。

今日はWooCommerceのショップページの設定とカスタマイズ方法について説明します。

WooCommerceストアページとは？

WooCommerceショップページはデフォルトで含まれており、商品ページタイプのアーカイブページです。これは、訪問者がスクロールできるように公開されているすべての製品が表示されることを意味します。基本的に、訪問者があなたのカタログを見ることができるオンラインショールームです。商品は個別に表示することも、カテゴリー別に表示することも、カテゴリー別と商品別の両方を一つのページに表示することもできます。

なぜカスタムWooCommerceショップページを作るのか？

デフォルトのWooCommerceショップページは多くのショップに適しています。しかし、このページをカスタマイズすることでキュレーションされた体験の提供これは、あなたにとっては売上増につながり、顧客にとってはより合理的なショッピング体験となる。

1.迅速で簡単なショッピング

来店者が欲しいものを素早く見つけ、安心して買い物をするために必要な情報を得ることができれば、それに越したことはない。よく整理された店舗は、買い物客が圧倒されるのを防いでくれる。

また、買い物客は""レストラン""から直接見積もりを取ることもできる。ショップまた、"Shop "ページにパーソナライゼーション・オプションを宣伝するためのコンテンツ・セクションを追加した。彼らはまた、パーソナライゼーション・オプションを宣伝するために、「ショップ」ページにコンテンツ・セクションを追加した。

2.製品と視聴者に合わせた体験を提供する

新商品や見慣れない商品、あるいは食品成分や付属品の仕様など、買い物客が詳細な情報を必要とする商品カテゴリーについては、ショップページに直接情報を表示することが望ましいかもしれない。

ここでは、あなたが販売する商品やオーディエンスに基づいてショップページを変更する方法の例をいくつか紹介します：

• 大規模な商品カタログや非常に詳細なアイテムをふるいにかけるためにフィルタを追加します。交換部品を販売している場合、買い物客はサイズ、色、SKUなどに基づいて部品を探す必要があるかもしれません。
• もし売り物がより視覚的に魅力的なものであるならば、以下をご覧ください。写真に集中する.例えば、衣料品店では、より大きな写真を表示したり、ショップページで直接、画像の回転ギャラリーをスクロールできるようにしたいかもしれません。
• 商品を表に表示する販売する商品がビジュアルに依存していない場合、画像をまったく使用しないことも必要かもしれません。より伝統的な商品グリッドを使用する代わりに、テーブルを使用して主要な情報を表示します。これは、サービス業や卸売業など、顧客が一度に多くの商品をショッピングカートに入れる場合に特に適した設定です。
• 製品固有のバッジをつける。例えば、食品を販売している場合、「ビーガン」や「ナッツフリー」のバッジを付けることができます。こうすることで、買い物客はどの商品が自分のニーズに合っているのか（合っていないのか）がすぐにわかります。

3.特別製品やプロモーションのハイライト

WooCommerceのショップページを編集することで、顧客の注意を引き、注目の商品やカテゴリー、プロモーションオファー、送料無料や満足保証などのコンテンツに関心を向けることができます。

この場合、ブロック・テーマが本当に輝きます。最も評価の高い商品」ブロックを使ってベスト・オブ・ベストを紹介したり、「特価品」ブロックを使ってディスカウント・オプションを強調したり、「注目商品」ブロックを使って、季節やイベント、状況に応じてすぐに変更できるコーナーを設けたりすることができます。セクションを設け、季節やイベントなどの状況に応じて素早く変更することができます。

4.ブランドと個性を反映する

ショップページをカスタマイズすることで、競合他社に差をつけることができ、ウェブサイトやその他の会社資料で一貫した外観を見せることができ、レビューやその他の信頼のシンボルを表示することで信頼を築くことができます。

各商品の下には、評価の高さを示すアスタリスクが付けられている。また、左側には小さなマーカーがあり、好奇心旺盛な買い物客はクリックしてレビューを読むことができる。

WooCommerceストアページのカスタマイズ方法

1.WooCommerceカスタマイザーでショップページをカスタマイズする

カスタマイザーのWooCommerceセクションには、ショップ通知、商品カタログ、商品画像、チェックアウトタブが含まれています。ショップページに基本的な変更を加える最も簡単な方法です。

切り替える外観 → カスタマイズ → WooCommerce.

WooCommerceストア通知のカスタマイズ

ショップからのお知らせは、サイトの一番下にあるオーバーレイバーに表示されます（テーマによっては一番上に表示される場合もあります）。このバーはサイト全体に表示され、オフにすることもできます。この機能は、現在のキャンペーン、注目の商品カテゴリー、近日開催予定のイベント、または一定金額以上の注文で送料が無料になるなどのショップ全体のポリシーについて、訪問者にお知らせするのに最適な方法です。

ショップ通知タブテキストを入力する欄があり、フォーマットやリンク用のHTMLタグを入力することができます。店舗通知を有効にする]チェックボックスをクリックして、機能を有効にします。

WooCommerce商品カタログのカスタマイズ

商品カタログ]タブには、ショップや商品カテゴリーページのあらゆる側面を管理するためのドロップダウンメニューがあります。

ショップのアイテム数が多い場合、1つのショップページでは訪問者が選び方に迷ってしまうかもしれません。カテゴリー、商品、またはその両方。カテゴリーオプションは、ショップで利用可能なカテゴリーを表すサムネイルグリッドを表示します。

ショップページの商品表示を管理するには、デフォルトの商品ソートメニューを使用してください。デフォルトはカスタムソート+名前ですが、以下のようにソートすることもできます：

• 人気（売上）
• 平均評価
• 最寄り
• 価格（昇順）
• 価格（降順）

デフォルトのオプションにカスタムオーダーを設定するには製品 → 全製品.次に、上部にある「並べ替え」タブをクリックします。次に、カテゴリー、商品タイプ、在庫状況、またはこれら3つの組み合わせを選択します。をクリックします。スクリーニング".

WooCommerceストアページの商品画像をカスタマイズする

商品画像」タブでは、ショップページの商品画像のサイズや表示をカスタマイズすることができます。3つのオプションがあります：

• 1:1（正方形にカット）
• カスタマイズされたアスペクト比
• トリミングなし（アップロードされた画像の縦横比で表示されます。）

変更が公開されると、新しい画像サイズのサムネイルが自動的に生成されます。

2.Gutenbergブロックエディターでショップページをカスタマイズする

ブロックテーマを使用している場合、サイトエディタを使ってWooCommerceショップページを編集・カスタマイズすることができます。ショップページテンプレートを編集する前に、必ずWordPressサイトをバックアップしてください。

ページをカスタマイズするには外装状態 → エディタ次に、ページ上部中央のドロップダウンメニューから「すべてのテンプレートを参照」を選択します。編集可能なカタログテンプレート」をクリックします。

カタログテンプレートは、ヘッダー、フッター、本文の各エリアから構成されています。ヘッダーまたはフッターエリアをクリックして内容を編集し、必要に応じて画像ブロックや段落ブロックなどの新しいブロックを追加します。

デフォルトでは、ページ本体は商品グリッドブロックのみを含み、商品画像、タイトル、価格などを表示します。

商品グリッドブロックの上下にブロックを追加して、ショップページのテンプレートをカスタマイズできます。どのようなブロックタイプでも使用でき、20以上のWooCommerceブロックがブロックインサータの専用セクションに配置され、簡単にナビゲートできます。

使う"ベストセラー商品「そして人気商品すべてのレビュー」ブロックを使って、人気商品をアピールしましょう。すべてのレビュー」ブロックを使用して、お客様の声をページに追加します。

カスタマイズされた製品展示オプション

を編集することができる。すべての製品"ブロックをクリックすると、WooCommerceショップページをさらにカスタマイズできます。ブロックをクリックし、"コンパイラ「アイコンをクリックします。設定を管理するには、商品画像や商品タイトルなど、商品例の要素をクリックします。

グリッドに表示される項目の内容を並べ替えることができる。例えば、"カートに入れる「ボタンが商品評価の上に移動します。クリックして要素を選択し、上下の矢印でレイアウト内の位置を移動します。

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

エクステンションはWooCommerceショップのために特別に作成されたプラグインの一種です。ショッピングエクスペリエンスを向上させ、ショップページのコンテンツと機能を強化するために使用することができます。いくつかの例を紹介します。

WooCommerceの商品フィルター

WooCommerceの商品フィルタを使用すると、カテゴリ、価格、平均評価、在庫状況などの複数の条件に基づいて、顧客が商品をフィルタリングできるようになります。フィルタは、買い物客が迅速かつ簡単に関連する結果を得るために使用することができ、何千もの製品を含むカタログへのアクセスを容易にします。この拡張機能では AJAX 訪問者がページを更新することなく結果を更新することができます。

WooCommerceクイックビュー

WooCommerce Quick Viewを使えば、買い物客はショップのメインページを離れることなく、商品についての詳細を知り、バージョンを選択し、商品をカートに追加することができます。このエクステンションはショップページに "クイックビュー "ボタンを追加し、クリックするとポップアップウィンドウが表示されます。このウィンドウには、必要な製品情報だけでなく、バリアントを選択し、ショッピングカートにアイテムを追加する機能が含まれています。これにより、訪問者は複数の新しいページを読み込むことなく商品を比較し、選択することができるため、ショッピング体験がスピードアップします。

WooCommerceアドバンスド商品タブ

WooCommerce Advanced Product Labelsは、ショップページに視覚的なセンスを加え、顧客の注目を集めます。新商品、キャンペーン商品、ベストセラー商品などを紹介するカスタムラベルを作成できます。ラベルは、グローバル、特定の商品、または条件に基づいてアイテムのグループに適用することができます。

WooCommerce商品リスト

WooCommerceの商品テーブルを使用すると、1つのページで簡単に参照および比較できるように、表形式でカタログを表示することができます。列の見出しはカスタマイズ可能で、デフォルトのソート順を選択できます。このエクステンションは、ドロップダウンメニューでバリアントを選択できる可変商品をサポートしています。各行にはカートに入れるボタンとチェックボックスがあり、複数の商品を一度にカートに入れることができます。買い物客はフォームの上部にあるフィールドを使ってカテゴリや価格帯で結果をフィルタリングすることができます。また、サイズや色などのバリアント属性でフィルタリングすることもできます。フィルタリングはAJAX経由で行われるため、素早く、ページの更新も必要ありません。

4.ショップページを手動でカスタマイズする（コードとフックを使う）

WooCommerceはショップページのテンプレートファイルarchive-product.phpを使用します。これは WooCommerceアクションとフィルターフック利用可能なフックの一覧は「リファレンス」ページをご覧ください。

ウェブサイトを変更する前には、必ずバックアップを取ってください。ウェブサイトのコードを変更する際に、たった1つのエラーでも重大な問題につながる可能性があります。Jetpack VaultPressバックアップ 変更するたびにサイトを保存してくれるからだ。

プラグインファイルを直接編集しない将来のアップデートがあなたの作業を上書きしてしまうからです。カスタムコードを子テーマの functions.php ファイルを使用するか コードスニペット そんなプラグイン。

フックとコードを使用して、以下のカスタマイズが可能です：

ショップページの結果カウントとデフォルトのソートドロップダウンメニューを隠す

これらのページ要素は買い物客には便利ですが、アイテム数が少ないショップにはあまり役に立ちません。このコードを追加して、ショップページから非表示にしましょう。

// ショップページの結果を非表示にするcountremove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );// ショップページのデフォルトを非表示にするソートメニュー remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 ); // ショップページのデフォルトを隠す。

CSSコードを使ってこれらの要素を非表示にすることも可能です。詳細は外観 → カスタマイズ → 追加CSS そして以下のコードを追加してください：

.woocommerce-result-count {.
    display: none；
}

.woocommerce-ordering select {
    display: none; } } .woocommerce-orderingセレクト
}

ストアページの1行あたりの商品数を変更する

このコードを使用して、1行あたりのデフォルトの商品数を上書きします。高い数値を設定すると、スクロールせずにページに表示できる商品数が増えます。より少ない数を設定すると、各商品の画像がより大きく表示され、より詳細に見ることができます。

この例では、1行の数量を2個に設定する：

// ショップページの行ごとの商品数を変更する
add_filter('loop_shop_columns', 'loop_columns', 999)；

if (!function_exists('loop_columns')) { { { if (!function_exists('loop_columns'))
    もし (!function_exists('loop_columns')) { function loop_columns() {
        return 2; // 1行に2つの商品
    }
}

ショップページの商品画像の上に商品タイトルを移動する。

このコードを使用すると、商品タイトルを商品画像の各列の下から上に移動させることができます。このレイアウト変更により、ショップの他の部分より目立つようにデザインし、タイトルをページの上の方に配置することができます。

// 商品タイトルを商品画像の上に移動する
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_title', 10 )；
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 )；

価格を際立たせる

カスタマイザーの追加CSSフィールドに以下のコードを追加することで、あなたの価格を買い物客の目に際立たせることができます。このスタイル変更は、価格ポイントが顧客にとって重要である場合に便利です。この例では、価格は太字で表示され、青に設定されています。

.wc-block-grid__product { {.
    font-weight: bold；
    font-weight: bold; color: blue; }.
}

商品画像の枠に色を加える

このコードは、商品画像に色のついた枠線を追加します。ここでは、ボーダーの幅を 2px色はとうこうしょく.

.wc-block-grid__products .wc-block-grid__product-image img {.
    border: 2px solid #f27c21; }.
}

はんけつをくだす

WooCommerceのショップページをカスタマイズすることで、顧客により良いショッピング体験を提供し、販売機会を増やし、ブランドの個性を際立たせることができます。WooCommerce Customiser、Gutenbergブロックエディタ、エクステンション、手動コードなど、あなたのニーズやスキルレベルに合わせて最適化する方法はたくさんあります。これらのヒントやテクニックを頭に入れておくことで、美しくパワフルなオンラインショップページを作成し、ビジネスの成功への道を切り開くことができます。