如何在產品頁面上添加 Woocommerce 自定義文本字段
已發表: 2020-09-21
在這篇文章中，我將向您展示一個在產品頁面上添加 WooCommerce 自定義文本字段的非常簡單的解決方案。 這些自定義字段也稱為產品插件，它們包括文本字段、選擇字段、複選框等。 添加此功能的主要原因是允許客戶付費輸入有關產品的其他個性化信息。
WooCommerce 是一個強大的 WordPress 電子商務解決方案，多年來廣受歡迎。 據估計，WooCommerce 為所有可用在線商店的 42% 以上提供支持。
這是一個很大的百分比，如果您正在尋找易於設置和管理的在線商店，那麼 WooCommerce 是您的最佳選擇。 它是一個免費的開源解決方案，已發展成為一個非常適合基於 WordPress 的網站的電子商務解決方案。
產品頁面上的 Woocommerce 自定義文本字段
如果您在互聯網上進行快速搜索，許多人會為您提供難以實施的複雜解決方案。 在這個簡短的教程中，我將分享一個 PHP 代碼片段，它將將此功能添加到您的產品頁面。
在本教程結束時，您在線商店的用戶將能夠為每個產品添加自定義註釋。 如果未填寫自定義字段，則會引發錯誤。
此外，如果您正在尋找一種更簡單的方法來添加自定義字段，那麼 WooCommerce 插件的 Product Extras 將是您的最佳解決方案。 但是，它是一個高級插件，您必須支付 59 美元的年費。 
為什麼要在產品頁面上添加自定義字段？
這樣做的主要原因是提高客戶保留率，這可能會促進銷售，因為客戶將能夠在訂單上添加自定義註釋。
例如，客戶可能想要產品上的禮品包裝或個性化賀卡，他或她可以在產品上添加自定義註釋。
將所有內容擺在桌面上，讓我們看一下在 WooCommerce 商店的產品頁面上添加自定義文本字段所需遵循的步驟。 默認產品頁面如下所示： 
在產品頁面上添加 Woocommerce 自定義文本字段的步驟
以下是您需要遵循的步驟：
- 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
- 從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。 打開主題編輯器頁面後，查找主題函數文件，我們將在其中添加將在產品頁面上添加 WooCommerce 自定義字段的函數。
- 將以下代碼添加到 functions.php 文件中：
/**
* @snippet 向產品添加輸入字段 - WooCommerce
*/
// -----------------------------------------
// 1. 在添加到購物車上方顯示自定義輸入字段
add_action（'woocommerce_before_add_to_cart_button'，'njengah_product_add_on'，9）；
功能 njengah_product_add_on() {
$value = isset($_POST['custom_text_add_on']) ？ sanitize_text_field（$_POST['_custom_text_add_on']）：''；
echo '<div><label>自定義文本插件 <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' 。 $value . '"></p></div>';
}
// -----------------------------------------
// 2. 如果自定義輸入字段為空，則拋出錯誤
add_filter('woocommerce_add_to_cart_validation', 'njengah_product_add_on_validation', 10, 3);
功能 njengah_product_add_on_validation( $passed, $product_id, $qty ){
if(isset($_POST['custom_text_add_on']) && sanitize_text_field($_POST['custom_text_add_on']) == '') {
wc_add_notice( '自定義文本插件是必填字段', 'error' );
$通過=假；
}
返回$通過；
}
// -----------------------------------------
// 3. 將自定義輸入字段值保存到購物車商品數據中
add_filter('woocommerce_add_cart_item_data', 'njengah_product_add_on_cart_item_data', 10, 2);
功能 njengah_product_add_on_cart_item_data（$cart_item，$product_id）{
如果（isset（$_POST['custom_text_add_on']））{
$cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );
}
返回 $cart_item;
}
// -----------------------------------------
// 4. 顯示自定義輸入字段值@購物車
add_filter('woocommerce_get_item_data', 'njengah_product_add_on_display_cart', 10, 2);
功能 njengah_product_add_on_display_cart( $data, $cart_item ) {
if ( isset( $cart_item['custom_text_add_on'] ) ){
$數據[] = 數組（
'name' => '自定義文本插件',
'價值' => sanitize_text_field( $cart_item['custom_text_add_on'] )
);
}
返回$數據；
}
// -----------------------------------------
// 5. 將自定義輸入字段值保存到訂單項元數據中
add_action('woocommerce_add_order_item_meta', 'njengah_product_add_on_order_item_meta', 10, 2);
功能 njengah_product_add_on_order_item_meta( $item_id, $values ) {
if ( !empty( $values['custom_text_add_on'] ) ) {
wc_add_order_item_meta( $item_id, '自定義文本插件', $values['custom_text_add_on'], true );
}
}
// -----------------------------------------
// 6. 將自定義輸入字段值顯示到訂單表中
add_filter('woocommerce_order_item_product', 'njengah_product_add_on_display_order', 10, 2);
功能 njengah_product_add_on_display_order( $cart_item, $order_item ){
if(isset($order_item['custom_text_add_on'])){
$cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];
}
返回 $cart_item;
}
// -----------------------------------------
// 7. 在訂單郵件中顯示自定義輸入字段值
add_filter（'woocommerce_email_order_meta_fields'，'njengah_product_add_on_display_emails'）；
功能 njengah_product_add_on_display_emails( $fields ) {
$fields['custom_text_add_on'] = '自定義文本插件';
返回$字段；
}- 要查看結果，只需刷新產品頁面，您應該會看到：
如果用戶沒有輸入詳細信息，則會顯示錯誤，直到用戶添加自定義文本，如下所示： 
自定義註釋也將出現在訂單詳細信息中，如下所示： 
代碼如何運作
首先，代碼顯示了添加到購物車上方的自定義輸入字段，然後如果自定義輸入字段為空則添加錯誤。 然後保存自定義輸入字段值，並顯示在購物車、訂單項目、訂單表和訂單電子郵件中。
結論
在這篇文章中，我為那些涉及使用插件的不太精通技術的用戶提供了一個更簡單的解決方案。 然後我分享了一個 PHP 代碼片段，它應該放在 functions.php 文件中，以在購物車、訂單商品、訂單表和訂單電子郵件中顯示客戶插件。 我希望這篇文章能幫助您在產品頁面上添加 WooCommerce 自定義文本字段。
類似文章
- 如何在 WooCommerce 中設置自定義相關產品
- 如何通過示例使用 WordPress 自定義 Hooks do_action 和 apply_filters
- 如何刪除下載菜單我的帳戶頁面 WooCommerce
- 如何在 WooCommerce 中獲取付款方式 » 代碼示例
- 如何在 WooCommerce 中隱藏沒有圖像的產品
- 如何刪除 WooCommerce 產品圖像的縮放效果
- 如何向 WooCommerce 產品添加類別
- 如何從 WordPress 的無序列表中刪除項目符號
- 如何在 WooCommerce 結帳表單中添加額外字段
- 如何在 WooCommerce 中更改繼續結帳文本
- 如何從前端添加 Woocommerce 產品
- 如何計算添加到購物車 WooCommerce 購物車計數代碼的項目
- 如何在 WooCommerce 中更改結帳按鈕文本 [下訂單]
- 5個帶有示例的WordPress分頁代碼片段[從簡單到高級]
- 如何在 WooCommerce 中更改庫存文本
- 按角色註冊後如何重定向 WooCommerce 用戶
- 如何在 Woocommerce 中獲取訂單 ID
- 如何使用簡單的技巧從 WordPress URL 中刪除 Hash #
- 如何在 WooCommerce 中的價格後添加描述
- 如何更改 WooCommerce 的“已添加到購物車”通知