WooCommerceのデザイナーガイド

公開: 2020-01-20

ShopifyのようなWooCommerceストアを設計している場合、または既存のWooCommerceテーマを開発している場合は、この記事「WooCommerceのデザイナーガイド」が最適です。この構成は、スタイリング、デザインの変更、および関連するWooCommerceページをカバーするその他の情報に関するもう少し多くの情報を提供します。

このプラグインはユーザーフレンドリーなツールであり、非常に柔軟性があります。ただし、すべてのWebサイトがサポートされるわけではありません。 WooCommerceがサポートする機能とアプローチを使用することで、設計と開発のプロセスをスピードアップできます。

これにより、ユーザーは変更をカスタマイズできますが、追加コストがかかります。どんな機能があるかを知る最も速い方法は、WooCommerce内のStorefrontデモにアクセスすることです。 Woocommerceの使用方法を一般的に学ぶ方法が必要な場合は、開始に役立つドームガイドを確認してください。 WooCommerceは次の新しいページを作成します。あなたがデザインする必要があるページのタイプがあります。

1つ目は製品ページです。 これらのページには、製品アーカイブページと製品シングルページの2種類があります。

製品アーカイブページには、利用可能な製品カテゴリのサムネイルが表示されます。カテゴリのサムネイルをクリックすると、別の製品アーカイブページが表示されます。次に、製品のサムネイルをクリックすると、単一の製品が表示されます。

もう1つの種類は、製品の単一ページです。 ここでは、これらは単一の商品を表示し、商品画像、商品ヘッダー情報、商品の詳細情報、および関連商品、クロスセル、アップセルを組み合わせたものです。

ショッピングカートやチェックアウトなどの特別ページもあります。ショッピングカートは通常、サイドバーウィジェットとして要約された形式で表示され、配送情報とともにカートページに展開された形式で表示されることもあります。一方、チェックアウトは、顧客がチェックアウトしているときに行われ、住所情報が必要です。

さまざまな種類の製品

このツールにはさまざまな種類の製品があります。

1つ目は、5つの部分に分割された製品ヘッダーです。 これらは：

製品名–これらは要約/アーカイブページと単一ページに表示されます
製品の機能–概要/アーカイブページとシングルページに表示されます
画像–注目の画像は、単一の製品ページの概要と追加の画像に表示されます
長い説明–これは単一の製品ページの下部にある製品の説明領域に表示されます
簡単な説明–これは単一の製品ページの上部に表示されます

このツールを使用すると、ユーザーは製品を使用することもできます。

すべてのカテゴリには、提供されたカテゴリ画像と説明が必要です。また、サブカテゴリを含めることもできます。たとえば、靴はカテゴリであり、靴のブランドはサブカテゴリです。製品カテゴリアーカイブは、次のセクションで自動的に生成されます：タイトルまたはカテゴリ名、カテゴリの説明、現在のカテゴリのサブカテゴリごとに1つのカテゴリサムネイル、オプションの製品サムネイルには、タイトル、価格、および各製品のカートに追加が含まれます現在のカテゴリ。カテゴリをクリックすると新しいカテゴリが開き、製品のサムネイルをクリックすると製品が開きます。

さらに、[製品ページ]で、これらは次のように自動的に生成されます。

製品画像–これらは製品の注目画像と補足画像です。商品のタイトル、商品の価格、商品の簡単な説明、カートに追加する数量（+とコントロール付き）、カートに追加ボタン、商品のSKU（在庫管理単位）カテゴリ、およびタグ。

[商品]タブには、オプションの画像ギャラリー、商品ページに表示する商品属性チケットなどの追加情報、オプションの商品レビューなど、商品の詳細な説明が含まれています。カテゴリをクリックすると新しいカテゴリが開き、製品のサムネイルをクリックすると製品が開きます。

アップセル–これらは「あなたも好きかもしれない」ものであり、その後にアップセルの親指/タイトルが続きます。

クロスセル–これらは関連製品の後にサムネイルが続きます。

製品のプレゼンテーション、オプションは標準とオプションのプレゼンテーションです。標準では、製品ページの上部に注目の画像が表示され、その下に補足画像のサムネイルが3列のサムネイルで表示されます。対照的に、オプションのプレゼンテーションでは、下にサムネイルがない注目の画像が表示され、[説明]タブにすべての画像が表示されます。

ツールのもう1つの部分は、サイドバーウィジェットまたはフッターウィジェットに配置できる製品検索ウィジェットです。 Webサイトを検索する場合は、サイト全体の検索オプションがあります。その下には、製品名、簡単な説明、長い説明を検索できる製品検索ボックスがあります。ワイド検索オプションの他の区分は、カテゴリドリルダウンと呼ばれます。これは、任意のカテゴリまたはサブカテゴリを選択できるドロップダウンフィールドです。プラウドタグクラウドキットには、値札を選択できるドロップダウンがあります。

製品カテゴリ検索オプション検索ウィジェットは、自動生成された製品カテゴリアーカイブが表示されている場合にのみ表示されます。 1つ目はレイヤードナビゲーションです。これにより、ユーザーは属性に基づいて製品を改良し、ユーザーが探しているものを効果的に支援できます。製品価格フィルター-これは、製品を価格範囲にフィルターできるようにするスライディングスケールを表示します。ベストセラー-これは、自動的に選択されたベストセラー製品のリストのタイトル/サム/価格を表示します。注目の商品には、注目の商品としてチェックマークが付けられた商品のタイトル/サム/価格が表示されます。販売中：価格に加えて販売価格が入力されている製品を表示します。

ユーザーがWooCommerceのスタイルを設定したい場合は、Productthumbsなどのオプションがあります。商品が商品のサムネイルとして表示されると、サムネイル、タイトル、価格、カートへの追加の4つの要素が表示されます。製品の背景、製品の境界線、パディング、およびマージンに使用できるCSSスタイル。次はサムネイルです。これらには、境界線、パディング、およびマージンが含まれます。タイトルには、価格と同じフォント、太さ、色、サイズが含まれています。カートに追加の下には、ボタンの色、ラベルの色、境界線、および半径が含まれます。

ツールにはセールステッカーも表示されます。セール中の製品の親指の上に「セール」という単語が表示されます。CSSスタイルを使用できます：背景色、フォントの色、境界線の色。境界線の幅、実線/破線の境界線、境界線の半径。

製品バリエーションにより、クライアントはさまざまな色またはさまざまなデザインで利用できる衣料品をセットアップできます。製品バリエーションを使用すると、製品アーカイブページに[カートに追加]ボタンではなく[オプションを選択]ボタンが表示されます。

要約すると、WooCommerceストアを設計するときに考慮する必要のある主要な要素を示しました。さまざまな種類のページ、製品情報、検索およびスタイル設定オプションについて説明しました。 WooCommerceストアの構築を楽しんでください。

Woocommerce WordPressテーマについて詳しくは、こちらをご覧ください。