ウェブサイト検索

カスタム WooCommerce 製品ページを作成する方法

WooCommerce 製品ページを簡単にカスタマイズする方法を知りたいですか?オンライン ストアを運営している場合は、単一の商品ページが見栄えがよく、正しく構成され、ブランドと一致していることを確認したいと考えるでしょう。 WooCommerce とテーマのみに依存して変更を加えている場合、多かれ少なかれデフォルトのレイアウトに固執しているため、これを行うのは難しい場合があります。

代わりに、他のプラグインを使用して次のようなことを行うことができます。

  • 追加のコンテンツ要素を追加する
  • フォントと色を変更する
  • ページ構造を変更する
  • または、製品ページを最初から完全にカスタマイズすることもできます

…すべてコーディングなしで！

完全にカスタマイズされた製品テンプレートのいくつかのアイデア:

以下の必要なものに従って製品ページをカスタマイズするのに最適なプラグインを見つけてください。

1. 製品ページの装飾的なスタイリングを編集する

フォント、色の変更、個々の要素の変更など、外観上の小さな調整をいくつか探している場合に最適なプラグインをいくつか紹介します。

WooCommerceの色

WooCommerce Colors を使用すると、「カートに追加」ボタン、製品価格など、さまざまな WooCommerce 要素の色をカスタマイズできます。これらの変更は、ネイティブ WordPress カスタマイザーを使用して行うことができます。

WooCommerce Colors プラグインを使用して [カートに追加] ボタンの色を変更する

これは、CSS の知識を必要としないシンプルでわかりやすいプラグインです。ただし、調整できるのは色のみであり、テーマによっては一部の色をオーバーライドできない場合があります。

価格: 無料

黄色の鉛筆

YellowPencil を使用すると、フォント、色、フォント サイズ、要素間の間隔を変更したり、サイトのフロントエンドにアニメーションの視覚効果を追加したりすることができます。無料版には多くのスタイル オプションがありますが、Yellow Pencil Pro には、グラデーション、アニメーション、カスタム フォント、カラー パレット、背景画像などの高度なオプションが追加されています。

YellowPencilプラグインを使用して商品ページのタイトルフォント、価格の色、ボタンの色を変更する

YellowPencil は、商品ページだけでなく、サイト内のどのページでも機能します。サイトを使用すると自動的に CSS コードが生成され、それがテーマ ファイルではなくデータベースに保存されます。これにより、テーマを更新するときに変更内容が失われることがなくなります。

YellowPencil を使用すると、テンプレート内の要素を並べ替えることができますが、新しい要素を追加することはできません。その結果、デフォルトの単一製品テンプレートにすでに存在する要素に制限されます。

価格: 無料、有料アップグレード オプションあり

CSSヒーロー

機能: CSS Hero は、視覚的な変更を行うときに CSS を自動的に調整することで、サイトのスタイルを変更できるビジュアル エディターです。

CSS Heroプラグインを使用して「カートに追加」ボタンの色を変更する

色、フォント、レスポンシブ ブレークポイントなどを変更して、テンプレートの要素をカスタマイズします。要素を非表示にしたり、特定の要素のスタイルを保存してサイトの他の場所で再利用したりすることもできます。

ただし、順序を変更したり、新しい要素を追加したりすることはできないため、製品テンプレートにすでに存在するレイアウトと要素に制限されます。

価格: 有料、年間 29 ドルから

2. 製品リストに新しい要素を追加する

追加のコンテンツや製品ビデオの場所など、追加の要素をページに追加したい場合、これらのプラグインは、これらの要素を単一の製品ページに追加する方法を提供します。

WooCommerce 単一製品ページ カスタマイザー

WooCommerce Single Product Page Customizer を使用すると、製品テンプレートにカスタム テキストまたは HTML のフィールドを追加し、それらをページ上のどこに表示するかを選択できます。

たとえば、衣類のサイズガイド、配送情報、ショップの返品ポリシーへのリンクなどの情報を追加できます。この情報はすべての製品に対して表示されます。

これは非常に簡単で使いやすいプラグインですが、できることは限られています。たとえば、一部の商品の情報のみを表示することはできません。また、他のタイプの要素をテンプレートに追加したり、既存の要素を再配置したりすることはできません。

価格: 無料

WooCommerce のカスタム製品タブ

WooCommerce のカスタム製品タブを使用すると、製品ページにテキスト、画像、HTML、またはショートコードの追加タブを追加できます。次に、どの製品の情報を表示するかを選択できます。

このプラグインを使用すると、製品ページを煩雑にすることなく、メーカーに関する追加情報を表示したり、返品ポリシーを共有したり、写真を追加したりすることができます。

繰り返しますが、このプラグインには非常に焦点を絞った目的があります。このプラグインを使用して、追加コンテンツのタブを追加する以外に、製品テンプレートの他の部分をカスタマイズすることはできません。

製品ごとのサイズ表など、製品固有のコンテンツをタブに表示したい場合、製品情報を動的に取得することはできません。代わりに、製品ごとに特定のコンテンツを含む個別のタブを作成し、それらを正しい製品に追加する必要があります。

価格: 無料、有料の Pro バージョンあり

WooCommerce の製品ビデオ

WooCommerce の製品ビデオを使用すると、製品ページまたは製品ギャラリーにビデオを追加できます。 YouTube、Vimeo、Dailymotion、Metacafe、または Facebook のビデオを埋め込むことを選択することも、独自のビデオをアップロードすることもできます。また、ポップアップ、ページ内、全画面など、いくつかの表示オプションも提供します。

このプラグインを使用すると、ビデオの表示方法を詳細に制御できます。ビデオのサイズをカスタマイズしたり、自動再生を有効にしたり、ビデオをループ再生したり、特定のサムネイル画像をアップロードしたりできます。

このカテゴリの他のプラグインと同様、このプラグインの機能はビデオに限定されています。このプラグインを使用して製品テンプレートの他の部分をカスタマイズすることはできません。

価格: 有料、現在 49 ドル

3. 完全なカスタム製品を構築する

完全に独自の商品ページを探している場合は、スタイルやページ レイアウトなどを指定できる完全なカスタム ページ (およびサイト全体) を構築できます。

ツールセット

ツールセットを使用すると、コーディングを行わずに、必要なレイアウト、スタイル、ページ要素を備えた製品テンプレートを完全にゼロから構築できます。

価格: 有料、プランは 69 ドルから

動的コンテンツと完全にカスタムのスタイルを使用してテンプレートを作成します

Toolset を使用すると、WooCommerce ブロックと Toolset ブロックを使用して製品テンプレートを簡単に構築し、それらのブロックに動的コンテンツを追加できます。つまり、テンプレートを一度デザインするだけで、製品に応じて正しい製品名、説明、価格、レビューなどが自動的に取り込まれます。

製品テンプレートを構築したら、デフォルトのオプションに束縛されることなく、豊富なスタイル オプションを使用して希望通りの外観にすることができます。

テンプレートの特定の表示基準を選択します

また、さまざまな基準に応じてさまざまなテンプレートをデザインすることもできます。たとえば、在庫切れ品目、さまざまな製品カテゴリまたは属性に応じてさまざまなテンプレートをデザインしたり、複数のテンプレートが 1 つの製品に適用される場合に優先順位を割り当てることもできます。

さらに多くの機能を使用して WooCommerce ストアをさらにカスタマイズします

Elementor Pro、Divi、WPBakery などの人気のあるページ ビルダーも、WooCommerce 製品ページを構築およびカスタマイズするためのオプションを提供しています。 Toolset のプラグイン スイートで利用できる追加機能は、特に WooCommerce ストアや他のタイプのサイトに使用できます。

たとえば、次のことができます。

  • ベンダーが製品をサイトに追加できるようにするフロントエンド フォームを作成する
  • 商品を他の投稿タイプ (「Outfits」など) に接続できる投稿関係を作成します。
  • 店舗の場所を地図上に表示する
  • 強力な検索およびフィルター機能を追加する
  • 追加のカスタムフィールドを作成して製品をさらに定義します

あなたに最適な WooCommerce ツールの選択

WooCommerce やテーマを通じて利用できるオプションが気に入らない場合でも、ストアを思い通りにできる無料および有料のプラグインが不足することはありません。

カスタム WooCommerce ストアの構築は、難しい必要はなく、高価なカスタム プログラミングを必要とする必要もありません。この記事のプラグインを使用すると、コーディングは必要なく、高度で美しく機能的な WooCommerce ショップを構築できます。