根据博客内容帮我整理一个SEO标题，SEO关键词和SEO简短描述，关键词用逗号排列好

WooCommerce 商品の並べ替えと表示は、カスタマーエクスペリエンスを向上させ、ウェブサイトのコンバージョンを高めるために重要です。顧客が探しているものをすぐに見つけることができれば、購入や再来店の可能性が高まり、ユーザーエクスペリエンスが向上します。

WooCommerceでは、デフォルトの設定も含め、商品の並べ替えや表示方法をいくつか用意しています、カスタマイズオプションプラグインなど

この記事では、WooCommerceの商品を並べ替えて表示する様々な方法について、基本的な設定や高度な設定、必須のプラグインなどをご紹介します。各方法のメリットとデメリットも紹介しますので、あなたのニーズに合ったオプションを選択してください。

なぜWooCommerceの商品をソートして表示するのですか？

商品を分類して陳列する目的には、主に2つの理由があります：

見込み客を購入者に
商品が特定の基準でソートされていると、顧客は探している商品を見つけやすくなり、購入の可能性が高まります。
質の高いユーザー・エクスペリエンスを顧客に提供
ソートすることで、ショップはより整理され、ナビゲートしやすくなります。

WooCommerceショップの商品の並べ替えをコントロールすることで、ショップの散らかりを減らすことができます。例えば、商品は人気、平均売上、またはメンズとレディースのアパレルのような特定のカテゴリに基づいて並べ替えることができます。

WooCommerceの商品を並べ替えて表示する方法

方法1: WooCommerceのデフォルトオプションで商品を並べ替える

WooCommerceにはソートオプションが組み込まれています。商品を並べ替える最も簡単な方法は、これらのデフォルトの方法を使用することですが、限られたコントロールとカスタマイズしかできません。

カスタマイザーの使用

WooCommerceの最新バージョンでは、デフォルトの商品並べ替えオプションは設定にはなく、カスタマイザーからのみアクセスできます。

古いバージョンの場合：

切り替えるWooCommerceダッシュボード>セットアップ>お飾りタブ

ドロップダウンメニューにはデフォルトの製品ソート価格や人気など、さまざまなカテゴリーに焦点を当てています。

WooCommerce 3.3以上が対象です：

WordPressの管理ダッシュボードにある外装状態>カスタマイズ.

カスタマイザーで探すWooCommerceセクション。

ドロップダウンメニューからソートオプションを選択します。(価格順、人気順、平均評価順、新しい順、アルファベット順など）。

をクリックしてください。ポスト" ボタンをクリックして保存します。

ここで使っています。対象はアストラ.デフォルトのWordPressテーマを使用している場合はエディタを選択します。WooCommerce商品アーカイブテンプレートをクリックして、製品クエリのループを編集します。チュートリアルアストラ・テーマ・ナニー・チュートリアルお役に立てるかもしれません。

各商品のメニュー順を変更する方法

メニューを個々の製品の順序をカスタマイズします。以下の手順に従ってください：

をクリックしてください。"編集"
までスクロールしてください。製品データウィジェット
打点「詳細」オプション検問所
溶け込むメニューシーケンスの設定で、製品の位置を変更できます。

バックエンドでは、この操作はwoocommerce_catalog_orderフック管理。

この方法の利点と欠点

簡単なセットアップ

コーディング不要

基本的な並べ替えオプションの提供（価格順、人気順、日付順など）

✗ 限定的なカスタマイズ

✗ 複雑な選別要件には不向き

方法2：WooCommerceで商品をソートする方法（手動）

WooCommerceでは、商品を手動で並べることも可能です。これは、カスタム商品ディスプレイを作成したり、重要な商品を強調表示したりするのに便利です。以下の手順に従ってください：

ワードプレスのダッシュボードで"製品" > 「すべての製品.

をクリックしてください。ソート

ドラッグ＆ドロップ製品で優先順位を設定します。

ここで設定されたカスタムオーダーは、ショップを閲覧しているお客様のデフォルト表示になります。

手作業による製品の仕分け

個々の製品をよりよく管理するために：

エディターで製品を開き、以下の項目までスクロールダウンします。製品データパート

アドバンスドタブでメニューシーケンスの値（数字が小さいほど、商品の表示順が高くなります。）

メニューの並び順設定は、ドラッグ＆ドロップの簡単な操作で位置を微調整したい場合に特に便利です。

この方法の利点と欠点

商品の表示順の完全なコントロール

シンプルなドラッグ＆ドロップ・インターフェース

✗ 大規模な在庫は時間がかかる

製品の優先順位が変更された場合は、定期的な更新が必要です。

方法3：カテゴリーや属性による並べ替えをカスタマイズする方法

また、カテゴリーや属性で商品をグループ分けすることもできます。これは、あなたのショップに複数の商品ラインがある場合に最適です。

以下の手続きを行ってください：

クリック"製品"を選択し、WooCommerceツールバーで「カテゴリー

新しいカテゴリを追加したり、各カテゴリに関連製品を割り当てることによって、既存のカテゴリを管理します。

カテゴリー別に商品を表示します：
- 出向く"登場" > "メニュー"メインナビゲーションにカテゴリーリンクを追加
- 使うカテゴリー別ショートコードもっとコントロールできるように

商品のショートコードをカテゴリ別に表示します：

[product-category="category-slug" orderby="date" order="asc"].

意志" カテゴリースラッグ " は実際のカテゴリー名に置き換えられます。

属性でソートします：

WooCommerceは色、サイズ、ブランドなどの属性でソートすることもできます。設定は以下の通りです：

切り替える"製品" > "プロパティ"を使用してプロパティを作成または管理します。
各商品の編集ページにある商品データこれらの属性は、セクション内の各製品に割り当てられています。
支出サイドバーずぼしをさすウィジェットをフィルタリングしたり、特定のショートコードを使用して属性ベースの機能を有効にします。

この方法の利点と欠点

特定のカテゴリーや属性（例：色、サイズ）による商品の分類

複数の商品を扱うショップに最適

各製品に正確な属性を設定する必要があります。

✗ 複雑になり、多くのカテゴリーや属性を持つようになるかもしれません。

方法4：商品を表示するためにWooCommerceショートコードを使用する方法

WooCommerceショップで商品をソートして表示するもう一つの方法はショートコードを使用することです。これらのショートコードはデフォルトのソートパラメータ（例：価格、評価、日付）とソート順（昇順または降順）でカスタマイズすることができます。

下記はショートコードを表示する簡単な例です。カラム、リミット、カテゴリなど、他のプロパティを使用して表示をカスタマイズすることもできます。

[products limit="8" columns="4"].

以下は、商品の並べ替えや表示のための追加ショートコードです：

売れ筋商品を示すショートコードの例。

追加

WooCommerceショップの売れ筋商品を表示するショートコードは、以下の手順に従ってください：

に移動します。ウェブページ"タブを選択し、WordPressの管理パネルで "すべてのページ "を選択します（ブログ記事に追加したい場合は、"投稿"、"すべての投稿")。
ベストセラー商品を掲載したいページまたは投稿を選択し、" をクリックします。コンパイラ".ホームページを選びました。

WordPressのエディターで、＋ボタンをクリックしてブロックを追加します。

検索バーで「ショートコード」を検索します。

ここでショートコードを追加します。以下を貼り付けてください：

限界人気商品の表示数を決定します。

💡 コラム商品を表示する列の数を指定します。

を押してください。ポスト「ボタン
サイトのフロントエンドを閲覧し、人気商品が正しく宣伝されていることを確認します。

この方法の利点と欠点

どのページにも特定の商品やカテゴリーを表示できる柔軟性

高度にカスタマイズ可能なショートコード・パラメータ

ページレベルのカスタマイズのみ

テーマによってはスタイリングが必要な場合があります。

方法5：プラグインを使って並べ替えて表示する方法

WooCommerceプラグインを使用すると、より高度なオプションと柔軟性が提供されます。

強いる取付さらにアクティブ化 WooCommerce Sort プラグイン以下の手順に従ってください：

あなたのワードプレスダッシュボード
クリックプラグイン>新しいプラグインの追加.

探す欲しいプラグイン.
クリック今すぐインストール.

インストール後"起動"をクリックしてプラグインを有効にします。

このチュートリアルでは、WooCommerceの無料プラグインをインストールしました。商品の並べ替えオプション.

複数の設定はWooCommerceカスタマイズパネルにあります。

その他のソートオプションはショップページでご覧いただけます。

方法6：カスタムWooCommerce商品ソートを追加する方法（上級者向け）

利用可能なソートフィルターがサイト訪問者のニーズを満たさない場合、カスタムソートオプションを作成することもできます。

そうすることで、場所、販売時点、その他のユニークな属性などのカスタムフィールドやメタデータに基づいてソートすることができます。

ステップ1: カスタムソートオプションの追加

テーマの functions.phpファイルをクリックして、新しいソートオプションを追加します：

function add_custom_woocommerce_sort_option( $sort_options ) { // カスタムソートオプションを追加します。
    $sort_options['custom_sort_order'] = 'Custom Sorting Order'; // ソートオプションのラベル
    return $sort_options；
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'add_custom_woocommerce_sort_option' ); }.
add_filter( 'woocommerce_catalog_orderby', 'add_custom_woocommerce_sort_option' ); }.

ステップ2：ソートロジックの定義

以下のコードを使用して、カスタムソートロジックを実装します。を" カスタム・メタ・キー " は、ソートに使われる実際のメタ・キーに置き換えられます：

関数 custom_product_sort ($ クエリ) {.

関数 custom_product_sort( $query ) { { {カスタム商品ソート関数
    if ( ！ is_admin() && $query->is_main_query() && is_shop() || is_product_category() ) { // ショップページと商品カテゴリにのみ影響するようにします。
        if ( isset( $_GET['orderby'] ) && $_GET['orderby'] == 'custom_sort_order' ) { // ショップページと商品カテゴリにのみ影響するようにします。
            $query->set( 'meta_key', 'your_custom_meta_key' ); // 'your_custom_meta_key'を実際のメタキーに置き換えます。
            $query->set('orderby','meta_value_num' );; // 数値でソートする場合は'meta_value'を使用します。
            $query->set( 'order', 'DESC' ); // ソート順を設定します (ASC または DESC)
        }
    }
}
add_action( 'woocommerce_product_query', 'custom_product_sort' ); }.

カスタムフィールドを使用して商品を並べ替えて表示する方法

を追加することができます。ドル建てを含むようにします。数値的歌で応えるテキスト

フィルタをカスタマイズしやすくするために、2つのソートオプションを追加します：場所順歌で応える販売場所別.

注目してください：子テーマのfunctions.phpファイル真ん中。

// ステップ 1: WooCommerce の注文引数を修正して、ソートのためのカスタムフィールドをサポートします。
function cw_add_postmeta_ordering_args( $args_sort_cw ) { $cw_orderby_value = isset( $_GET[ orderby' ) ?
    $cw_orderby_value = isset( $_GET['orderby'] ) ? wc_clean( $_GET['orderby'] ) ：
        apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) ).

    switch( $cw_orderby_value ) {.
        case 'points_awarded'.
            $args_sort_cw['orderby'] = 'meta_value_num'；
            $args_sort_cw['order'] = 'DESC'; // ソート順（ASCまたはDESC）を設定します。
            $args_sort_cw['meta_key'] = 'points'; // 'points'のメタキー; // ソート順を設定します（ASCまたはDESC）。
            break; // 'points' のメタキー; // 'points' のメタキー.
        case 'location'.
            $args_sort_cw['orderby'] = 'meta_value'；
            $args_sort_cw['order'] = 'ASC'; // ソート順を設定します。
            $args_sort_cw['meta_key'] = 'location'; // 'location'のメタキー。
            break; }.
    }

    return $args_sort_cw；
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'cw_add_postmeta_ordering_args' )；

// ステップ2: WooCommerceのドロップダウンに新しいソートオプションを追加します。
function cw_add_new_postmeta_orderby( $sortby ) { // 新しいソートオプションを追加します。
    $sortby['location'] = __( 'Sort By Location', 'woocommerce' )；
    $sortby['points_awarded'] = __( 'Sort By Sale Point', 'woocommerce' ); return $sortby('points_awarded'] = __( 'Sort By Sale Point', 'woocommerce' ); }.
    return $sortby；
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'cw_add_new_postmeta_orderby' )；
add_filter( 'woocommerce_catalog_orderby', 'cw_add_new_postmeta_orderby' ); }.

上記のコードを追加すると、ソートフィルターが製品ページをドロップダウンメニューに追加してください。しかし、並べ替えメニューには表示されますが、記事の中では、これらの値を単一の商品ページに表示する方法も示されています。

商品ページにカスタムフィールドの値を表示する方法

次のコードスニペットを追加して、商品ページに場所や販売場所などのフィールドを表示します。同様に、同じメタ値を使用して、任意のカスタムフィールドをショップページに表示できます。

関数 cw_shop_display() {
    global $product.

    // 各製品のカスタムメタフィールドを取得します
    $location = get_post_meta( $product-&gt;get_id(), 'location', true ); $point_of_sale = get_post_meta( $product-&gt;get_id(), 'location', true )
    $points_of_sale = get_post_meta( $product-&gt;get_id(), 'points', true )；

    if ( ！ empty( $location ) ) { { {.
        echo '<div class="product-meta"><span class="product-meta-label">場所は？</span> ' . esc_html( $location ) . '</div>';
    }
    if ( ！ empty( $point_of_sale ) ) { } ( !
        echo '<div class="product-meta"><span class="product-meta-label">セールポイント</span> ' . esc_html( $point_of_sale ) . '</div>';
    }

    if ( $product-&gt;get_sku() ) { 。
        echo '<div class="product-meta">SKU: ' . esc_html( $product-&gt;get_sku() ) . '</div>';
    }
}
add_action( 'woocommerce_after_shop_loop_item', 'cw_shop_display', 9 )；

訪問者がソートオプションを選択するたびに、対応する値はそれに応じて変更されます。次のスクリーンショットは場所順.

ポイント・オブ・セールスソートも同じです。

もし個別製品の編集のカスタムフィールドを設定する必要があります。価値。

そうすることで、WooCommerceショップの商品ソートと表示機能を効果的に改善し、顧客のショッピング体験を向上させ、コンバージョン率を高めることができます。お客様のニーズとショップの規模に応じて、商品表示とソートを最適化する最適な方法を選択することができます。

お問い合わせ
記事が読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み