WooCommerce它是迄今为止最流行的WordPress电子商务插件，如果我们通过WordPress网站销售某些东西时，建立 WooCommerce 几乎是必需的。在 WooCommerce过程中我们有时候会遇到显示每个产品的补货通知，让我们的客户知道什么时候可以购买缺货的产品。那么WooCommerce产品页如何添加和显示自定义字段？
1、创建插件文件
让我们创建将包含我们插件代码的主文件。使用 FTP 客户端导航到 WordPress 安装中的/wp-content/plugins/并创建一个名为ci-custom-product-fields （或任何您喜欢的其他内容）的文件夹 。接下来进入文件夹并创建一个名为 ci-custom-product-fields.php 的文件。
编辑文件并粘贴到类似于下面的标题中：
<?php/*** Plugin Name: Custom Product Fields for WooCommerce* Description: This small plugin will generate and display a custom product field.* Version: 1.0.0* Author: nik*/
现在我们的插件文件已经设置好了，我们可以继续输入代码了。
2、添加字段
如前所述，我们将挂钩 woocommerce_product_options_stock_fields 以在库存选项卡中添加该字段。要做到这一点，请粘贴以下代码：
add_action( 'woocommerce_product_options_stock_fields', 'my_restock_notice_field' );function my_restock_notice_field() {global $woocommerce, $post;woocommerce_wp_textarea_input(array('id' => 'my_restock_notice','placeholder' => 'Back in stock next week!','label' => 'Restock notice','description' => 'Let your customers know when the product will be back in stock.','desc_tip' => 'true',));}
在这个例子中，我们将使用 textarea 字段，因此使用 woocommerce_wp_textarea_input当然还有其他输入类型，例如文本字段、复选框、单选按钮等。
上面使用的属性非常简单， id是字段的 id， placeholder 是当没有输入数据时将出现在 textarea 中的一段文本， label 出现在描述的文本区域的左侧它的功能， description 更详细地描述了该字段的作用，最后 desc_tip将描述隐藏在 ? 文本区域的右侧，并在悬停后向用户显示，从而使外观更清晰。保存就大功告成了，字段已添加，您可以刷新产品编辑页面查看。
3、保存输入的数据
我们已经添加了自定义字段，但除非我们保存输入的数据，否则它没有特别的用处。为此，我们挂钩 woocommerce_process_product_meta并让 WooCommerce 知道我们要保存数据。通过粘贴下面的代码来做到这一点：
add_action( 'woocommerce_process_product_meta', 'my_restock_notice_save_data' );function my_restock_notice_save_data( $post_id ) {if ( 'no' === get_option( 'woocommerce_manage_stock' ) ) {return;}$my_restock_notice_textarea = $_POST['my_restock_notice'];if ( ! empty( $my_restock_notice_textarea ) ) {update_post_meta( $post_id, 'my_restock_notice', esc_html( $my_restock_notice_textarea ) );}}
我们上面所做的是首先检查 WooCommerce 中是否启用了库存管理，如果是我们继续。接下来，我们检查用户是否在补货通知字段中添加了某些内容，如果有，我们将其与产品的其余元数据一起保存。
4、显示自定义字段
现在我们已经成功创建了自定义字段并处理了数据持久性，我们需要显示它。如前所述，我们希望将其显示在缺货通知的正下方，为此我们将过滤库存通知的 html 以添加我们的补货通知。使用以下代码执行此操作：
add_filter( 'woocommerce_get_stock_html', 'my_restock_notice_display', 10, 2 );function my_restock_notice_display( $html, $product ) {$notice = get_post_meta( $product->get_ID(), 'my_restock_notice', true );$stock_status = $product->get_stock_status();if ( empty( $notice ) || 0 < $product->get_stock_quantity() || 'outofstock' !== $stock_status ) {return $html;}$html .= '<p class="my-restock-notice">' . esc_html( $notice ) . '</p>';return $html;}
在上面的代码中，我们注意仅当补货通知文本区域中确实有一些文本并且产品没有库存时才显示消息。我们将我们的 html 添加到已经存在的 html 中，然后将它们一起返回。
分类：新闻资讯