WooCommerce製品を並べ替える方法

公開: 2022-01-11

商品を並べ替えると、ユーザーは好みに応じて結果をフィルタリングでき、商品の視認性とコンバージョンを向上させる優れた方法です。 この記事では、 WooCommerce製品を並べ替えるさまざまな方法を紹介します

WooCommerceで商品を並べ替える理由

あなたの店に応じて、あなたは数百または数千の製品を持つことができます。 その場合、優れた検索システムがないと、顧客が目的の商品を見つけるのが難しい場合があります。 これにより、彼らが探しているものを見つけるのが難しくなり、あなたの収入に影響を与える可能性があります。

この問題を解決するために、多数の並べ替え機能を提供できます。 並べ替えオプションを追加する(またはデフォルトのオプションを微調整する)ことで、ストアでの全体的なショッピング体験を向上させることができます。 たとえば、平均売上、製品の人気、さらには製品の価格に基づいて、顧客がすぐに結果を得ることができるようにすることができます。

複数の並べ替えオプションがあると、買い物客は目的の商品をより速く、より効率的に見つけることができます。 その結果、商品の並べ替えはeコマースストアにとって非常に有益です。

商品を再注文するオプションがあるとストアにメリットがある理由がよくわかったので、それを適切に行う方法を見てみましょう。

WooCommerce製品を並べ替える方法

WooCommerce製品を並べ替える主な方法は3つあります。

  1. WordPressカスタマイザーの使用
  2. WordPressプラグインを使用
  3. カスタムスニペットを介して(プログラムで)

タスクを完了するための好ましい方法を見つけることができるように、以下の3つの方法すべてを見ていきます。

始める前に、手順を逃さずにWebサイトでWooCommerceを適切に設定していることを確認してください。 これにより、これらすべての方法がスムーズに機能するようになります。

1)WordPressカスタマイザーを使用してWooCommerce製品を並べ替える

デフォルトの並べ替えオプションを変更することは、WooCommerceで商品を並べ替えるために実行できる最も簡単な方法の1つです。 このオプションは、ショップページまたはストアの製品カタログのあるページにあります。

デフォルトの並べ替えラベル並べ替えwoocommerce製品

WooCommerceに含まれているWordPressカスタマイザーを使用するだけで、デフォルトのオプションを編集できます。

[外観]> [カスタマイズ]に移動してテーマカスタマイザーを開き、[ WooComemrce ]オプションを選択します。

woocommerceカスタマイザー

次に、[製品カタログ]を選択すると、ショップページのデフォルトのWooCommerce製品並べ替えオプションが表示されます。

woocommerceのデフォルトの並べ替え

それをクリックすると、ドロップダウンメニューが表示され、6つのデフォルトの製品並べ替えオプションが表示されます。

  • ディフォルト
  • 人気(販売)
  • 平均評価
  • 最近
  • 価格(昇順)
  • 価格(降順)

並べ替えオプションwoocommerce製品を並べ替える

ストアに適したデフォルトの並べ替えオプションを選択し、目的のオプションを選択した後、保存された変更を最後に公開します。

これは、WordPressダッシュボードを介してWooCommerce製品の並べ替えを変更する方法です。 この方法の主な利点は、プラグイン、技術的な知識、またはカスタムスニペットを必要としないことです。

ただし、いくつかの欠点もあります。 デフォルトの並べ替えオプションは最小限であり、場合によっては非常に制限されることがあります。 したがって、より多くのオプションが必要な場合は、次の方法を参照してください。

2)プラグインを使用してWooCommerce製品を並べ替える

いくつかのWordPressプラグインを使用してWooCommerce製品を並べ替える準備ができている場合は、Woocommerce製品の再配置またはWooCommerce追加製品の並べ替えオプションを確認できます。 これらは両方とも、オンラインストアで製品を並べ替えるための優れたプラグインです。

このチュートリアルでは、 WooCommerce Extra Product SortingOptionsを使用します。 したがって、最初に行う必要があるのは、WooCommerceサイトにプラグインをインストールしてアクティブ化することです。

WooCommerce Extra Product SortingOptionsをインストールします

プラグインをアクティブ化したら、WordPressカスタマイザーを使用してプラグインを微調整できます。 もう一度、WordPressダッシュボードから[外観]> [カスタマイズ]に移動し、前のアプローチと同じようにWooCommerceオプションを選択します。 次に、[製品カタログ]セクションを選択すると、いくつかの追加の並べ替えオプションが表示されます。

woocommerce製品の並べ替え-追加の並べ替え

スクリーンショットでわかるように、取得できる追加のオプションは次のとおりです。

  • デフォルトの並べ替えラベルの編集
  • 新製品の並べ替えを追加する
  • 既存の商品の並べ替えを削除する

デフォルトでは、誰かがショップアーカイブにアクセスすると、WooCommerceは「デフォルトの並べ替え」ラベルを表示します。 ただし、このプラグインを使用すると、必要に応じてカスタマイザー自体から名前を変更できます。

テキストボックスに、製品カタログに使用する新しいデフォルトの並べ替えラベルを入力するだけです。

新しいソーティングラベルは、woocommerce製品をソートします

画面の右側にプレビューがすぐに表示されます。 保存した変更を公開すると、変更がフロントエンドに適用されます。

デフォルトの並べ替えのブランド変更

ラベルの変更とは別に、商品の並べ替えオプションを追加または削除することもできます。

製品の並べ替えオプションを追加するには、顧客に提供する並べ替えオプションを確認するだけです。

新しい並べ替えオプションを追加するwoocommerce製品を並べ替える

オプションを選択すると、プレビューに自動的に表示されます。

新しい並べ替えオプションが追加されました

商品の並べ替えオプションを追加するのと同じように、既存のオプションを削除することもできます。 追加の不要な並べ替えオプションがたくさんある場合、これはオンラインストアにとって優れた機能になる可能性があります。 また、Webサイトや製品によっては、膨大な数の並べ替えオプションに圧倒されるお客様もいます。

プラグインを使用して、これらの並べ替えオプションを簡単に削除できます。 それらを削除するには、Webサイトから削除するオプションをチェックするだけです。

商品の並べ替えを削除するwoocommerce商品を並べ替える

プレビューを見ると、追加の並べ替えオプションが並べ替えのドロップダウンメニューに表示されていることがわかります。

デフォルトのオプションが削除されました

繰り返しになりますが、必要な変更をすべて行った後、それを公開することを忘れないでください。

それでおしまい! これで、専用のWordPressプラグインを使用してWooCommerce製品を並べ替えることができます。

3)WooCommerce製品をプログラムで並べ替える

最先端の方法が必要な場合は、プログラムによるアプローチが最適です。 サイト固有のプラグインまたはテーマのfunctions.phpファイルに単純なPHPスニペットを配置するだけで、並べ替えオプションを変更できます。

このために、Code Snippetsなどの専用プラグインを使用して、カスタムコードをWooCommerceサイトに追加したり、子テーマを作成したりできます。 ヘルプが必要な場合は、WordPressの子テーマプラグインの1つを使用して作成することもできます。 ただし、Webサイトのコアファイルの一部を変更するため、開始する前に必ずWordPressWebサイトをバックアップしてください。

ただし、このデモンストレーションではコードスニペットを使用します。 したがって、最初に、このプラグインをサイトにインストールしてアクティブ化します。

コードスニペットをインストールする

アクティベーション後、画面の左側にプラグインの設定が表示されます。 WordPressダッシュボードから[スニペット]> [すべてのスニペット]に移動するだけです。

すべてのスニペット

次に、[新規追加]をクリックして、WooCommerceインストールに新しいスニペットを追加します。

新しいスニペットを追加する

次に、次のコードをコピーして、スニペットフィールド内に貼り付けます。 また、将来の更新のためにスニペットを識別できるように、スニペットに名前を付けることを忘れないでください。

 add_filter( 'woocommerce_default_catalog_orderby'、 'quadlayers_default_catalog_orderby');

function quadlayers_default_catalog_orderby($ sort_by){
'日付'を返します。
}

woocommerceソートスクリプトsortwoocommerce製品

コードを見ると、主要な並べ替えオプションとして日付が追加されています。 ただし、いつでも好みに応じて変更できます。 使用可能なオプションは次のとおりです。

  • menu_order –デフォルトのもの
  • 人気–売上高によると
  • 評価–顧客の評価による
  • 日付–公開日による
  • 価格–低価格から高価格への並べ替え
  • 価格説明–高価格から低価格
  • rand –毎回ランダムな製品

たとえば、顧客の評価に従って製品を並べ替える必要がある場合は、次のようにコードを変更する必要があります。

 add_filter( 'woocommerce_default_catalog_orderby'、 'quadlayers_default_catalog_orderby');

function quadlayers_default_catalog_orderby($ sort_by){
'評価'を返します。
}

コードを変更したら、スニペットを公開します。 ここで、ショップページを確認すると、デフォルトで新しい並べ替えオプションが表示されます。 この場合、下のスクリーンショットに示すように、平均的な並べ替えで並べ替えられます。

評価で並べ替え

ただし、要件に応じていつでもコードを微調整できます。

製品リストから製品を再注文する

WordPressカスタマイザーからデフォルトでWooCommerce製品を並べ替えることができることはすでに確立されています。 ただし、WooCommerceプラグイン自体を使用して、個々の製品を手動で並べ替えることもできます。 製品は、顧客のデフォルトの並べ替えとしてランダムな順序で並べ替えることもできます。

そして最良の部分は、タスクに追加のプラグインやカスタムコードを使用する必要さえないことです。 ダッシュボードからすべてを並べ替えることができます。

したがって、最初に行う必要があるのは、WordPressダッシュボードから[製品]> [すべての製品]に移動することです。 画面の左側に表示されます。

woocommerce製品の並べ替え-woocommerce製品

次のページでは、公開されているすべての製品を確認できます。 このページをよく見ると、[並べ替え]というオプションも表示されます。

woocommerce製品の並べ替え-woocommerceの並べ替え

そのオプションを選択すると、製品の並べ替えウィザードにリダイレクトされます。

デフォルトでは、WooCommerceは公開日に従って製品を並べ替えます。 ただし、このページでは、ドラッグアンドドロップを使用して簡単に再配置できます。

woocommerce製品の並べ替え-woocommerceのデフォルトの並べ替え

上記のように、製品を簡単にドラッグして目的の位置にドロップできます。 それが済んだら、フロントエンドから製品アーカイブページを確認してください。

ソートされた製品

このようにして、追加のプラグインやコードを使用せずに、WooCommerce製品を任意の順序で手動で並べ替えることができます。

特定の製品を再注文する

WooCommerceインストールでグローバルに並べ替えオプションを適用すると、サイト全体に反映されます。 ただし、特定の製品を再注文する必要がある場合は、これは適切なオプションではありません。

アーカイブまたはショップページの上にカスタム商品を表示する必要があるとしましょう。 次に、WooCommerce製品を並べ替える別のアプローチを探す必要があります。 ありがたいことに、WooCommerceの製品エディターを使用するだけで実行できます。

最初に行う必要があるのは、製品編集ウィザードを開くことです。 もう一度、WordPressダッシュボードから[製品]> [すべての製品]に移動し、再注文する製品の[編集]をクリックします。

商品を編集するwoocommerce商品を並べ替える

次に、製品エディタページにリダイレクトされます。 ここで、製品データの下を下にスクロールして、[詳細設定]タブをクリックします。

詳細設定タブ

WooCommerceは、デフォルトで製品の公開キューに従ってメニューの順序を選択します。 したがって、ショップ内で10番目の商品を公開すると、メニューの順序は10になります。同様に、25番目の商品を公開した後、WooCommerceはメニューの順序を25に設定します。

ただし、[詳細設定]タブから、いつでも変更できます。 そして、それが私たちが製品を再注文するためにやろうとしていることです。

特定の製品をアーカイブページの一番上に表示するには、 0またはマイナス(-)値を使用します。 たとえば、0または-1を使用して、製品をトップページに表示できます。 このデモでは、メニューの順序を-1にします。 最後に、値を変更したら、製品を更新します。

新しいメニューの注文

その後、フロントエンドからアーカイブページを確認します。

メニューの順序が変更されました

上のスクリーンショットでわかるように、特定の製品をすぐにページの上部に表示しました。 他の商品で-2を使用しても、1位になります。

製品リストの以前の方法を使用することもできます。 ただし、メニューの順序を通じて製品をより具体的な位置に配置できるため、これはより直接的なアプローチです。

特定のカテゴリの製品を並べ替える

製品を手元に置いて誰もがアクセスできるようにするために、カテゴリを使用してWooCommerce製品を並べ替えることもできます。 また、簡単なスニペットを使用して、カスタムの並べ替え機能をカテゴリアーカイブに追加できます。 このセクションでは、それについて詳しく説明します。

WooCommerceストアに十分な商品カテゴリがあることを確認してください。 しかし、私たちのデモWebサイトでは、分類されていないカテゴリとそれに割り当てられた6つの製品だけがあります。

製品カテゴリ

ご覧のとおり、ナメクジは分類されていません。 このスラッグは、スニペットの後半で使用します。 次に、コードスニペットプラグインに移動して、新しいスニペットを作成します。 それが終わったら、このコードを下からコピーしてWebサイトに貼り付けます。

 add_filter( 'woocommerce_default_catalog_orderby'、 'quadlayers_catalog_orderby_for_category');

function quadlayers_catalog_orderby_for_category($ sort_by){
if(!is_product_category( 'uncategorized')){
$ sort_byを返します; //未分類のカテゴリアーカイブの並べ替えを変更します
}
'日付'を返します。
}

カテゴリの並べ替え

コードを見ると、コード内で「未分類」のスラッグが選択され、並べ替えに日付フィルターが使用されていることがわかります。 Webサイトでコードを公開する前に、コードをカテゴリスラッグと並べ替えオプションに置き換えてください。

それが終わったら、スニペットを公開します。

特定のカテゴリのアーカイブにアクセスすると、デフォルトで新しい並べ替えオプションが表示されます。 この場合、製品は最新の日付で自動的にソートされます。

最新のフィルタリングで並べ替え

それでおしまい! これは、特定のカテゴリの製品を並べ替える方法です。

ボーナス:WooCommerce製品をアルファベット順に並べ替える

製品がたくさんある場合は、アルファベット順に並べ替えることをお勧めします。 実際、アルファベット順は、あらゆるタイプのリストで並べ替える最も理想的な方法の1つです。 コンピューター上のファイルを見ると、デフォルトではアルファベット順にソートされています。

同様に、それはあなたの新しい顧客にとっても非常に便利です。 商品の文字をアルファベット順にフィルタリングするだけで、店舗で欲しい商品を簡単に見つけることができます。

そのため、このセクションでは、WooCommerce製品を簡単なスニペットでアルファベット順に並べ替える方法を示します。 使用する必要のあるコードは次のとおりです。

 function quadlayers_alphabetical_shop_ordering($ sort_args){
$ orderby_value = isset($ _GET ['orderby'])? woocommerce_clean($ _GET ['orderby']):apply_filters( 'woocommerce_default_catalog_orderby'、get_option( 'woocommerce_default_catalog_orderby'));
if( 'alphabetical' == $ orderby_value){
$ sort_args ['orderby'] = 'タイトル';
$ sort_args ['order'] = 'asc';
$ sort_args ['meta_key'] = '';
}
$ sort_argsを返します;
}
add_filter( 'woocommerce_get_catalog_ordering_args'、 'quadlayers_alphabetical_shop_ordering');

これをCodeSnippetプラグインまたはWebサイトのfunctions.phpファイルに追加するだけです。

アルファベット順

貼り付けた後、公開します。 今、私たちは重い仕事を完了しました。 次に行う必要があるのは、訪問者が並べ替えオプションを使用できるようにラベルを作成することです。 これを行うには、次のコードが必要です。

 function quadlayers_custom_wc_catalog_orderby($ sortby){
$ sortby ['alphabetical'] = '名前で並べ替え:Alphabetical';
$ sortbyを返します。
}
add_filter( 'woocommerce_default_catalog_orderby_options'、 'quadlayers_custom_wc_catalog_orderby');
add_filter( 'woocommerce_catalog_orderby'、 'quadlayers_custom_wc_catalog_orderby');

プラグインでもう一度新しいスニペットを作成し、このコードをそこに貼り付けます。

アルファベット順の並べ替え

新しいスニペットを追加したら、公開します。 次に、ショップアーカイブに移動し、ドロップダウンメニューで並べ替えを確認します。

アルファベット順に並べ替える

ここでは、製品がアルファベット順に並べ替えられていることがわかります。

ノーコードソリューションが必要な場合は、このプラグインを使用することもできます。

結論

WooCommerceのインストールを処理している間、コンバージョン率を上げるには複数の方法を試す必要があります。 より良い顧客体験を提供するために、製品の分類が便利な場合があります。 上記のように、3つの方法(手動ではプラグインとコーディング)はすべて単純であり、技術的な知識は必要ありません。

さらに、製品リストから製品を再注文したり、特定の製品を再注文したりする方法もいくつか追加しました。 同様に、特定のカテゴリとアルファベット順の製品並べ替えオプションもいくつか含まれています。

今すぐお店で問題なく商品を並べ替えられることを願っています。 このチュートリアルが役に立ったと思ったら、ここにあなたにとって興味深いかもしれないいくつかの記事があります:

  • WooCommerce製品ページをカスタマイズする方法
  • 最高のWooCommerce製品バンドルプラグイン
  • WooCommerce製品をエクスポートする方法

商品の並べ替えオプションをどのように変更しますか? コメントで教えてください。