OceanWPとツールセットを使用してカスタムWooCommerceストアを構築する方法(コーディングなし)
公開: 2021-05-05高度な機能を備えた人目を引くオンラインストアを構築するために、カスタムコーディングは必要ありません。 ToolsetとOceanWPを使用すると、独自の機能とスタイルを使用して、完全にカスタムの製品ページとショップページを最初から作成できます。すべてコーディングは必要ありません。
オンラインストアを構築している場合、WooCommerceのデフォルトのテンプレートとサイトのテーマが主にストアの外観を決定することに気付いたかもしれません。 オンまたはオフにできるオプションがいくつかある場合があります。そうしないと、カスタムプログラミングなしでは高度な機能を追加できません。
または、 ToolsetとOceanWPを使用し、コーディングなしで完全にカスタムのWooCommerceストアを作成できます。
Toolsetを使用すると、主要な小売サイトでのみ表示される機能を構築できます。 または、独自の機能を考えて、カスタムの投稿タイプとフィールド、投稿の関係、カスタムレイアウトなどを使用してそれらを作成することもできます。
OceanWPは、その豊富なスタイリングオプションのおかげで、サイトの見栄えを良くします。 さらに、直感的な管理者編集エクスペリエンスを備えており、フロントエンドでサイトがどのように表示されるかを正確に示します。
ToolsetとOceanWPを使用してオンラインストアをカスタマイズする4つの手順は次のとおりです。
- 表示して宣伝したいものを決定します
- カスタム投稿タイプ、フィールド、分類法を使用して商品を定義します
- カスタム製品ページを作成する
- 動的なショップページと検索機能を作成する
何を表示して宣伝したいかを決める
ツールセットの柔軟な機能は、製品ページを再配置してスタイルを設定するだけではありません。 ビジネスに特に適用される完全にカスタムの機能を作成することも、主要な小売サイトの高度な機能を使用することもできます。








これらは、WooCommerceだけでは得られない機能であり、Toolsetで可能なことのほんの一部にすぎません。 何よりも、コーディングなしですべて実行できます。
カスタム投稿タイプ、フィールド、および分類法を使用して製品を定義する
アイデアを思いついたら、無制限の数のカスタム投稿タイプ、フィールド、分類法、投稿関係を作成して、アイデアを実現できます。
WooCommerceには、商品の属性、説明、価格、重量や寸法などの配送情報など、商品を定義するための基本的なフィールドがいくつかあります。
Toolsetを使用すると、特定の製品機能やブランドなどの他の情報を追加したり、製品が属する部門を指定したりできます。

すべてのテーマがカスタム投稿タイプでうまく機能するわけではありませんが、OceanWPは「カスタムタイプ対応」です。 OceanWPを使用すると、各コンテンツテンプレートに異なるテーマ設定を適用できます。 これにより、このカスタムコンテンツがサイトにどのように表示されるかをより細かく制御できます。
カスタム製品ページを作成する
製品を定義したら、完全にカスタムのテンプレートを作成して、製品とカスタムフィールドの情報を表示できます。 商品テンプレートを使用すると、ページを1回作成するだけで、変更内容はそのテンプレートを使用するすべての商品にすぐに反映されます。
Toolsetを使用すると、ToolsetのWooCommerce Blocksを使用して、製品テンプレートを最初から完全に作成できます。


テンプレートまたはアーカイブを商品に割り当て、商品の評価、商品タブ、商品の属性、カートに追加ボタンなど、必要なブロックを追加するだけです。

ブロックは、カスタムフィールドから動的に情報を取り込むことができます。 これは、たとえば製品名を表示するために見出しブロックを追加すると、顧客が表示している製品に応じて正しい製品名が自動的に表示されることを意味します。

テンプレートを条件付きで割り当てて、特定の製品基準に従ってさまざまなテンプレートを使用することもできます。 たとえば、条件付きテンプレートを使用して、別のレイアウトを使用して在庫切れのアイテムを表示できます。


OceanWPには、これらのテンプレートをスタイリングするためのさまざまなオプションがあります。 ポストタイプに対応しているため、テンプレートごとに異なるテーマオプションを選択できます。 たとえば、一部の製品のサイドバーを表示したり、注目の製品の全幅レイアウトを選択したりできます。

OceanWPには、サイト全体でショップの視覚的アイデンティティの一貫性を保つのに役立つグローバルなスタイリングオプションも含まれています。 さらに、バックエンドに表示されるのはフロントエンドでの表示方法であるため、サイトの管理者とフロントエンドを切り替えて変更がどのように表示されるかを確認する必要はありません。

動的なショップページ、製品リストを作成し、検索機能を追加します
製品を定義し、製品テンプレートを設計しました。 今、あなたの顧客が彼らが探しているものを見つけるのを手伝ってください。
カスタムショップページやその他のアーカイブページの作成
WordPressでは、ショップページやカテゴリリストページなどのページはアーカイブと呼ばれます。 本質的に、アーカイブには、特定のカテゴリまたはタイプのコンテンツに属するすべての投稿(または製品)が一覧表示されます。
ツールセットを使用すると、選択した基準に従ってさまざまなアーカイブを作成できます。 たとえば、サイトでかかととバッグを販売している場合、商品の種類ごとに関連するフィルターを備えたさまざまなショップページが必要になる場合があります。


コンテンツの動的リストの作成
ツールセットビューブロックを使用して、ショップページまたはサイト上の他のページに商品の動的リストを追加できます。 これにより、リストする製品を定義し、リストがどのように表示されるかを設計できます。

カスタム検索およびフィルターオプションの追加
ツールセットを使用すると、カスタム検索とフィルタリングオプションのおかげで、潜在的な顧客が製品をすばやく簡単に見つけることができます。 作成したカスタムフィールドまたは投稿関係でフィルタリングできます。

OceanWPの他のカスタムショップページ機能
OceanWPは、クイックビューオプション、無限スクロール、使用していないときにフィルターを画面から非表示にする機能など、ショップページとアーカイブページにさらに多くの機能を提供します。 これらの機能はOceanWPのアーカイブでのみ機能し、Toolsetで作成したカスタムアーカイブでは機能しないことに注意してください。


OceanWPには、ショッピングカートを表示する方法のオプションもあります。
- ネイティブカートポップアップ
- フローティングカートに追加バー
- カートディスプレイ
- 気を散らすことのないチェックアウト
..もっと!
今日OceanWPとToolsetを試して、コメントであなたの経験について教えてください!
Toolsetの無料のWooCommerceコースを使用して、カスタムWooCommerceストアを段階的に構築する方法を学びます。
このWooCommerceストアのデモでは、ToolsetとOceanWPを無料で一緒に試すこともできます。