如何在 WooCommerce 商店页面上显示类别

已发表: 2021-12-16

拥有出色的商店设计的一个重要部分是能够对您的产品进行分类。以正确的方式展示您销售的产品可以对您的销售产生重大影响。您的产品越容易访问，您的客户最终检查并购买它们的机会就越大。这就是为什么在本指南中，我们将向您展示在 WooCommerce 商店页面上显示类别的不同方式。

为什么在商店页面上显示类别？

如果您销售的产品种类繁多，您希望确保访问者轻松找到他们想要的东西。这需要精心组织。一次展示所有产品可能会使购物者不知所措，并且可能是失去潜在客户的一种简单方法。相反，您应该考虑以有利于您的商店的方式组织您的商店页面。

最好的方法之一是通过单独显示您的类别来充分利用您的商店布局。通过这种方式，您的客户可以专注于他们想要的产品类别，并且可以在他们感兴趣的所有产品类型之间进行切换。这使得导航更加容易，从而使他们能够快速找到他们想要的产品，从而带来更多的销售。

设置类别和特定类别

例如，如果您销售电子产品，您希望确保您的智能手机、台式 PC、PC 部件和其他设备显示在不同的类别中。这样，如果客户对计算机零件感兴趣，他们可以查看该特定类别并在其中找到他们想要的东西。同样，如果他们不确定他们需要的产品列在哪个类别中，那么参考同一类别中的其他产品可以帮助他们弄清楚这一点。

或者，您也可以在商店页面上仅显示特定类别的产品，以专注于较小的目录。仅在您的商店页面上宣传特定产品，并在您销售少量优质商品时帮助它们脱颖而出。

商店页面的组织至关重要，因为对客户友好的布局会对您的销售产生重大影响。考虑到这一点，让我们看一下在WooCommerce 商店页面上显示类别的一些方法以及如何自定义它。

如何在 WooCommerce 商店页面上显示类别

在 WooCommerce 的商店页面上显示类别有多种方式：

使用仪表板中的主题定制器
使用简码
以编程方式

让我们仔细看看每种方法。

注意：对于此演示，我们将使用 Storefront 主题，因此您的主题选项可能会略有不同。但是，大多数选项都是相似的，因此您不应该在遵循本指南时遇到问题。

1) 使用 WooCommerce 仪表板显示类别

在您的商店页面上显示类别的最简单方法是使用WooCommerce 设置。为此，在您的仪表板中，外观 > 自定义，然后单击定制器侧边栏上的WooCommerce > 产品目录。

在 woocommerce 商店页面上显示类别 - WC 仪表板产品目录

从这里，您可以使用商店页面显示并选择显示类别或显示类别和产品。

在 woocommerce 商店页面上显示类别 - WC 仪表板显示类别和产品

第一个选项将仅在您的商店页面上显示您的产品类别，而第二个选项将显示您的产品类别以及您的其他产品。例如，如果您在 Shop Page Display 下启用Show Categories ，您的 Shop page 将仅显示产品类别，如下所示：

但是，如果您选择Categories 和 Products ，它将首先显示您的 Categories，然后是您的产品目录的其余部分：

您还可以使用下面标记的类别显示选项在您的产品类别页面上显示/隐藏产品子类别和产品。

对自定义感到满意后，请记住单击“发布”以保存更改。

这种方法最有用的事情之一是您可以实时预览您的更改，这使得它易于使用。但是，它并没有为您提供太多控制，因为您只有两个选项。如果您想要更大的灵活性，请查看下一个方法。

2）使用简码显示类别

如果您使用页面构建器或自定义设计的商店页面设置了自定义商店页面，则可以启用 WooCommerce 短代码来显示您的产品类别。与使用仪表板相比，这使您可以更好地控制要显示的内容以及如何显示您的产品类别。此外，您可以使用此方法在任何 WordPress 页面或帖子上显示您的类别。

为此，您只需将以下短代码添加到您的商店页面：

 [ product_categories ]

这将在您的商店页面上显示您的产品类别。但这还不是全部。您可以使用其他属性来自定义简码。例如，您可以更改产品类别的顺序、仅显示父类别、隐藏空类别、定义类别数量等等。

要了解有关如何使用 WooCommerce 短代码的更多信息，我们建议您查看这篇文章。有关您可以使用的所有类别属性的更多信息，请查看此站点。

如果您使用的是 Gutenberg，只需转到 Shop 页面，添加短代码块并粘贴[ product_categories ]短代码。

现在让我们看看如何使用短代码。如果您想在 WooCommerce 商店页面上显示类别，按类别 ID 升序排列，您可以使用以下短代码：

 [ product_categories orderby = “id” order = “ASC” ]

在 woocommerce 商店页面上显示类别 - 自定义简码

这将显示在您的商店页面上，如下所示：

在 woocommerce 商店页面上显示类别 - 简码结果

如何在 WooCommerce 商店页面上显示特定类别

您还可以使用简码方法来显示特定的 WooCommerce 产品类别。

要使用它，您需要使用产品类别的 slug。您可以在Products > Categories下查看您的 Category slug。

在 WooCommerce 商店页面上显示类别 - 产品标签

了解特定产品的 slug 后，您可以在 Shop 页面上使用它，如下所示：

 [ product category category=”slug” ]

只需将 slug 文本替换为相应的类别 slug。例如，如果 slug 是 Show，则短代码将是：

在前端，您将看到如下内容：

您还可以使用可用于[ product categories ]的相同属性进行进一步定制。

3) 以编程方式显示类别

向 WooCommerce 商店页面添加类别的另一种方法是使用一些代码。建议具有编码技能并能够配置其主题文件的用户使用此方法。除了 PHP 的知识外，建议您也对 CSS 有基本的了解。如果您对这些语言不满意，我们建议您遵循上述方法。

由于我们将编辑一些核心文件，因此在您开始此过程之前，我们建议您备份您的网站并创建一个子主题（如果您还没有）。如果您不确定如何操作，请查看一些最好的儿童主题插件。

现在事不宜迟，让我们看看如何在 WooCommerce 商店页面上显示类别。

添加功能以在商店页面上显示类别

设置好子主题后，转到Appearance > Theme Editor打开主题functions.php文件。到达那里后，单击右侧主题文件侧栏上的functions.php文件。

在 WooCommerce 商店页面上显示类别 - 功能文件

现在您已准备好将以下脚本粘贴到编辑器以添加您的自定义函数。

此功能在加载您的商店页面的其余产品之前添加您的产品类别。这是在显示产品目录的其余部分之前添加所有产品类别项目的好方法。

 功能产品子类别（$args = 数组（））{
$parentid = get_queried_object_id();

$args = 数组（
'父' => $parentid
);

$terms = get_terms('product_cat', $args);

如果（$条款）{
回声'<ul class="product-cats">';

foreach ( $terms 作为 $term ) {
回声'<li class="category">'; 
woocommerce_subcategory_thumbnail( $term );
回声'<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
回声$术语->名称；
回声'</a>';
回声'</h2>';
回声'</li>';
}

回声'</ul>';
}

}

add_action('woocommerce_before_shop_loop', 'product_subcategories', 50);

如上所述，此功能会将您的类别部分添加到您的 WooCommerce 商店页面。但是，它可能看起来不像您想要的那样，并且可能与您网站的风格不匹配。这是因为您仍然需要为新创建的类别部分设置样式。

为您的自定义类别部分设置样式

现在让我们将可定制的 CSS添加到主题定制器的附加 CSS部分。在您的 WordPress 仪表板中，转到外观 > 自定义以打开主题自定义程序菜单，然后单击附加 CSS。

在 woocommerce 商店页面上显示类别 - 定制器附加 CSS

然后，将以下 CSS 片段粘贴到Additional CSS 部分并对其进行自定义，使其与您的网站样式相匹配。

可以想象，如果您了解 CSS，您将有更多选择。如果您不确定如何添加代码，请查看我们的指南，了解如何将 CSS 添加到 WordPress。

以下片段将更改图像的大小和图像下的文本。此代码是一个示例，因此请随意自定义它们并为它们提供适合您网站的样式以设置您的类别部分。

 ul.product-cats {
左边距：0；
}

ul.product-cats li {
列表样式：无；
左边距：0；
边距底部：4.236em；
文本对齐：居中；
位置：相对；
}

ul.product-cats li img {
边距：0 自动； 
}

@媒体屏幕和（最小宽度：768px）{

ul.product-cats li {
宽度：29.4117647059%；
向左飘浮;
边距右：.8823529412%；
}

ul.product-cats li:nth-of-type(3) {
右边距：0；
}
}

完成更改后，更新定制器设置，您的商店页面应更新为新类别部分。

奖励：改善商店页面的其他方法

您可以应用其他更改来确保您的商店页面尽可能对客户友好。这包括管理显示的产品数量、添加评分最高的产品部分等等。我们的想法是让您的产品易于找到并为您的客户提供更好的购物体验。让我们看一下如何自定义商店页面以提高销售额。

首先，让我们看看如何在产品类别下添加最受欢迎的产品列表。

如何在 WooCommerce 商店页面上显示最受欢迎的产品

除了添加您的产品类别外，您还可以使用简码添加自定义产品目录。这包括您可以使用此短代码显示的最受欢迎产品部分：

 [ products orderby="popularity" ]

如前所述，您可以添加可以在此处找到的简码属性。

要将最受欢迎的产品部分添加到您的商店页面，您只需添加以下短代码。在本例中，我们添加了一些属性以在两列中显示产品。

 [ products orderby="popularity" class="m-popular" columns="2" limit="2" ]

在 WooCommerce 商店页面上显示类别 - 奖金最高

此外，您可以使用简码添加多个部分，例如特价产品、畅销产品、评分最高的产品等：

[ best_selling_products ]
[ top_rated_products ]
[ recent_products ]

最好的部分是您可以在商店页面的不同部分使用这些短代码并自定义它们添加属性。这样，您可以控制商店页面的流量并增加销售额。

这些只是几个示例，但您可以做更多的事情来充分利用您的商店页面。要了解更多信息，请查看我们关于如何自定义 WooCommerce 商店页面的完整指南。

结论

总之，您在商店页面上展示产品的方式会对您的销售产生很大影响。这就是为什么显示类别和巧妙地组织您的产品是每个店主必须的。

在本教程中，我们向您展示了在 WooCommerce 商店页面上显示类别的不同方式：

使用主题定制器下的 WooCommerce 设置
使用简码
使用自定义函数和一些 CSS 来自定义它

如果您想要一个简单的解决方案，您可以使用 WordPress 仪表板中的选项。但是，该方法不提供许多自定义选项。另一种选择是使用您可以自定义的简码。但是，如果您想要更大的灵活性并具备编码技能，则可以以编程方式显示产品类别。请记住，为此，您需要了解 PHP 和 CSS。

此外，如果您正在寻找一种使用模板而不是从头开始自定义商店页面的方法，您也可以选择这样做。但是，为此，您必须配置模板文件并修改主题文件。我们有关于以编程方式自定义 Shop 页面以及在此处配置 WooCommerce 模板的完整指南：

如何以编程方式编辑 WooCommerce 商店页面
如何自定义 WooCommerce 模板文件

您是否自定义了商店页面并显示了产品类别？您使用了哪种方法？在下面的评论部分让我们知道！

最后，如果您正在寻找改进商店页面的其他方法，请查看以下文章：

以编程方式编辑 WooCommerce 商店页面（CSS 和 PHP）
如何在 Elementor 中自定义 WooCommerce 商店页面
如何修复 WooCommerce 商店页面为空