本記事では、WooCommerceの商品ページ表示スタイルをカスタマイズする方法をご紹介します。通常、専用のWooCommerceテーマは商品ページにいくつかのデザインを施していますが、デザインされていないテーマの商品ページは比較的単調です。そこで、Naibaが商品詳細ページの表示効果を修正する方法を教えます。
WooCommerceの変更にはElementor Proというツールが必要です。
注意：WooCommerce製品ページをカスタマイズするにはProバージョンが必要です。購入していない場合はこちらをクリックして購入。
次にNaibaが説明しますElementorを使用して独自の商品ページテンプレートレイアウトをデザインする方法。
具体的な手順：
一、WooCommerceオンラインショップサイトをインストールする
WooCommerceの製品ページを編集するには、WordPressサイトにWooCommerceをインストールする必要があります。
WordPressサイトのインストールについてはこちらを参照：WordPressインストールチュートリアル
WooCommerceの使用方法については、以下を参照してください：WooCommerceチュートリアル
二、商品単一ページテンプレートの作成
WooCommerceとElementorプラグインをインストールしたら、新規作成、ページをクリックし、Single Productを選択して商品ページのテンプレートを作成します。
三、プリセットテンプレートの選択または独自デザイン
ElementorビルダーのProバージョンを購入すると、プリセットのライブラリからいくつかの製品ページテンプレートが見つかります。直接選択してインポートできます。
もちろん、自分でページレイアウトをデザインすることもできます。
大まかなレイアウトが決まったら、いくつかのウィジェットを追加できます。対応するウィジェット名は以下の通りです：
- メニューカートアイコン
- パンくずリストナビゲーション
- 製品タイトル
- 商品価格
- 商品評価
- 製品の短い説明
- 商品在庫
- カートに追加
- METAタグ
- 商品説明タグ
- 商品画像
- 関連商品
- 関連商品
四、テンプレート効果のプレビュー
デザインが完了したら、エディター左下の目のアイコンをクリックしてデザイン効果をプレビューできます。
五、商品テンプレート表示条件の設定
プレビューで満足したら、カテゴリ表示ルールを設定し、Publish（公開）します。
サイトのフロントエンドで、設定したテンプレートの効果を確認できます。
まとめ：
ElementorのWooCommerce Builderツールを使用すると、製品詳細ページを柔軟にデザインできます。テーマの製品ページテンプレートの表示に満足できない場合、この方法で自分の期待に合った製品ページを作成できます。
もちろん、より良い方法はthemeforestマーケットから専用のものを購入することですWooCommerce向けに最適化・デザインされたテーマ。