# 如何将自定义产品类型添加到“添加产品”向导列表

## 简介

WooCommerce 允许 **开发者** 扩展产品类型向导列表，从而提供更具可定制性和吸引力的体验，尤其是在“添加产品”向导任务中。 本教程将指导您如何使用 `experimental_woocommerce_tasklist_product_types` JavaScript 过滤器，将自定义产品类型添加到您的 WooCommerce 商店。

## 前置条件

- 具备基本的 JavaScript 和 PHP 知识。
- 您的 WordPress 站点已 **安装** WooCommerce 8.8 或更高版本。

## 第一步：添加 JavaScript 过滤器

要将新的产品类型添加到向导列表，我们将使用 `@wordpress/hooks` 包，特别是 `addFilter` 函数。 如果您不熟悉，`@wordpress/hooks` 允许您修改或扩展 WordPress 和 WooCommerce 生态系统中的功能，而无需修改核心代码。

首先，确保您已安装 `@wordpress/hooks` 包。 如果没有，您可以使用 `npm` 或 `yarn` 将其添加到您的项目中：

`npm install @wordpress/hooks`

或者：

`yarn add @wordpress/hooks`

接下来，将以下 JavaScript 代码添加到您的项目中。 此代码片段演示了如何将“自定义产品”类型添加到向导列表：

```javascript
/**
* External dependencies
*/
import { addFilter } from '@wordpress/hooks';
import { Icon, chevronRight } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import FolderMultipleIcon from 'gridicons/dist/folder-multiple';

addFilter(
   'experimental_woocommerce_tasklist_product_types',
   'custom-product',
   (productTypes) => [
       ...productTypes,
       {
           key: 'custom-product',
           title: __('Custom product', 'custom-product'),
           content: __('Create an awesome custom product.', 'custom-product'),
           before: <FolderMultipleIcon />,
           after: <Icon icon={chevronRight} />,
           onClick: () => {
           }
       },
   ]
);
```

此过滤器添加了一个名为“自定义产品”的新产品类型，并附带简短的描述以及标题前后的图标，以提供视觉吸引力。

## 第二步：可选 - 自定义 `onClick` 处理程序

默认情况下，如果未提供 `onClick` 处理程序，向导任务将使用默认的 CSV 模板处理程序。 要自定义此行为，您可以在产品类型对象中指定自己的 `onClick` 处理程序。

## 第三步：修改 CSV 模板路径（可选）

如果您希望为您的自定义产品类型使用不同的 CSV 模板，您可以使用 PHP 中的 `woocommerce_product_template_csv_file_path` 过滤器来修改模板路径。 以下是一个更改模板路径的示例：

```php
add_filter('woocommerce_product_template_csv_file_path', function($path) {
   // 在此处指定您的自定义模板路径
   return $newPath;
});
```

## 结论

使用 WooCommerce，扩展产品类型引导列表非常简单，并且提供了显著的灵活性，可以自定义引导体验。 通过遵循本教程中概述的步骤，您可以增强您的 WooCommerce 商店，并使“添加产品”任务更贴合您的特定需求，提供更有帮助的信息。