如何排序和显示 WooCommerce 产品

WooCommerce 的产品排序和显示对于提升客户体验和增加网站转化率是很重要的。顾客能够快速找到他们想要的商品时，他们更可能购买并且回头光顾，从而提高用户体验。

好消息是，WooCommerce 提供了多种排序和显示产品的方式，包括默认设置、自定义选项、插件等。

本文会介绍多种方法来排序和显示 WooCommerce 产品，包括基本和高级设置，以及必备的插件。再探讨一下每种方法的优缺点，大家可以选择最适合自己的方案。

为什么要排序和显示 WooCommerce 产品？

排序和显示产品的目的有两个主要原因：

将潜在客户转化为购买者
当产品按特定标准进行排序时，顾客更容易找到他们想要的商品，从而增加购买几率。

为顾客提供优质的用户体验
排序可以使商店更有条理、易于浏览，从而为顾客提供更好的购物体验。

通过控制 WooCommerce 商店中的产品排序，减少商店混乱等。例如：可以根据产品的流行度、平均销量或者特定分类（如男士和女士服装）来排序产品。

如何对 WooCommerce 产品进行排序和显示

方法 1：通过默认 WooCommerce 选项对产品进行排序

WooCommerce 包含内置排序选项。对产品进行排序的最简单方法是使用这些默认方法，但它们提供的控制和自定义功能有限。

使用定制器

在最新的 WooCommerce 版本中，在设置中找不到默认产品排序选项，只能通过定制器访问它。

对于旧版本：

转到WooCommerce 仪表板>设置>产品选项卡。

在下拉菜单中，会看到默认的产品排序，重点关注不同的分类，例如价格和受欢迎程度。

对于 WooCommerce 3.3 及以上版本：

在 WordPress 管理仪表盘中转到外观>自定义。

在定制器中找到WooCommerce部分。

从下拉菜单中选择一个排序选项（例如按价格、受欢迎程度、平均评分、最新或按字母顺序）。

单击“发布”按钮保存。

我在这里用的主题是 Astra。如果用的是默认 WordPress 主题，则可能需要转到编辑器并选择WooCommerce 产品存档模板来编辑产品查询循环。我们的教程Astra主题保姆级教程可能会对你有帮助。

如何更改每个产品的菜单顺序

如果想在排序菜单中自定义单个产品顺序，按照以下步骤操作：

单击任意产品上的“编辑”

向下滚动到产品数据小部件

点击“高级”选项卡

调整菜单顺序设置来改变产品的位置。

在后端，此操作由woocommerce_catalog_order钩子管理。

这种方法的优缺点

✓易于设置

✓无需编码

✓提供基本排序选项（例如按价格、受欢迎程度、日期）

✗有限的定制

✗不适合复杂的排序需求

方法 2：如何在 WooCommerce 中对产品进行排序（手动）

用 WooCommerce，还可以手动排列产品。这对于创建自定义产品展示和突出显示重要项目非常有用。大家可以按照下面步骤操作：

在 WordPress 仪表盘上，转到“产品” > “所有产品”。

单击页面顶部的排序。

拖放产品来设置喜欢的顺序。

在这里设置的自定义顺序会成为浏览商店的客户的默认显示。

单个产品的手动分类：

为了更好地控制单个产品：

在编辑器中打开产品并向下滚动到产品数据部分。

在高级选项卡下，设置菜单顺序值（数字越低的产品显示顺序越高）。

如果想通过简单的拖放操作来微调位置，菜单顺序设置特别有用。

这种方法的优缺点

✓ 完全控制产品展示顺序

✓ 简单的拖放界面

✗ 大量库存耗时

✗ 如果产品优先级发生变化，则需要定期更新

方法 3：如何按类别或属性自定义排序

您还可以按类别或属性对产品进行分组，这有助于您的客户轻松找到特定组中的商品。当您的商店中有多种产品系列时，这种方法最有效。

请采取以下步骤：

单击“产品”，然后在 WooCommerce 工具栏中选择“类别”

添加新类别或通过为每个类别分配相关产品来管理现有类别。

按类别显示产品：前往“外观” > “菜单”，将类别链接添加到主导航

使用特定类别的短代码来获得更多控制。

按类别显示产品的简码：

[产品类别=”category-slug” orderby=”date” order=”asc”]

将“ category-slug ”替换为实际的类别名称。

按属性排序：

WooCommerce 还可以按颜色、尺寸或品牌等属性进行排序。设置方法如下：

转到“产品” > “属性”来创建或管理属性。

在每个产品的编辑页面上的产品数据部分中将这些属性分配给每个产品。

用侧边栏中的过滤器小部件或使用特定的短代码来启用基于属性的功能。

这种方法的优缺点

✓ 按特定类别或属性（例如颜色、尺寸）对产品进行分类

✓ 非常适合拥有多种产品类型的商店

✗ 需要为每个产品设置准确的属性

✗ 可能变得复杂，具有许多类别或属性

方法 4：如何使用 WooCommerce 短代码显示产品

在 WooCommerce 商店中对产品进行排序和显示的另一个方法是使用短代码。这些短代码可以自定义默认排序参数（例如按价格、评级、日期）和排序顺序 – 升序或降序。

下面是一个简单的显示简码示例。还可以使用其他属性自定义显示，包括列、限制、类别等。

[products limit=”8″ columns=”4″]

以下是用于排序和显示产品的其他短代码：

按类别显示产品：

显示特色产品：

显示畅销产品：

显示最近的产品：

显示最受好评的产品：

显示最畅销产品的短代码为例。

要添加

短代码以在 WooCommerce 商店中显示最畅销的产品，请按照以下步骤操作：导航到“页面”选项卡，然后在 WordPress 管理面板中选择“所有页面”（或者，如果想将其添加到博客文章中，则选择“帖子”、“所有帖子”）。

选择想要最畅销产品所在的页面或帖子，然后单击“编辑”。我选择的是主页。

在 WordPress 编辑器中，单击 + 按钮添加一个块。

在搜索栏中搜索“Shortcode”。

这是添加短代码的地方。粘贴以下内容：

limit：确定显示多少最受欢迎的产品。

💡columns：指定用于显示产品的列数。

现在，按下“发布”按钮。

浏览网站的前端以确认最受欢迎的产品得到正确的推广。

这种方法的优缺点

✓ 可灵活地在任何页面上显示特定产品或类别

✓ 高度可定制的短代码参数

✗ 仅限于页面级定制

✗ 可能需要针对某些主题进行样式调整

方法五：如何使用插件排序和显示

使用WooCommerce 插件可以为提供更多高级选项和灵活性。

要安装并激活 WooCommerce 排序插件，按照以下步骤操作：

转到你的WordPress仪表盘。

单击插件>添加新插件。搜索想要的插件。

单击立即安装。

安装后，单击“激活”以激活插件。

在本教程里面，我安装了 WooCommerce 的免费插件Extra Product Sorting Options。

会在 WooCommerce 自定义面板中找到多个设置。

在商店页面，会发现更多排序选项。

方法 6：如何添加自定义 WooCommerce 产品排序（高级）

如果可用的排序过滤器满足不了网站访问者的需求，还可以创建自定义排序选项，这些选项将显示在商店页面的下拉菜单中。

这样做可以根据自定义字段或元数据（例如位置、销售点或其他唯一属性）进行排序。

步骤 1：添加自定义排序选项

将以下代码片段添加到主题的 functions.php 文件中以添加新的排序选项：function add_custom_woocommerce_sort_option( $sort_options ) {
$sort_options[‘custom_sort_order’] = ‘Custom Sorting Order’; // Label for the sorting option
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 步：定义排序逻辑

使用以下代码实现自定义排序逻辑。将“ your_custom_meta_key ”替换为用于排序的实际元键：

函数custom_product_sort（$查询）{

function custom_product_sort( $query ) {
if ( ! is_admin() && $query->is_main_query() && is_shop() || is_product_category() ) { // Ensure this only affects the shop page and product categories
if ( isset( $_GET[‘orderby’] ) && $_GET[‘orderby’] == ‘custom_sort_order’ ) {
$query->set( ‘meta_key’, ‘your_custom_meta_key’ ); // Replace ‘your_custom_meta_key’ with your actual meta key
$query->set( ‘orderby’, ‘meta_value_num’ ); // For numeric sorting; use ‘meta_value’ for text
$query->set( ‘order’, ‘DESC’ ); // Set sorting order (ASC or DESC)
}
}
}
add_action( ‘woocommerce_product_query’, ‘custom_product_sort’ );

如何使用自定义字段对产品进行排序和显示

可以添加元值来使排序过滤器也包含数字和文本。

为了方便自定义过滤器，我会添加两个排序选项：按位置排序和按销售点排序。

注意：将以下代码放在子主题的functions.php 文件中。

// Step 1: Modify WooCommerce ordering arguments to support custom fields for sorting
function cw_add_postmeta_ordering_args( $args_sort_cw ) {
$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’; // Set the sorting order (ASC or DESC)
$args_sort_cw[‘meta_key’] = ‘points’; // Meta key for ‘points’
break;
case ‘location’:
$args_sort_cw[‘orderby’] = ‘meta_value’;
$args_sort_cw[‘order’] = ‘ASC’; // Set the sorting order (ASC or DESC)
$args_sort_cw[‘meta_key’] = ‘location’; // Meta key for ‘location’
break;
}

return $args_sort_cw;
}
add_filter( ‘woocommerce_get_catalog_ordering_args’, ‘cw_add_postmeta_ordering_args’ );

// Step 2: Add new sorting options to WooCommerce dropdown
function cw_add_new_postmeta_orderby( $sortby ) {
$sortby[‘location’] = __( ‘Sort By Location’, ‘woocommerce’ );
$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’ );

添加上述代码后，排序过滤器将出现在产品页面的下拉菜单中。不过，它显示在排序菜单中，但文章里面还展示了如何在单个产品页面上显示这些值。

怎么在产品页面上显示自定义字段值

添加以下代码片段以在产品页面上显示位置和销售点等字段。同样，可以用相同的元值在商店页面上显示任何自定义字段。

function cw_shop_display() {
global $product;

// Get custom meta fields for each product
$location = get_post_meta( $product->get_id(), ‘location’, true );
$point_of_sale = get_post_meta( $product->get_id(), ‘points’, true );

if ( ! empty( $location ) ) {
echo ‘<div class=”product-meta”><span class=”product-meta-label”>Location:</span> ‘ . esc_html( $location ) . ‘</div>’;
}
if ( ! empty( $point_of_sale ) ) {
echo ‘<div class=”product-meta”><span class=”product-meta-label”>Sale Points:</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 );

每当访客选择一个排序选项时，相应的值就会相应改变。以下屏幕截图显示了按位置排序。

按销售点排序也是这样。

如果想编辑单个产品，需要为自定义字段设置一个值。

通过这些方法，可以有效提升 WooCommerce 商店的产品排序和显示功能，增强顾客的购物体验并提高转化率。可以根据自身的需求和店铺规模选择最合适的方式来优化产品展示和排序。