如果您有一個 WordPress 網站并且有興趣銷售任何東西，?WooCommerce很可能是最好的選擇。它是迄今為止最流行的 WordPress 電子商務插件。它得到了一個非常大的社區(qū)的支持，并且通過許多第三方作者的主題和插件進行了擴展。
當您需要通過 WordPress 網站銷售某些東西時，建立 WooCommerce 幾乎是必需的，這是有道理的，有些事情它不能做，無論如何都不能開箱即用。
在我們的示例中，我們希望顯示每個產品的補貨通知，讓我們的客戶知道什么時候可以購買缺貨的產品。幸運的是，WooCommerce 是可擴展的，我們只需幾行代碼就可以實現(xiàn)預期的結果。讓我們開始吧！
我們的目標
我們將在產品數(shù)據(jù)的庫存部分添加一個補貨通知字段， 如下所示。
在此字段中，我們可以添加一段文字，通知我們的客戶產品何時恢復庫存。該行將顯示在缺貨通知下方，如下圖所示。
創(chuàng)建插件文件
讓我們創(chuàng)建將包含我們插件代碼的主文件。使用 FTP 客戶端導航到 WordPress 安裝中的/wp-content/plugins/并創(chuàng)建一個名為ci-custom-product-fields （或任何您喜歡的其他內容）的文件夾 。接下來進入文件夾并創(chuàng)建一個名為 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
*/現(xiàn)在我們的插件文件已經設置好了，我們可以繼續(xù)輸入代碼了。
創(chuàng)建我們的自定義字段
要添加我們的新字段，我們需要掛鉤到產品選項的股票字段。如果您不確定鉤子和過濾器是什么，可以看下我們之前的文章：
要了解有關 WooCommerce 掛鉤的更多信息，您可以在這里查看掛鉤參考圖表。
現(xiàn)在我們已經了解了鉤子和過濾器。
添加字段
如前所述，我們將掛鉤 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 是當沒有輸入數(shù)據(jù)時將出現(xiàn)在 textarea 中的一段文本，? label ?出現(xiàn)在描述的文本區(qū)域的左側它的功能，??description?更詳細地描述了該字段的作用，最后?desc_tip將描述隱藏在???文本區(qū)域的右側，并在懸停后向用戶顯示，從而使外觀更清晰。保存就大功告成了，字段已添加，您可以刷新產品編輯頁面查看。
保存輸入的數(shù)據(jù)
我們已經添加了自定義字段，但除非我們保存輸入的數(shù)據(jù)，否則它沒有特別的用處。為此，我們掛鉤 woocommerce_process_product_meta并讓 WooCommerce 知道我們要保存數(shù)據(jù)。通過粘貼下面的代碼來做到這一點：
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 中是否啟用了庫存管理，如果是我們繼續(xù)。接下來，我們檢查用戶是否在補貨通知字段中添加了某些內容，如果有，我們將其與產品的其余元數(shù)據(jù)一起保存。
顯示自定義字段
現(xiàn)在我們已經成功創(chuàng)建了自定義字段并處理了數(shù)據(jù)持久性，我們需要顯示它。如前所述，我們希望將其顯示在缺貨通知的正下方，為此我們將過濾庫存通知的 html 以添加我們的補貨通知。使用以下代碼執(zhí)行此操作：
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;
}在上面的代碼中，我們注意僅當補貨通知文本區(qū)域中確實有一些文本并且產品沒有庫存時才顯示消息。我們將我們的 html 添加到已經存在的 html 中，然后將它們一起返回。
就是這樣！
我們做到了。您可以保存您的文件，刷新您的產品編輯頁面并在補貨通知文本區(qū)域填寫一些內容，更新產品并查看它！只要確保產品確實缺貨，否則不會顯示補貨通知。
注：本文內容來自 cssigniter.com，由 WordPress大學 翻譯整理。
拓展閱讀：
- WooCommerce添加額外的選項卡到產品詳情頁
- 更改 WooCommerce 特定支付網關的標題和描述
- WooCommerce自定義感謝頁面的內容
- WooCommerce修改賬單和收貨地址字段
- 在WooCommerce結賬頁面上更改“下訂單”按鈕的文本
- WooCommerce自定義修改結賬字段
- WooCommerce批量更改自定義訂單狀態(tài)
