WordPress で WooCommerce 製品ページを修正する 3 つの方法
公開: 2022-10-28WordPress で WooCommerce ストアを実行している場合、製品ページがテーマに正しく表示されないという問題が発生した可能性があります。 これはイライラする問題かもしれませんが、ありがたいことに、それを修正するためにできることがいくつかあります。 この記事では、 WordPress テーマで WooCommerce 製品ページを修正する方法を紹介します。 3 つの異なる方法について説明します: 1. WooCommerce テンプレート ファイルを更新する 2. テーマの CSS を変更する 3. カスタム WooCommerce 製品ページ テンプレートを追加する 始めましょう!
WooCommerce ストアの製品ページは、多くの場合、最も重要なページの 1 つです。 視覚的に異なるページを作成することは、ストアのスタイルを全面的に一貫させる上で重要な部分です。 このチュートリアルでは、Astra Pro を使用して単一の WooCommerce 製品ページ レイアウトを簡単にカスタマイズする方法を紹介します。 Elementor WooCommerce Builder を使用してこれを実現します。 そのため、使用する画像は、変換中に製品がはっきりと見えるように配置する必要があります。 単一製品カスタマイザーを使用すると、ギャラリーのレイアウトと画像の幅を変更できます。 さらに、Ajax Add to Cart 機能 (タイトルの上の製品パス) を有効または無効にし、ブレッドクラム (タイトルの上の製品パス) を有効にすることができます。
WooCommerce をインストールしてアクティブ化していない場合、Elementor が提供する製品テンプレートは利用できません。 会社用にあらかじめデザインされたテンプレートを選択し、ブランドに合わせてカスタマイズすることを強くお勧めします。 テンプレートをすぐに作成するのに必要なスキルがなくても、頑張れば作成できます。 単一の製品ページに製品ウィジェットを埋め込んで、顧客に独特のショッピング体験を提供してください. Elementor 製品ページ ビルダーを使用すると、それを構成するすべての要素を制御できます。 製品タイトル、ギャラリー、画像、価格、評価、簡単な説明、ブレッドクラム、データ タブ、ストック、関連、アップセル、カートに追加、メタ、コンテンツ、および追加情報はすべて、ウィジェット コンポーネントとして表示できます。 カートに追加ウィジェットは、カートに追加ボタンのカスタマイズとレイアウトを表示することで、カートに機能を追加します。
製品タブ ウィジェットは、製品情報にアクセスするための主要な方法です。 特定の製品を選択して、関連製品ウィジェットのスタイルを変更できます。 このボタンをクリックすると、デスクトップ、タブレット、モバイルの表示オプションを切り替えることができます。 デフォルトでは、作成したテンプレートは WooCommerce ストアのすべての製品ページに適用されます。 ページの左下隅にある設定アイコンを選択し、新しい製品ページの目のアイコンをクリックしてプレビューします。 必要なフォント サイズをメモします。 製品フィルターまたはショート プラグインを使用して、ストアを最適化できます。
階層的な順序ですべての製品情報を整理して、顧客が製品について詳しく知ることができるようにすることができます。 画像最適化プラグインは高解像度の画像を最適化できますが、サイトを高速化するようには設計されていません. 顧客が画像で製品を確認できるようにすることで、顧客はより自信を持って決定を下すことができます。 顧客に価格をすぐに理解してもらいたい場合は、商品ページをカスタマイズして大きなフォントで表示します。 価格を際立たせたい場合は、対照的な色を使用してください。 元の価格と割引が新しい価格の横に表示されます。 デザインをまだ決めていない場合、価格がすぐにわからない場合は再考する必要があるかもしれません。
Woocommerce の商品ページが正しく表示されない
この問題は、[製品] セクションに移動してから、[カタログの表示] セクションに移動することで解決できます。 設定は「ショップと検索結果」になっているはずです。 この情報を入力すると、商品が WooCommerce ページと検索ページの結果に表示されます。
ツールセットのお客様が、WooCommerce の単一の製品ページで問題を経験しています。 Espa*ol (スペイン語) は、English (英語) の優れた代替手段です。 ヨーロッパ/ロンドンのタイムゾーンは午前 01:00 (GMT) です。 レイアウトがアクティブで、製品のカスタム テンプレートを作成している場合、WooCommerce ビュー設定で標準テンプレートを使用するように指定されていても、それが使用されることに気付きました。 あなたのサイトはマルチサイトであり、プラグインによってカスタマイズまたは無効化/有効化できないため、彼はアクセスできません。 スーパー管理者のパスワードを彼に送るにはどうすればよいですか? レイアウト テンプレートが製品で使用されていること、および期待どおりに表示されない理由があることを確認しました。
Bootstrap を使用しない他のテーマでは、一般的にレイアウトの使用を避ける必要があります。 ビューの代わりにビュー コンテンツ テンプレートを使用できます。 コンテンツを列に配置する機能はありませんが、マークアップ用の空白のキャンバスがあります。 レイアウトにより、1 つの製品ページの構造が変更され、ページのコンテンツが適切にマークアップされなくなります。 WordPress ビュー設定では、製品のレイアウトを使用するかどうかを選択できますが、そのテンプレートは使用できません。 私たちの場合、製品のレイアウトを使用するか、WooCommerce テンプレートを使用するかを選択できます。 Products の単一ページ レイアウトは、Layouts レイアウトと互換性がありません。 製品またはショップに割り当てられたレイアウトが既にある場合は、すべての製品 (レイアウトを使用しないでください) またはテンプレート レイアウトからその割り当てを削除してください。
これで、製品がテーマに表示されるとおりにレンダリングされます。 製品が正しく表示されない場合、それはテーマが原因である可能性が最も高く、ツールセットはその後の出力に影響を与えません。 WooCommerce のビューとレイアウトは、サイトでどちらも有効になっていない場合、問題になることはありません。 ツール全体を無効にして、製品がテーマが望んでいるものとまったく同じであることを確認できます。 共有されたスクリーンショットの結果として、画像に変更はありません。
商品ページにレビューが表示されない場合に確認する 3 つのこと
レビューが商品ページに表示されない場合は、いくつかの点を確認してください。 レビューを望まない場合は、製品ページにレビューが表示されないようにすることができます。 レビューを無効にするには、製品に移動します。 レビューを追加または編集できない場合は、ブラウザのキャッシュをクリアする必要がある場合があります。 キャッシュをクリアしても問題が解決しない場合は、ホスティング設定を変更する必要がある場合があります。 WordPress テーマを使用する場合、レビュー設定の変更が必要になる場合があります。 外観に移動すると、レビュー セクションに移動できます。 スライダーを true または画面の右側に設定する必要があります。
WordPressページにWoocommerce製品を追加する方法
WordPress ページへの WooCommerce 製品の追加は、いくつかのステップで実行できる簡単なプロセスです。 1. WordPress サイトにログインし、製品を追加するページに移動します。 2. エディターの上にある [メディアの追加] ボタンをクリックします。 3. [ファイルのアップロード] タブをクリックします。 4. 追加する WooCommerce 製品をコンピューターから選択します。 5. [ページに挿入] ボタンをクリックします。 製品が WordPress ページに追加されます。
WooCommerce ストアの投稿またはページに商品を追加するプロセス。 製品テーブル プラグインを使用すると、製品をテーブル/リスト レイアウトで表示できるため、ユーザーは製品が表示されている投稿やページを離れずにカートに製品を追加できます。 投稿またはページに製品を表示するには、製品テーブルの作成方法を示します。 テーブルの作成後に変更を保存するには、画面の右上隅にある [変更を保存] をクリックします。 投稿またはページの任意の場所に表を挿入するには、表のショートコードが必要です。 ショートコードをコピーするには、プラグインの一般設定に移動します。 このショートコードを使用して、ストアの任意の投稿またはページにテーブルを表示できます。
ショートコードを貼り付けるには、まずショートコード ブロックを含める必要があります。 投稿の最初の段落の後にブロックを貼り付けます。 投稿が更新された後、製品テーブルが追加されているかどうかを確認できます。 ユーザーは、ブログ投稿を離れた後、商品をカートに追加できるようになりました。 WordPress ブロック エディターを使用すると、任意のページまたは投稿に製品を追加できます。 ブロック エディターは WordPress の最新および今後のバージョンに含まれているため、このメソッドを実装するためにプラグインをインストールする必要はありません。 Gutenberg プラグインをインストールする前に、クラシック エディターを含む古いバージョンの WordPress があることを確認してください。
カテゴリ別の製品を選択して、WooCommerce ページに製品を追加するか、ストアに投稿します。 検索バーに名前を入力して製品を検索すると、製品に関連するすべてのブロックのリストが表示されます。 カテゴリを選択したら、[完了] ボタンをクリックして製品を追加するよう求められます。 ページを更新するには、画面の右上隅にある [更新] ボタンをクリックします。