添加自定义字段和选项卡到WooCommerce产品数据Metabox

小本本的自我介绍

我是一名网络开发者，对WordPress和WooCommerce具有深入的了解和经验。在开发电子商务网站时，我经常需要添加自定义产品字段，以满足特殊需求。

添加自定义字段表单项到现有选项卡

在开发WooCommerce电子商务网站时，产品默认提供的元数据字段不够我们使用，我们需要添加自定义产品字段来实现我们特殊的需求，比如我们可以添加产品的产地、品牌等自定义数据。我们可以通过自定义字段插件来添加字段，但是这种方法会在产品编辑页面新建一个Metabox，增加了UI的复杂度。其实我们可以把需要的自定义字段添加到WooCommerce默认的「产品数据」Metabox，只需要简单的几段代码就可以。

要添加自定义字段到现有的选项卡中，我们需要挂载两个钩子；一种用于输出字段，另一个用于保存字段的值。第一个钩子可以根据我们需要添加到的选项卡中下面的列表中选择一个

• woocommerce_product_options_general_product_data (“General｜常规”)
• woocommerce_product_options_inventory_product_data (“Inventory｜库存”)
• woocommerce_product_options_shipping (“Shipping｜配送”)
• woocommerce_product_options_related (“LinkedProducts｜联锁产品”)
• woocommerce_product_options_attributes (“Attributes｜属性”)
• woocommerce_product_options_advanced (“Advanced｜高级”)

添加自定义字段表单

添加自定义表单字段的方法很简单，WooCommerce为我们提供了一些显示常用表单的函数，我们直接在挂在到默认选项卡的钩子函数中使用这些函数添加表单字段即可，如下面代码中的woocommerce_wp_text_input函数，WooCommerce支持的其他表单字段函数都可以在上面的链接中找到。

通过添加上面的代码，我们可以得到如下图中的成果，最下面的「Numberinpackage」就是我们刚刚添加的字段。

保存自定义字段数据

需要注意的是，添加了自定义字段后，保存产品的时候，系统并不会自动保存我们这些自定义字段的值，我们需要通过下面的代码手动保存这些数据。

在前端输出我们添加的自定义数据

在后台添加了数据之后，我们就可以在模版代码中获取使用这些数据了，直接使用$product->get_meta()方法获取我们添加的自定义字段值即可。

面向对象方式

为了方法使用，我们可以把上面的代码写成一个类，在需要的地方示例化这个类就可以了。

添加表单项到自定义产品数据选项卡

如果我们需要添加的元数据比较多，并且这些元数据放到现有的产品数据选项卡中不合适，我们可以新建一个自定义产品数据选项卡，然后把自定义字段表单项添加到新建的产品数据选项卡中。

比如，我们需要添加一个「其他信息」的选项卡，然后添加几个自定义产品字段到这个选项卡中。

添加产品数据选项卡标题

首先，我们通过woocommerce_product_data_tabsFilter添加自定义选项卡标题到产品数据Metabox选项卡中。

添加产品数据选项卡内容

和添加到默认的选项卡一样，我们可以使用WooCommerce为我们提供的表单字段函数来快速添加表单字段。当然，如果需要，我们也可以通过HTML或PHP代码自行添加表单字段，注意：下面代码中的「id」需要上面代码中的「target」的值。

添加了

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。