Thêm custom fields cho variation product trong woocommerce

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Thêm custom fields cho variation product trong woocommerce

Bài trước, mình có hướng các bạn sử dụng variation products trong woocommerce trong tình huống mặt hàng của bạn có nhiều tính chất với giá thành khác nhau.
Và có nhiều người hỏi tôi thế nào để có thể thêm trường mới vào variation product. Vì vậy, trong bài hôm nay mình quyết định viết tutorial này sẽ giúp bạn tạo trường mới cho từng product variation. Kết quả sau của bài viết bạn sẽ khiến được trông giống thế này:
woocommerce-variations-custom-fields[1]

Bên cạnh việc thêm fields cho mặt hàng với loại mặt hàng variation bạn còn cũng có thể có thể thêm field mới cho từng variation product. Để làm điều này bạn sẽ cần đến 3 hàm liên kết với 3 hook.
woocommerce_product_after_variable_attributes : Đăng ký fields.
woocommerce_product_after_variable_attributes_js : Hàm thứ 2 tạo thêm fields khi nhấn vào nút “add variation” sử dụng javascript.
woocommerce_process_product_meta_variable : Hook cuối cùng, dùng để lưu lại dữ liệu trên fields trong cơ sở dữ liệu.

Trong thí dụ sau đây, mình có sử dụng 6 loại Fields:

  • Text Field
  • Number Field
  • Textarea
  • Dropdown Select
  • Checkbox
  • Hidden field

Cách tạo fields sử dụng woocommerce api mình đã nói trong bài hướng dẫn custom fields cho sản phẩm với woocommerce, bạn cũng có thể xem lại.
Giải thích nguyên tắc
Cơ bản không có gì khác nhiều so với cách tạo custom fields cho product nhưng đối với variation dữ liệu được thêm động thông qua sử dụng javascript: Khi bạn bấm vào “add variation” sẽ tạo nên thẻ div bởi javascript load nội dung fields mới mà bạn có đăng ký với hook nhưng tại đây chúng ta thấy có 2 hook khai báo fields giống nhau. Một hook nạp custom fields đã đọng lại trước đấy và hook còn sót lại dùng cho javascript để load thêm custom fields cho variation mới. Vì vậy tại sao chúng ta cần 2 hook này: woocommerce_product_after_variable_attributes woocommerce_product_after_variable_attributes_js

Toàn bộ đoạn code cho phần này như sau:

             __( 'My Text Field', 'woocommerce' ), 'placeholder' =>  'http://', 'desc_tip' =>  'true', 'description' =>  __( 'Enter the custom value here.', 'woocommerce' ), 'value' =>  $variation_data['_text_field'][0] ) ); ?>                 __( 'My Number Field', 'woocommerce' ), 'desc_tip' =>  'true', 'description' =>  __( 'Enter the custom number here.', 'woocommerce' ), 'value' =>  $variation_data['_number_field'][0], 'custom_attributes' =>  array( 'step' =>  'any', 'min' =>  '0' ) ) ); ?>                 __( 'My Textarea', 'woocommerce' ), 'placeholder' =>  '', 'description' =>  __( 'Enter the custom value here.', 'woocommerce' ), 'value' =>  $variation_data['_textarea'][0], ) ); ?>                 __( 'My Select Field', 'woocommerce' ), 'description' =>  __( 'Choose a value.', 'woocommerce' ), 'value' =>  $variation_data['_select'][0], 'options' =>  array( 'one' =>  __( 'Option 1', 'woocommerce' ), 'two' =>  __( 'Option 2', 'woocommerce' ), 'three' =>  __( 'Option 3', 'woocommerce' ) ) ) ); ?>                 __('My Checkbox Field', 'woocommerce' ), 'description' =>  __( 'Check me!', 'woocommerce' ), 'value' =>  $variation_data['_checkbox'][0], ) ); ?>                 'hidden_value' ) ); ?>                    __( 'My Text Field', 'woocommerce' ), 'placeholder' =>  'http://', 'desc_tip' =>  'true', 'description' =>  __( 'Enter the custom value here.', 'woocommerce' ), 'value' =>  $variation_data['_text_field'][0] ) ); ?>                 __( 'My Number Field', 'woocommerce' ), 'desc_tip' =>  'true', 'description' =>  __( 'Enter the custom number here.', 'woocommerce' ), 'value' =>  $variation_data['_number_field'][0], 'custom_attributes' =>  array( 'step' =>  'any', 'min' =>  '0' ) ) ); ?>                 __( 'My Textarea', 'woocommerce' ), 'placeholder' =>  '', 'description' =>  __( 'Enter the custom value here.', 'woocommerce' ), 'value' =>  $variation_data['_textarea'][0], ) ); ?>                 __( 'My Select Field', 'woocommerce' ), 'description' =>  __( 'Choose a value.', 'woocommerce' ), 'value' =>  $variation_data['_select'][0], 'options' =>  array( 'one' =>  __( 'Option 1', 'woocommerce' ), 'two' =>  __( 'Option 2', 'woocommerce' ), 'three' =>  __( 'Option 3', 'woocommerce' ) ) ) ); ?>                 __('My Checkbox Field', 'woocommerce' ), 'description' =>  __( 'Check me!', 'woocommerce' ), 'value' =>  $variation_data['_checkbox'][0], ) ); ?>                 'hidden_value' ) ); ?>         <?php } /** * Save new fields for variations * */ function save_variable_fields( $post_id ) { if (isset( $_POST['variable_sku'] ) ) : $variable_sku = $_POST['variable_sku']; $variable_post_id = $_POST['variable_post__text_field']; for ( $i = 0; $i  < sizeof( $variable_sku ); $i++ ) : $variation_id = (int) $variable_post_id[$i]; if ( isset( $_text_field[$i] ) ) { update_post_meta( $variation_id, '_text_field', stripslashes( $_text_field[$i] ) ); } endfor; // Number Field $_number_field = $_POST['_number_field']; for ( $i = 0; $i  < sizeof( $variable_sku ); $i++ ) : $variation_id = (int) $variable_post_id[$i]; if ( isset( $_text_field[$i] ) ) { update_post_meta( $variation_id, '_number_field', stripslashes( $_number_field[$i] ) ); } endfor; // Textarea $_textarea = $_POST['_textarea']; for ( $i = 0; $i  < sizeof( $variable_sku ); $i++ ) : $variation_id = (int) $variable_post_id[$i]; if ( isset( $_textarea[$i] ) ) { update_post_meta( $variation_id, '_textarea', stripslashes( $_textarea[$i] ) ); } endfor; // Select $_select = $_POST['_select']; for ( $i = 0; $i  < sizeof( $variable_sku ); $i++ ) : $variation_id = (int) $variable_post_id[$i]; if ( isset( $_select[$i] ) ) { update_post_meta( $variation_id, '_select', stripslashes( $_select[$i] ) ); } endfor; // Checkbox $_checkbox = $_POST['_checkbox']; for ( $i = 0; $i  < sizeof( $variable_sku ); $i++ ) : $variation_id = (int) $variable_post_id[$i]; if ( isset( $_checkbox[$i] ) ) { update_post_meta( $variation_id, '_checkbox', stripslashes( $_checkbox[$i] ) ); } endfor; // Hidden field $_hidden_field = $_POST['_hidden_field']; for ( $i = 0; $i  < sizeof( $variable_sku ); $i++ ) : $variation_id = (int) $variable_post_id[$i]; if ( isset( $_hidden_field[$i] ) ) { update_post_meta( $variation_id, '_hidden_field', stripslashes( $_hidden_field[$i] ) ); } endfor; endif; }  

Đăng ký fields sử dụng các hàm được tích hợp sẵn trong woocommerce, bạn có thể tìm thấy tại: WooCommerce/Admin/WritePanels/writepanels-init.php

  • woocommerce_wp_text_input()
  • woocommerce_wp_textarea_input()
  • woocommerce_wp_select()
  • woocommerce_wp_checkbox()
  • woocommerce_wp_hidden_input()

Mình nói thêm phần lưu dữ liệu fields, trong hàm save_variable_fields . Mỗi variation product là một product post meta riêng và từng loại field sẽ lưu chung vào mảng được tách riêng ID và value. ID của các variation chứa trong giá trị form $_POST[‘variable_post_id’] và giá trị tương ứng của mỗi loại fields thì chứa trong giá trị mảng tạo bởi form cho từng field name có cấu trúc giống như sau:

     

Ví dụ: lấy mảng giá trị của input có name=”_text_field” là $_POST[‘_text_field’] hay $_POST[‘_number_field’],..
Bạn để ý hàm tạo field woocommerce_wp_text_input , id có dạng '_number_field['.$loop.']' .

Sử dụng vòng lặp for để lưu giá trị của từng loại fields vào mỗi variation product. Mỗi variation và fields tương ứng sẽ theo thứ tự, nên bạn chỉ việc lặp số lượng các variation product từ 1 đến sizeof($_POST['variable_sku']) .

Hiển thị giá trị fields cho variation product

Vì là custom field cho custom post type nên chỉ cần sử dụng hàm get_post_meta() . Chúc bạn thành công.

Để thu được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng đều có thể thu được sự trợ giúp trên Twitter và Facebook

Bài viết Thêm custom fields cho variation product trong woocommerce được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang