WooCommerce の商品ページを編集およびカスタマイズする方法

公開: 2023-02-14

商品ページは、販売プロセスにとって非常に重要です。買い物客が商品を購入するか、返品を保証せずに立ち去るかを決定する場所です。オンラインストアの所有者としての目標は、サイトの訪問者を製品ページに誘導し、カートに追加してチェックアウトする最終ステップに誘導することです。

そのためには、商品ページで販売される商品を最大限に宣伝することが不可欠です。 WooCommerce のデフォルトの製品テンプレートはクリーンでプロフェッショナルであり、以下の方法を使用して構築できるページの強固な基盤を提供します.

WooCommerce 製品ページテンプレートを最適化する方法

WooCommerce の商品ページやテンプレートをカスタマイズする方法はいくつかあります。一部のメソッドは WooCommerce に含まれています。それ以外の場合は、拡張機能が必要です。サイトエディターを使用するか、手動でカスタマイズすることもできます。各オプションを詳しく見てみましょう。

組み込み機能を使用して WooCommerce 製品ページをカスタマイズする方法

多くの製品ページの最適化は、アドオンやコーディングなしで実行できます. 高品質の写真、有益な説明、主要な製品情報により、訪問者は安心して製品を購入できます。

レビューと評価を有効にして信頼を築きます。関連商品、クロスセル、アップセルを設定して、平均注文サイズを増やし、顧客が新しいアイテムを見つけやすくします。社会的証明のために、製品の説明またはタブに顧客の声を含めます。

ページコンテンツを最適化したら、WooCommerce 拡張機能を使用したり、サイトエディターで製品ページテンプレートを編集したり、コードやフックを使用して手動でカスタマイズしたりして、製品ページをさらに強化できます。

WooCommerce 拡張機能を使用して製品ページをカスタマイズする方法

拡張機能は、WooCommerce ストアに追加機能を提供するために特別に構築された WordPress プラグインです。以下は、追加の製品情報を提供し、ショッピング体験をアップグレードし、デフォルト機能を超えてページを拡張するために使用できる WooCommerce 拡張機能です。公式の WooCommerce 拡張機能ライブラリには、さらにカスタマイズするためのさらに多くの拡張機能があります。

1. WooCommerce の高度な製品バリエーション

可変商品は、サイズや色などのオプションを備えた商品で、買い物客がチェックアウトする前に選択します。フロントエンドでは、WooCommerce は各属性 (サイズや色など) のドロップダウンを表示し、その下に利用可能なバリエーション (小、中、大など) のリストを表示します。

より視覚的なアプローチとして、WooCommerce の Advanced Product Variation を使用すると、見本 (色、画像、テキスト)、ギャラリー、表を使用して製品のバリエーションを紹介できます。ビデオをスウォッチに含めることもできます。

バリエーション見本は、構成した設定に基づいて、製品ページまたはメインのショップページに表示されます。既存の商品画像やアイキャッチ画像を活用してスウォッチを作成できます。

製品ギャラリーのレイアウトをカスタマイズして、メイン画像の下のデフォルト位置から左側に移動することもできます.

WooCommerce の高度な製品バリエーションの詳細をご覧ください。

2. WooCommerce タブマネージャー

WooCommerce の製品ページタブは [カートに追加] ボタンの下に表示され、タイトルや価格などの重要な要素をスクロールせずに見える位置に保ちながら、追加情報を表示できます。

この追加情報には、製品の材料と成分、重量と寸法、サイズ表、価格表、納期、配送料、ハウツービデオなど、あらゆる情報が含まれます。これにより、顧客は安心して購入できるようになります。

WooCommerce Tab Manager を使用すると、デフォルトのタブ (詳細な説明、追加情報、およびレビュー) の名前変更、並べ替え、および削除を行うことができます。また、独自のグローバル、カテゴリ全体、および製品固有のタブを作成して、このセクションをカスタマイズできます。

プラグインを使用して、製品レベルでオーバーライドできるデフォルトのタブオーダーを設定します。ドラッグアンドドロップインターフェイスを使用すると、テーマファイルを変更したり、コードにアクセスしたりする必要はありません。

他のプラグインを介して既にカスタムタブを持っている場合、WooCommerce タブマネージャーはそれらを検出し、それらを表示または非表示にするオプションを提供します。このプラグインの主な利点は、タブ内のコンテンツがサイトの検索結果に含まれることです。

WooCommerce タブマネージャーの詳細をご覧ください。

3. 製品に関するよくある質問

よくある質問 (FAQ) は、製品情報を整理して訪問者に提示するためのユーザーフレンドリーな方法です。製品 FAQ 拡張機能を使用すると、製品ごとに専用の FAQ タブを追加して、無制限の質問と回答を表示できます。

プラグインはすべての製品タイプで機能し、製品ページの作成または編集時に FAQ セクションを追加します。

フロントエンドでは、FAQ がアニメーション付きのアコーディオンスタイルで表示されます。

製品に関する FAQ の詳細をご覧ください。

4.複合製品

複合製品を使用すると、顧客はキットまたは構成可能な製品を構築できます。

複合製品ごとに、顧客が既存の在庫から事前に決定された選択肢の中から選択できるようにします。特定の選択に追加料金を割り当て、特定のカテゴリをオプションにすることができます。

たとえば、ネックレスには、チェーン (シルバー、ゴールド)、石 (ルビー、ガーネット、エメラルド)、およびオプションのチャーム (複数の形状の選択肢) のオプションが含まれている場合があります。

キットの構成要素 (チェーン、ストーン、チャーム) ごとに、顧客が選択できる SKU を選択するか、製品カテゴリ全体から任意のオプションを選択させることができます。

条件付きロジックにより、以前の選択に基づいてオプションを表示または非表示にすることができ (たとえば、赤いシャツは特定のサイズでは利用できない)、コンポーネントレベルの追跡により、高度な在庫管理がサポートされます。膨大な数のオプションがある場合は、並べ替え、フィルタリング、およびページネーションを使用してビューを作成し、買い物を簡単にすることができます。

複合製品の詳細をご覧ください。

5. 製品アドオン

製品アドオン拡張機能を使用すると、買い物客は無料および有料の追加機能を使用して購入をカスタマイズおよびアップグレードできます。

アドオンには、保証、高品質の素材、優先配送オプション、カスタムモノグラムや刻印などのカスタマイズが含まれます。商品をギフトとして購入されることが多い場合は、ラッピングオプションやギフトメッセージフィールドを追加できます。

非営利団体は、買い物客が買い物に寄付を含めることを許可し、名前とメッセージを追加して、誰かに敬意を表して寄付を行うことができます。

WooCommerce の予約がある場合、製品のアドオンを使用すると、追加サービス (ヘアカット後のヘアリンス)、または特別な座席とアクセスのための VIP アップグレードのオプションを作成できます。また、サブスクリプション製品にアドオンを提供できるように、WooCommerce サブスクリプションとも連携します。

アドオンには、テキストボックス、ドロップダウン、チェックボックス、画像ベースの選択、ヒントや寄付などのアイテムのカスタム価格入力として表示されるカスタムフィールドを含めることができます。これらのフィールドは、カタログ全体に適用することも、特定の製品に割り当てることもできます。

アドオンを設定すると、選択した順序で [カートに追加] ボタンの上の製品ページに表示されます。

製品アドオンの詳細をご覧ください。

サイトエディターを使用して製品ページをカスタマイズする

ブロックテーマを使用すると、サイトエディターで単一商品ページテンプレートを編集して、商品ページの外観をカスタマイズできます。 WordPress 管理画面で、外観 → エディターに移動します。

ページの上部中央にあるドロップダウンメニューから[すべてのテンプレートを参照]を選択します。表示されるリストから単一製品テンプレートを選択します。

デフォルトのページレイアウトには、ヘッダー、フッター、および製品情報、価格、および画像要素を表示する WooCommerce 単一製品ブロックが含まれます。

製品ページテンプレートを編集する前に、サイトをバックアップする必要があります。単一製品ブロックを誤って削除して保存するなどの特定の変更により、訪問者は買い物や購入ができなくなります。

単一商品ページのヘッダーとフッターのテンプレートを編集する方法

[設定] (右上の歯車アイコン) の [テンプレート] タブには、ヘッダーとフッターを管理するためのリンクが含まれています。いずれかのオプションをクリックして、ページテンプレートのその部分を管理します。テンプレートの領域を直接クリックして編集を開始することもできます。ここで行った変更は、テンプレートを使用するすべての製品に適用されることに注意してください。

ヘッダーでは、サイトタイトルとメインナビゲーションメニューのリンクを編集できます。また、新しいブロックを追加して、製品ページを具体的にカスタマイズすることもできます。このスペースを使用して画像、テキストなどを追加し、商品ページの販売力を高めます。販促またはポリシーのメモまたはバナーを追加して、買い物客に現在のセールについて知らせたり、一定額以上の注文で送料無料になる方法を知らせることができます。

商品ページのフッターでも同様のことができます。たとえば、お客様の声や満足保証ポリシーに関する情報を追加します。

単品本体のカスタマイズ方法

単一製品ブロックの上部に、「このブロックを削除しないでください! このブロックを削除すると、ストアに意図しない影響が生じます。」このメッセージを真剣に受け止めてください！

ただし、Single Product ブロックの周りに新しいブロックを追加して、製品ページのデザインを完全にカスタマイズできます。

+ アイコンを使用して、単一製品ブロックの上または下に要素を追加し、ページをカスタマイズするブロックを含めます。

段落ブロックを使用して、現在のオファー (「100 ドル以上で送料無料」)、満足保証、または訪問者が購入を決定するのに役立つものを含めます。プロセスの舞台裏を見るビデオブロックを追加します。または、宣伝したい特定の推奨製品を含めます。空はここで限界です！

ブロックごとに、背景色、タイポグラフィ、間隔などの設定を編集して、自分だけのものにすることができます。

製品ページを手動でカスタマイズする (コードとフックを使用)

高度なオプションについては、プラグインのコストやメンテナンスなしで、コードとフックを使用して製品ページを手動で編集およびカスタマイズできます.

ファイルに変更を加える前に、時間をかけて WooCommerce をバックアップすることが重要です。 Jetpack VaultPress バックアップを使用している場合、これはリアルタイムで自動的に行われます。そのため、変更によってサイトがダウンした場合でも、WordPress ダッシュボードにアクセスできない場合でも、数回クリックするだけでバックアップを復元できます。

また、子テーマを使用してこれらの変更を行うこともできます。そうしないと、後でテーマや WooCommerce を更新したときに、すべてのカスタマイズが失われる可能性があります。もう 1 つのオプションは、コードスニペットのようなプラグインを使用することです。これにより、必要に応じてオンとオフを切り替えることができるスニペットでサイトにカスタムコードを追加できます。

フックを使用して WooCommerce 製品ページをカスタマイズする

フックを使用すると、サイトの所有者は、コアファイルの編集に伴う危険を冒さずに、コードを追加してページをカスタマイズできます。フックには、アクションとフィルターの 2 種類があります。アクションを使用すると、特定のポイントにコードを挿入できますが、フィルターを使用すると、変数を操作して返すことができます。

たとえば、アクションを使用して新しいチェックアウトフィールドを追加し、フィルターを使用して既存のチェックアウトフィールドのラベルまたはプレースホルダーを変更できます。利用可能な WooCommerce フックのリストはこちらにあります。

以下は、フックを使用して製品ページに加えることができる変更の例です。

[カートに追加] ボタンのテキストを変更します。たとえば、代わりに「今すぐ寄付」と言うことができます。
WooCommerce パンくずリストをカスタマイズします。ブレッドクラムセパレータを変更する、ブレッドクラムを完全に削除するなど。
製品タブを削除、名前変更、並べ替えます。たとえば、[材料] タブを追加するか、いずれかのタブにビデオを含めます。

CSS を使用して WooCommerce 製品ページをカスタマイズする

CSS は、(アクションを制御する JavaScript とは対照的に) デザイン要素を制御するために使用されるコーディング言語です。これを使用して、製品ページのデザインを変更できます。 CSS の基本を学べば、色やフォントから個々の要素のサイズまで、すべてをカスタマイズできます。

WordPress ダッシュボードの[外観] → [カスタマイズ] → [追加の CSS]に移動して、CSS コードを簡単に追加できます。たとえば、製品タイトルのフォントの色を変更する場合は、次のコードを使用して、色の 16 進コードを独自のコードに置き換えます。

 .woocommerce div.product .product_title { color: #222222; }

[今すぐ購入] ボタンの色を変更したい場合は、次のコードを使用して、16 進コードを選択した色に置き換えます。

 .woocommerce div.product .button {   background: #000000; }

WooCommerce のこの記事で、さらに多くの例を見ることができます。

商品ページの読み込み速度を上げる方法

高速読み込みサイトは、訪問者と検索エンジンの両方にとって重要です。人々は待ちたくないし、検索エンジンはパフォーマンスの低いサイトに人々を誘導したくない.

文字通り、一秒一秒が重要です — 読み込み時間が 1 秒遅れると、コンバージョン率が 20% 低下する可能性があります。

Jetpack Boost は、WordPress 向けの最高の Web サイト速度およびパフォーマンス最適化ソリューションです。迅速かつ簡単なセットアッププロセス (開発者は不要) を備えており、1 対 1 のテストで上位 5 つのパフォーマンスプラグインを上回る結果を誇っています。

無料のプラグインをインストールしたら、監査を実行して、現在のサイトのパフォーマンススコアに関するレポートを取得できます。これらは、Core Web Vitals の改善を測定するために使用できるベンチマークとして機能します。これは、Google がサイトのユーザーエクスペリエンスと技術的パフォーマンスを測定するために使用する指標です。

シンプルなダッシュボードにより、ワンクリックのアクティベーションで最適化オプションを簡単に構成できます。これにより、パフォーマンスモジュールを個別にテストし、あらゆるシナリオに完全に適合するように Jetpack Boost を構成する柔軟性が得られます。

商品ページを高速化するその他の方法については、WooCommerce ストアを高速化する 9 つの方法をご覧ください。

商品ページのカスタマイズに関するよくある質問

まだ質問がありますか？以下のいくつかの一般的な質問への回答を見てください。

WooCommerce の商品ページをカスタマイズする最良の方法は何ですか?

最善の方法は 1 つではありません。最適な方法は、さまざまなアプローチの快適さのレベルによって異なります。

サイトエディターを使用すると、要素をドラッグアンドドロップして、コードをまったく編集することなく、独自のパーソナライズされた製品ページを作成できます。これは、初心者にも上級ユーザーにも優れたソリューションです。

特定の追加機能を探している場合は、WooCommerce 拡張機能が最適なオプションです。これらは WooCommerce によって精査および承認されており、カスタムコードなしでマーチャントに高度なカスタマイズオプションを提供します。

手動によるカスタマイズとコーディングは、柔軟性が最も高くなりますが、最も技術的な知識も必要になります。ブロックや拡張機能を使用する場合と比較して、この方法では問題が発生したり、サイトが壊れたりする可能性が最も高くなります。

商品ページのテンプレートを編集する前に、サイトをバックアップする必要がありますか?

はい。ページや投稿とは異なり、サイトテンプレートには改訂履歴がありません。製品ページテンプレートを更新する前にサイトをバックアップしてください。問題が発生した場合にすばやく復元できます。

Jetpack VaultPress バックアップは、WordPress のリアルタイムバックアッププラグインです。これは、サイトが毎日のスケジュールで、または手動でコピーを作成するときにバックアップされるだけではないことを意味します。代わりに、サイトに変更を加えたり、顧客が注文したり、訪問者がコメントを残したりするたびに、自動的に保存されます。何か重要なことが起こる時はありますか？保存されました！

e コマースストアは、特にそのデータが実際の顧客の注文を表す場合、データを失うわけにはいきません。サイトを時々保存するだけのソリューションや、問題が発生したときに物事を復元するためにカスタマーサービスとの長時間のやり取りを必要とするソリューションに妥協しないでください。

Jetpack VaultPress バックアップを使用すると、ワンクリックでサイトを復元し、すぐにオンラインに戻ることができます。 Jetpack モバイルアプリを使用すると、サイトが完全にダウンしていても、いつでもどこでも復元できます。

店主にとって一番のメリットは？すべての顧客データと注文は保護され、最新の状態に保たれます。

WooCommerce の商品ページをカスタマイズするためのベストプラクティスは何ですか?

WooCommerce 製品ページの編集とカスタマイズに使用する方法に関係なく、以下のベストプラクティスに従って、自分自身、サイト、および顧客を保護してください。

毎回、最初にサイトをバックアップしてください。サイトコードを追加または更新すると、1 つのエラーが問題を引き起こす可能性があります。注文を失うことなく、できるだけ早くサイトを復元する準備ができている必要があります。 Jetpack VaultPress バックアップは、WordPress の最適なリアルタイム自動バックアップソリューションです。

これは自動的に行われるため、変更を試す前にサイトを保存することを心配する必要さえありません。

親テーマファイルの外でコードを変更します。テーマまたはプラグインファイルを編集すると、それらの変更は上書きされ、次にテーマまたはプラグインが更新されたときに元に戻されます。

テーマやプラグインファイルを直接編集せずにサイトにコードを追加する方法はいくつかあります。コードスニペットプラグインを使用して、ページの要素を追加、編集、または削除し、テーマカスタマイザーの追加 CSS フィールドを介してサイトのスタイルを設定できます。子テーマを作成することもできます。重要なことは、テーマやプラグインの更新の影響を受けない場所で変更を行うことです。

速度に注意してください。 製品ページをどのようにカスタマイズしても、サイトの速度が低下しないようにする必要があります。 Jetpack Boost を使用すると、ユーザーエクスペリエンスとサイトの品質に対する Google の認識の両方を改善する重要な領域を即座に改善できます。より高速なサイトは、顧客が滞在する可能性が高くなり、Google が検索結果であなたを推奨する可能性が高くなることを意味します. クイックブーストは大いに役立ちます。