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

0368654

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

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

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

画像[1] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

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

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

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

イメージ[2] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

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

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

カスタマイザーの使用

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

古いバージョンの場合：

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

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

WooCommerce 3.3以上が対象です：

  • WordPressの管理ダッシュボードにある外装状態>カスタマイズ.
画像[3] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！
  • カスタマイザーで探すWooCommerceセクション。
画像[4] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！
  • ドロップダウンメニューからソートオプションを選択します。(価格順、人気順、平均評価順、新しい順、アルファベット順など）。
画像[5] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明を、キーワードをカンマで区切ってまとめるのを手伝ってください！
  • をクリックしてください。ポスト" ボタンをクリックして保存します。

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

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

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

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

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

画像[6] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！

この方法の利点と欠点

簡単なセットアップ

コーディング不要

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

✗ 限定的なカスタマイズ

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

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

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

  • ワードプレスのダッシュボードで"製品" > 「すべての製品.
画像[7] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！
  • をクリックしてください。ソート
画像[8] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！
  • ドラッグ＆ドロップ製品で優先順位を設定します。
画像[9] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

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

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

  • エディターで製品を開き、以下の項目までスクロールダウンします。製品データパート
画像[10] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！
  • アドバンスドタブでメニューシーケンスの値（数字が小さいほど、商品の表示順が高くなります。）
画像[11] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

この方法の利点と欠点

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

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

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

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

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

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

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

  • クリック"製品"を選択し、WooCommerceツールバーで「カテゴリー
画像[12] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！
  • 新しいカテゴリを追加したり、各カテゴリに関連製品を割り当てることによって、既存のカテゴリを管理します。
画像[13] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明を、キーワードをカンマで区切ってまとめるのを手伝ってください！
  • カテゴリー別に商品を表示します：
    • 出向く"登場" > "メニュー"メインナビゲーションにカテゴリーリンクを追加
    • 使うカテゴリー別ショートコードもっとコントロールできるように

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

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

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

属性でソートします：

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

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

この方法の利点と欠点

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

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

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

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

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

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

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

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

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

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

追加

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

  • に移動します。ウェブページ"タブを選択し、WordPressの管理パネルで "すべてのページ "を選択します（ブログ記事に追加したい場合は、"投稿"、"すべての投稿")。
  • ベストセラー商品を掲載したいページまたは投稿を選択し、" をクリックします。コンパイラ".ホームページを選びました。
画像[105] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

画像[106] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

画像[107] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

画像[108] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文をカンマで区切ってまとめるのを手伝ってください！

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

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

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

この方法の利点と欠点

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

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

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

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

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

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

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

  • あなたのワードプレスダッシュボード
  • クリックプラグイン>新しいプラグインの追加.
画像[109] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文をカンマで区切ってまとめるのを手伝ってください！
  • 探す欲しいプラグイン.
  • クリック今すぐインストール.
画像[110] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

画像[111] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文をカンマで区切ってまとめるのを手伝ってください！

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

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

画像[112] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

画像[113] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！

方法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' ); }.
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' ); }.
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' ); }.
関数 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' ); }.
関数 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' ); }.
// ステップ 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' ); }.
// ステップ 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' ); }.

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

画像[114] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

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

関数 cw_shop_display() {
    global $product.
    // 各製品のカスタムメタフィールドを取得します
    $location = get_post_meta( $product->get_id(), 'location', true ); $point_of_sale = get_post_meta( $product->get_id(), 'location', true )
    $points_of_sale = get_post_meta( $product->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->get_sku() ) { 。
        echo '<div class="product-meta">SKU: ' . esc_html( $product->get_sku() ) . '</div>';
    }
}
add_action( 'woocommerce_after_shop_loop_item', 'cw_shop_display', 9 )；
関数 cw_shop_display() {
    global $product.

    // 各製品のカスタムメタフィールドを取得します
    $location = get_post_meta( $product->get_id(), 'location', true ); $point_of_sale = get_post_meta( $product->get_id(), 'location', true )
    $points_of_sale = get_post_meta( $product->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->get_sku() ) { 。
        echo '<div class="product-meta">SKU: ' . esc_html( $product->get_sku() ) . '</div>';
    }
}
add_action( 'woocommerce_after_shop_loop_item', 'cw_shop_display', 9 )；
関数 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 )；

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

画像[115] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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

画像[116] - ブログの内容に基づいて、SEOタイトル、SEOキーワード、短いSEO説明文をカンマで区切ってまとめるのを手伝ってください！

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

画像[117] - SEOタイトル、SEOキーワード、ブログの内容に基づいた短いSEO説明を、キーワードをカンマで区切ってまとめるのを手伝ってください！

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


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

この記事へのリンクhttps://www.361sale.com/ja/28198
この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。

終わり
ウーコマースWordPressチュートリアルWooCommerceプラグイン
# WooCommerceプラグイン#の商品ページ# 製品ソート
好きなら応援してください。
クドス54 分かち合う
Banner1のアバター - Photon Fluctuation Network｜WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応ダイヤモンド会員
おすすめ
Magento 2：それはあなたのチームの次の「大作」ですか？-Photonflux.com｜プロフェッショナルなWordPress修理サービス、ワールドワイド、迅速な対応
Magento 2：それはあなたのチームの次の「大作」ですか？
Magento 2：それはあなたのチームの次の「大作」ですか？
6月8日 00:49 254W+
WordPress 301リダイレクト完全ガイド：デッドリンクの修正とユーザーエクスペリエンスの向上のためのベストプラクティス - Photon Flux｜プロフェッショナルなWordPress修理サービス、グローバルカバレッジ、迅速な対応
WordPress301リダイレクト完全ガイド：デッドリンクの修正とユーザーエクスペリエンス向上のためのベストプラクティス
WordPress301リダイレクト完全ガイド：デッドリンクの修正とユーザーエクスペリエンス向上のためのベストプラクティス
9月29日 17:49 19.8W+
WordPressで「Error establishing a database connection（データベース接続の確立エラー）」「Error establishing a database connection（データベース接続の確立エラー）」と表示された場合の対処方法 - Photon Flux｜フォトンフラックス｜プロフェッショナルWordPress修理サービス！
WordPressサイトで「Error establishing database connection（データベース接続の確立エラー）」または「Error establishing a database connection（データベース接続の確立エラー）」エラーが表示された場合の対処方法
WordPressのウェブサイトで「データベース接続の確立にエラーが発生しました」と表示された場合の対処方法。
7月3日 13:47 13.9W+
Kadence Teaching: Kadence Shop Kit プラグイン - 商品バッジ機能 - Photon Flux Network｜専門的なWordPressの修理サービス、グローバルなリーチ、速いレスポンス
Kadence Teaching: Kadence Shop Kit プラグイン - 製品バッジ機能
Kadence Teaching: Kadence Shop Kit プラグイン - 製品バッジ機能
4月7日 18:02 5.4W+
Kadenceティーチング：Kadenceデザインライブラリの機能を素早くマスター - フォトンフラックス｜WordPress修理のプロフェッショナル、グローバル対応、迅速なサービス
Kadenceチュートリアル：Kadenceデザイン・ライブラリの機能を使いこなそう
Kadenceチュートリアル：Kadenceデザイン・ライブラリの機能を使いこなそう
3月31日 15:12 5W+
Kadence Teaching: Kadence blocks proを使ったグラフィックオーバーレイ効果 - Photon Flux｜専門的なWordPress修理サービス、グローバルなリーチ、速いレスポンス
Kadenceチュートリアル：Kadenceブロックでグラフィック・オーバーレイを作成しよう
Kadenceチュートリアル：Kadenceブロックでグラフィック・オーバーレイを作成しよう
4月4日 07:52 4.7W+
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし

ユーザーカバー
Banner1のアバター - Photon Fluctuation Network｜WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応ダイヤモンド会員
文章目录
Lexerのアバター - Photon Flux Network｜プロフェッショナルなWordPress修理サービス。

レックスハウゼン4月16日 17:391

Elementorエディタがローディング画面から抜け出せなくなったり、真っ白に表示され続けたりしても、心配しないでください。これは実際にはよくあることで、たいていはキャッシュ、プラグインの競合、テーマの問題、メモリ不足が原因です。ステップ・バイ・ステップでチェックしてみてください： まず、Elementorの "セーフモード "を開き、プラグインやテーマの競合がないか確認します。 キャッシュプラグインを一時的に無効にし、同時にブラウザとウェブサイトのキャッシュをクリアします。 テーマをWordPressのデフォルトテーマ（Twenty Twenty-Fourなど）に切り替えてみて、エディタが正しく開くかテストしてください。 Elementor > System InfoでPHPのメモリが256M以上あるか確認してください。 ブラウザのデベロッパーツール（F12キーを押す）を使って、赤いエラーがあるかどうかを確認する。 Elementorとインストールされているプラグインが最新であることを確認してください。バージョンの不一致が問題を引き起こすことがあります。 最後に、Elementor > Toolsで "Regenerate CSS "をクリックすると、読み込みの問題が解決することがあります。 これらのことをすべて試してもうまくいかない場合は、サーバーのエラーログを見るか、Elementorのテクニカルサポートに送って見てもらう必要があります。ほとんどの場合、この問題は解決しますので、あまり心配しないでください。
小兵のアバター - フォトンゆらぎネットワーク｜WordPress修理のプロフェッショナル、ワールドワイド、迅速対応

散兵4月15日 16:170

WordPressエディタが保存後にコンテンツを失う一般的な理由には、プラグインやテーマの競合、キャッシュの問題、データベースの書き込み失敗、REST APIのブロック、ブラウザの干渉などがあります。プラグインをチェックし、キャッシュをクリアし、デフォルトのテーマを切り替え、サイトの健全性とデバッグログをチェックし、段階的に問題を特定することをお勧めします。
泥棒はネズミのはらわたのアバターになる - フォトン・フラクチュエーション｜WordPress（ワードプレス）修理はワールドワイドに迅速対応するプロフェッショナルサービスダイヤモンド会員

泥棒はドブネズミの根性バッジ-あまり知られていない-フォトンゆらぎネットワーク｜専門的なWordPressの修理サービス、ワールドワイド、迅速な対応4月14日 17:590

WordPressでカスタムフォントが動作しない場合、フォントファイルのパスが正しくない、CSSセレクタが正しく適用されていない、フォントのフォーマットに互換性がない、CSSの優先順位に問題があるなどの原因が考えられます。フォントファイルが互換性のある形式で正しく読み込まれていることを確認し、CSSルールが対象の要素に正しく適用されていることを確認してください。テーマの設定がカスタムフォントを上書きする場合は、関連する設定も調整します。また、キャッシュをクリアし、ブラウザの開発者ツールを使って、他のCSSルールがフォント設定を上書きしていないか確認してください。
浙江省のハイエナアバター - 光子のゆらぎ｜WordPress修理のプロフェッショナル、ワールドワイド、迅速な対応

浙江省のハイエナ4月14日 17:111

データベース操作：SQLクエリを使用して、wp_postmetaテーブルからAll in One SEOに関連するすべてのメタデータを削除します。 プラグインリセット機能：All in One SEOプラグインの設定で、データをリセットまたはクリアするオプションを見つけます。 WordPress CLI: コマンドラインツールを使用して、プラグインに関連するメタデータを一括削除します。 手動削除：WordPressバックエンドの編集ページでSEO情報を一つずつ削除する。
raincloud2024のアバター - Photon Flux｜WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応

おかしいですね。バッジ - 人気 - Photon Flux｜プロフェッショナルなWordPress修理サービス、ワールドワイド、迅速な対応4月12日 16:000

ネットワーク問題
中国はヒシンハのアバターを持っている - フォトンゆらぎ｜WordPress修理のプロフェッショナル、ワールドワイド、迅速な対応

中国にはヒスハがある4月12日 15:020

WordPressのページが保存後に真っ白になるのは、通常、プラグインの競合やメモリ不足が原因です。プラグインを無効にし、メモリ制限を増やし、キャッシュをオフにし、PHPとプラグインのバージョンを更新してみてください。
jhuydgk さんのアバター - Photon Flux｜WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応

dgkバッジ - 初回限定 - フォトンゆらぎネットワーク｜WordPress修理のプロフェッショナル、グローバルスコープ、迅速対応4月11日 22:530

表示画像の設定、解像度が小さすぎる可能性がある
泥棒はネズミのはらわたのアバターになる - フォトン・フラクチュエーション｜WordPress（ワードプレス）修理はワールドワイドに迅速対応するプロフェッショナルサービスダイヤモンド会員

泥棒はドブネズミの根性バッジ-あまり知られていない-フォトンゆらぎネットワーク｜専門的なWordPressの修理サービス、ワールドワイド、迅速な対応4月11日 16:390

通常の方法に加え、メディア設定の調整、WebPフォーマットの使用、遅延読み込みテストのオフ、カスタムサイズの呼び出し、画像最適化プラグインの使用、無理な拡大縮小の回避などにより、画像の鮮明度を向上させることができる。