如何在单独的列表中显示 WooCommerce类别、子类别和产品

您将要创建的内容

woocommerce 为您提供了几个选项来显示您可以在存档页面上显示的内容：

• 产品

• 类别（在主商店页面上）或子类别（在类别页面上）

• 产品和类别

当我设置商店时，我通常选择第三个选项：产品和类别/子类别。这意味着我商店的访问者可以直接从主页选择产品，也可以通过点击产品类别档案来优化他们的搜索。

但是，这种方法有一个缺点：它将类别/子类别一起显示，两者之间没有分离。这意味着，如果您的产品图片与产品图片的尺寸不同，则布局可能看起来有点混乱。即使您的图像大小相同，如果存档页面中的某一行同时包含类别和产品，则缺少类别的“添加到购物车”按钮会使该行看起来不整洁，因为并非所有元素都具有相同的尺寸。

在本教程中，我将向您展示如何在显示产品之前在单独的列表中显示类别。

为此，我们将遵循四个步骤：

1. 识别 WooCommerce 用于在存档页面上输出类别和子类别的代码。

2. 为我们的代码创建一个插件。

3. 编写一个函数将类别或子类别放在产品列表之前。

4. 样式化输出。

但在开始之前，您需要安装 WooCommerce 并添加一些产品并设置产品类别和子类别。

你需要什么

要继续学习，您需要：

• wordpress的开发安装

• 代码编辑器

• WooCommerce 已安装并激活

• 添加的产品——我已经导入了WooCommerce 附带的虚拟产品数据；有关如何执行此操作的详细信息，请参阅本指南

• 已激活与 WooCommerce 兼容的主题——我正在使用Storefront

开始之前：默认选项

让我们看看 WooCommerce 默认为我们提供了什么。

我首先将一些图像添加到我的产品类别和子类别中，因为 WooCommerce 虚拟数据不包括这些。正如您在屏幕截图中看到的那样，我只是使用了每个类别或子类别中的一种产品的图像：

现在，让我们看看 WooCommerce 如何在存档页面上显示产品类别和产品。

如果您还没有，请打开定制器，选择 WooCommerce 选项卡，然后单击 产品目录。 

在 商店页面显示下，选择 显示类别和产品，在 类别显示下，选择 显示子类别和产品。

单击 发布 以保存您的更改并访问您网站的商店页面。我的看起来像这样：

因为我有四个类别和并排的三个图像的网格，所以前两个产品显示在其中一个类别旁边。

我想让我的类别和子类别更加突出，并简单地将它们与产品列表分开呈现。所以让我们这样做。

识别 WooCommerce 用于在档案中输出类别和产品的代码

第一步是确定 WooCommerce 如何输出类别和子类别。因此，让我们深入研究 WooCommerce 源代码以找到相关功能。

WooCommerce 用于显示存档页面的文件是 存档产品。php，它位于模板文件夹中。

在该文件中，您可以找到输出类别和产品的代码：

<?php
    /**
     * woocommerce_before_shop_loop hook
     *
     * @hooked woocommerce_result_count - 20
     * @hooked woocommerce_catalog_ordering - 30
    */
    do_action( 'woocommerce_before_shop_loop' );
?>
 
<?php woocommerce_product_loop_start(); ?>
 
    <?php woocommerce_product_subcategories(); ?>
 
    <?php while ( have_posts() ) : the_post(); ?>
 
        <?php wc_get_template_part( 'content', 'product' ); ?>
 
    <?php endwhile; // end of the loop. ?>
 
<?php woocommerce_product_loop_end(); ?>

所以有一个 woocommerce_product_subcategories()函数，在运行循环之前输出类别或子类别，输出产品。 

该函数是可插入的，这意味着我们可以在主题中覆盖它。不幸的是，这并不完全有效，因为 WooCommerce 具有用于清除项目的内置样式，这将出现在默认显示的行 开头。

因此，我们将关闭存档页面上的类别和子类别的显示，以便仅显示产品。然后，我们将创建一个输出产品类别或子类别的新函数，并将其与woocommerce_before_shop_loop操作挂钩，确保我们使用高优先级，以便它在已与该操作挂钩的功能之后触发。

注意：因为 WooCommerce 会在每三个产品列表中添加清除，我们不能使用该 woocommerce_product_subcategories() 功能或其编辑版本来显示类别。这是因为它会清除列出的第三、第六（等等）类别或产品，即使我们使用此功能单独显示类别。我们可以尝试覆盖它，但编写我们自己的函数更简单。

所以让我们创建一个插件来做到这一点。

创建插件

在您的 wp-content/plugins 目录中，创建一个新文件夹并为其命名。我打电话给我 的 tutsplus-separate-products-categories-in-archives。在其中，创建一个新文件，再次使用唯一的名称。我使用相同的名称：  tutsplus-separate-products-categories-in-archives.php。

打开您的文件并将此代码添加到其中：

<?php
/**
* Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages
* Plugin URI: https://www.weixiaolive.com/en/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479
* Description: Display products and categories / subcategories as two separate lists in product archive pages
* Version: 1.0
* Author: Rachel McCollin
* Author URI: https://rachelmccollin.co.uk
*
*
*/

您可能想要编辑作者详细信息，因为这是您正在编写的插件。保存您的文件并通过 WordPress 管理员激活插件。

编写我们的函数

现在让我们编写函数。但在开始之前，请关闭管理屏幕上的类别列表。打开定制器，单击WooCommerce选项，然后单击产品目录。对于每个Shop Page Display 和 Default Category Display 选项，选择 Show products。单击 Publish保存您的更改。

您的商店页面现在看起来像这样：

function tutsplus_product_subcategories( $args = array() ) {
}
add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );

现在，在函数中添加这段代码：

$parentid = get_queried_object_id();
$args = array(
    'parent' => $parentid
);
$terms = get_terms( 'product_cat', $args );
if ( $terms ) {
    echo '<ul class="product-cats">';
    foreach ( $terms as $term ) {
        echo '<li class="category">';                 
            woocommerce_subcategory_thumbnail( $term );
            echo '<h2>';
                echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
                    echo $term->name;
                echo '</a>';
            echo '</h2>';
        echo '</li>';
    }
    echo '</ul>';
}

让我们看一下该函数的作用：

• 它标识当前查询的对象并将其 id 定义为 $parentid。

• 它用于 get_terms() 标识以当前查询项为父项的术语。如果这是主商店页面，它将返回顶级类别；如果这是一个类别存档，它将返回子类别。

• ul 然后它在为每个循环和一个元素打开之前检查是否有任何术语 。

• 对于每个术语，它会创建一个 li 元素，然后使用 输出类别图像 woocommerce_subcategory_thumbnail()，然后在指向其存档的链接中输出类别名称。

现在保存您的文件并刷新主商店页面。我的看起来像这样：

显示了类别，但它们需要一些样式。接下来让我们这样做。

样式化类别列表

为了添加样式，我们需要在我们的插件中添加一个样式表，我们需要将其排入队列。

在您的插件文件夹中，创建一个名为 css的文件夹，并在其中创建一个名为 style.css的文件。

现在，在您的插件文件中，将其添加到您已经创建的函数之上：

function tutsplus_product_cats_css() {
    /* register the stylesheet */
    wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );
    /* enqueue the stylesheet */
    wp_enqueue_style( 'tutsplus_product_cats_css' );
}
add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );

这会正确地将您刚刚创建的样式表排入队列。

现在打开您的样式表并添加下面的代码。WooCommerce 使用移动优先的样式，所以这也是我们将使用的样式。

ul.product-cats {
    margin-left: 0;
}
ul.product-cats li {
    list-style: none;
    margin-left: 0;
    margin-bottom: 4.236em;
    text-align: center;    position: relative;
}
ul.product-cats li img {
    margin: 0 auto; 
}
@media screen and (min-width:768px) {
    ul.product-cats li {
        width: 29.4117647059%;
        float: left;
        margin-right: 5.8823529412%;
    }
    ul.product-cats li:nth-of-type(3) {
        margin-right: 0;
    }
}

我已经从 WooCommerce 使用的样式中复制了确切的宽度和边距。

现在再次检查您的主商店页面。这是我的：

这是 服装 类别档案：

以下是它在小屏幕上的外观：

概括

产品类别是 WooCommerce 的一大特色，但它们的显示方式并不总是理想的。在本教程中，您学习了如何创建一个插件，将产品类别或子类别与产品列表分开输出，然后您已经为类别列表设置样式。