給WooCommerce變量產(chǎn)品添加屬于變量的自定義字段

論文

WooCommerce二次開發(fā)中，我們經(jīng)常需要根據(jù)業(yè)務(wù)需要，給產(chǎn)品添加自定義字段，如果需要為其每個變量（很多人喜歡稱作SKU）各自添加自定義字段，以下這篇文章能教你如何實(shí)現(xiàn)。

如上圖，這是一個可變產(chǎn)品下的一個變量，我為其添加了一個名為“New Custom Meta”的字段。同時這個字段框會出現(xiàn)在這個產(chǎn)品的所有變量下供店主編輯。WooCommerce默認(rèn)已經(jīng)為可變產(chǎn)品提供了價格、尺寸、重量、庫存、描述等一系列字段，但它仍然無法滿足所有要求，比如我的每個SKU都會有不同的材質(zhì)、保質(zhì)期等等，我就需要添加新的字段去描述它們。

首先添加如下代碼，這樣后臺產(chǎn)品變量的編輯欄就能出現(xiàn)上面圖片中的字段了，用到woocommerce_product_after_variable_attributes這個勾子。

1. //add custome field for variations  - https://blog.brain1981.com
   
2. add_action( 'woocommerce_product_after_variable_attributes', 'brain1981_add_custom_field_to_variations', 10, 100 );
   
3. function brain1981_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
   
4.         $new_custom_meta = get_post_meta( $variation->ID, 'new_custom_meta', true );
   
5.         woocommerce_wp_text_input( array(
   
6.         'id' => 'new_custom_meta[' . $loop . ']',
   
7.         'name' => 'new_custom_meta[' . $loop . ']',
   
8.         'class' => 'short',
   
9.         'label' => __( 'New Custom Meta', 'woocommerce' ),
   
10.         'value' => $new_custom_meta
    
11.         ) );
    
12. }

復(fù)制代碼

可以看到前文的“woocommerce_wp_text_input”這個函數(shù)在這里仍然適用。那么woocommerce_wp_select、woocommerce_wp_textarea_input、 woocommerce_wp_checkbox等自然也都可以用在這里，就不贅述了。

通過woocommerce_save_product_variation這個勾子保存字段。

1. //save this field for variations  - https://blog.brain1981.com
   
2. add_action( 'woocommerce_save_product_variation', 'brain1091_save_variation_settings_fields', 10, 2 );
   
3. function brain1091_save_variation_settings_fields( $variation_id, $loop ) {
   
4.         $text_field = $_POST['new_custom_meta'][ $loop ];
   
5.         if ( ! empty( $text_field ) ) {
   
6.                 update_post_meta( $variation_id, 'new_custom_meta', esc_attr( $text_field ));
   
7.         }
   
8. }

復(fù)制代碼

把保存的字段放到變量的數(shù)組中，供前端調(diào)用

1. //load this field for variations to frontend  - https://blog.brain1981.com
   
2. add_filter( 'woocommerce_available_variation', 'brain1981_load_variation_settings_fields' );
   
3. function brain1981_load_variation_settings_fields( $variation ) {     
   
4.     $variation['new_custom_meta'] = get_post_meta( $variation[ 'variation_id' ], 'new_custom_meta', true );
   
5.     return $variation;
   
6. }

復(fù)制代碼

至此后端的工作就完成了，下面介紹前端如何調(diào)用這個字段。

通常，一個產(chǎn)品會有自己的product id，產(chǎn)品下的變量也會有自己的變量id，如果知道這個變量id，那么就和調(diào)用普通的自定義字段一樣就行了：

1. echo get_post_meta( $variation_id, 'new_custom_meta', true );

復(fù)制代碼

但大部分情況下我們是不知道這個variation_id的，能調(diào)到變量的自定義字段關(guān)鍵就需要知道這個變量的variation_id。在WooCommerce的產(chǎn)品頁面上，我們可能需要遍歷當(dāng)前產(chǎn)品的每一個variation_id，更有可能需要找到當(dāng)前所選定的這個變量的variation_id。

這時候可以通過頁面上的一個隱藏input元素獲取到當(dāng)前變量的variation_id。這個隱藏元素就在產(chǎn)品詳情頁中，html在WooCommerce的默認(rèn)主題文件”/single-product/add-to-cart/variation-add-to-cart-button.php”中，前端可以這樣取值：

1. $("input.variation_id").val()

復(fù)制代碼

要獲取當(dāng)前變量的new_custom_meta值，就需要一些前后端混寫的代碼了：

1. //load this field in current variations - https://blog.brain1981.com
   
2. global $product;
   
3. if ( $product->is_type('variable') ) {
   
4.         $new_custom_meta =[]; //create an array to store new_custom_meta values
   
5.         // Loop through variations data
   
6.         foreach($product->get_available_variations() as $variation ) {
   
7.                 $new_custom_meta[$variation['variation_id']] = $variation['new_custom_meta'];
   
8.         }
   
9.         ?>
   
10.         <script>
    
11.         var v_custom_meta= '';
    
12.         $(function($) {
    
13.                 var inputVID = 'input.variation_id';
    
14.                 var jsonData = <?php echo json_encode($new_custom_meta); ?>;
    
15.                 console.log("jsonData ",jsonData );//此JSON格式: {"1234":"value 1", "1235":"value 2", ...}
    
16.                 $('input').change( function(){
    
17.                         if( '' != $(inputVID).val() ) {
    
18.                                 var vid = $(inputVID).val(); //variation ID
    
19.                                 v_custom_meta = jsonData[vid];
    
20.                                 console.log("v_custom_meta",v_custom_meta);
    
21.                                 //do something to use this meta value...
    
22.                         }
    
23.                 });
    
24.         });
    
25.         </script>
    
26.         <?php
    
27. }

復(fù)制代碼

總結(jié)：基本思路還是很簡單的，之所以這里前后端混寫了，就是因?yàn)樾枰�根�?jù)用戶操作去讀取當(dāng)前變量的字段值。

道勤主機(jī)提供365天*24小時全年全天無休、實(shí)時在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟�免費(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！