Tạo thêm custom fields cho product trong woocommerce

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

Woocommerce không còn nghi ngờ là một wordpress plugin tạo website thương mại điện tử vô cùng sức mạnh, nó hỗ trợ api gần như bạn xong xuôi được mọi thứ. Trong bài bữa nay tôi sẽ chỉ cho bạn ra sao thêm trường mới vào mọi loại mặt hàng của woocommerce.
Kết quả sau lúc đọc xong bài viết này bạn có thể thi hành được như hình dưới đây:
woocommerce-product-fields

Như bạn nhìn thấy trên hình, chúng ta sẽ thấy các fields mới được thêm vào trang chỉnh sửa sản phẩm. Và để làm điều đó chúng ta sử dụng woocommerce API chèn vào functions.php trong folder theme của bạn.

Để bắt đầu bài tập đơn giản, mình sẽ thêm custom fields vào tab đầu tiên general tab , về sau các bạn sẽ tìm hiểu cách thêm fields vào tab khác có sẵn khác hoặc thêm tab mới.

WooCommerce Hooks

Cách sử lý cũng như như bạn làm việc với custom fields trong wordpress với User, chúng ta sử dụng 2 hooks. Thêm action cho hook woocommerce_product_options_general_product_data , hàm liên kết với hook này sẽ hiển thị trường mới. Hook thứ hai, dùng để lưu giá trị của trường woocommerce_process_product_meta .

 // Display Fields add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' ); // Save Fields add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );  

Thêm trường mới

Đoạn code trên, là 2 actions callback cho 2 hook có công năng tạo mới và hiển thị fields, cuối cùng lưu giá trị fields sử lý bởi hàm hook woocommerce_process_product_meta . Đầu tiên, là hàm tạo fields có nội dung như sau.

 function woo_add_custom_general_fields() { global $woocommerce, $post; echo ' 
'; // Custom fields will be created here... echo '
'; }

Để tạo các fields, chúng ta sử dụng tính năng thành lập form fields có sẵn cung cấp bởi woocommerce api. Tất cả các api này bạn có thể tìm thấy trong file “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ột số dạng Field mẫu:

Text Field Type

Phổ biến đặc biệt là text field, thêm code sau nếu bạn tạo field nhập văn bản như họ tên, SĐT..

 // Text Field woocommerce_wp_text_input( array( '_text_field', 'label' =>  __( 'My Text Field', 'woocommerce' ), 'placeholder' =>  'http://', 'desc_tip' =>  'true', 'description' =>  __( 'Enter the custom value here.', 'woocommerce' ) ) );  

Ví dụ: thêm text field vào nội dung tab general.

 function woo_add_custom_general_fields() { global $woocommerce, $post; echo ' 
'; // Text Field woocommerce_wp_text_input( array( '_text_field', 'label' => __( 'My Text Field', 'woocommerce' ), 'placeholder' => 'http://', 'desc_tip' => 'true', 'description' => __( 'Enter the custom value here.', 'woocommerce' ) ) ); echo '
'; }

Lưu ý: tham số 'desc_tip'=> 'true' dùng hiển thị tooltip thay vì hiển thị mô tả ra ngoài bên dưới field, sẽ có biểu tượng hướng dẫn cách dùng cho field đó thông qua tooltip.
woo-field-tooltip

description là nội dung của tooltip, nếu desc_tip=true hoặc mặc định desc_tip=false là miêu tả field thông thường. Tính năng tooltip có thể áp dụng cho mọi kiểu field.

Number Field Type

Để tạo Number Field, bạn sẽ dùng đến code này:

 // Number Field woocommerce_wp_text_input( array( '_number_field', 'label' =>  __( 'My Number Field', 'woocommerce' ), 'placeholder' =>  '', 'description' =>  __( 'Enter the custom value here.', 'woocommerce' ), 'type' =>  'number', 'custom_attributes' =>  array( 'step' =>  'any', 'min' =>  '0' ) ) );  

Number Field và Input text sử dụng chung thẻ < input , nên thiết kế chọn vào hàm woocommerce_wp_text_input chỉ khác tham số 'type', với kiểu input muốn tạo. Loại field dạng nhập số thì thiết lập type=> 'number'. Bạn cũng đều có thể thiết lập các thuộc tính khác cho kiểu field này thí dụ bước nhảy số ( step ), giá trị min , giá trị max .

Ở code trên, mặc định step=1 và thiết lập số nhỏ nhất bắt đầu từ 0. Lưu ý: min, max là số tự nhiên.

Textarea Field Type

Tạo Textarea bằng code dưới đây:

 // Textarea woocommerce_wp_textarea_input( array( '_textarea', 'label' =>  __( 'My Textarea', 'woocommerce' ), 'placeholder' =>  '', 'description' =>  __( 'Enter the custom value here.', 'woocommerce' ) ) );  

Cũng đơn giản như input text với hàm woocommerce_wp_text_input .
Bạn có thể tùy biến hiển thị form field, bằng cách thêm phần tử HTML hoặc sửa thuộc tính class..nếu không thích dùng hàm woocommerce_wp_textarea_input bạn sẽ thật cần khái niệm hàm tạo textarea mới. Ví dụ:

 function _woocommerce_wp_textarea_input( $field ) { global $thepostid, $post; if ( ! $thepostid ) $thepostid = $post-> ID; if ( ! isset( $field['placeholder'] ) ) $field['placeholder'] = ''; if ( ! isset( $field['short'; if ( ! isset( $field['value'] ) ) $field['value'] = get_post_meta( $thepostid, $field[' 

'; if ( isset( $field['description'] ) && $field['description'] ) { echo ' ' . $field['description'] . ' '; } echo '

'; }

Dropdown Select Field Type

Dropdown field thì phức tạp hơn xíu, bạn phải nhập dữ liệu options.

 // Select woocommerce_wp_select( array( '_select', 'label' =>  __( 'My Select Field', 'woocommerce' ), 'options' =>  array( 'one' =>  __( 'Option 1', 'woocommerce' ), 'two' =>  __( 'Option 2', 'woocommerce' ), 'three' =>  __( 'Option 3', 'woocommerce' ) ) ) );  

Nhập danh sách chọn lựa bởi mảng dữ liệu vào tham số 'options'.

Checkbox Field Type

Code sau đây sử dụng tạo field checkbox.

 // Checkbox woocommerce_wp_checkbox( array( '_checkbox', 'wrapper_show_if_simple', 'label' =>  __('My Checkbox Field', 'woocommerce' ), 'description' =>  __( 'Check me!', 'woocommerce' ) ) );  

Hidden Field Type

Với hidden field thì khá dễ dàng chỉ cần id và value.

 // Hidden field woocommerce_wp_hidden_input( array( '_hidden_field', 'value' =>  'hidden_value' ) );  

Products Select Field Type

Ngoài, những field thông dụng của form, bạn cũng có thể có thể tạo các fields đặc thù riêng của woocommerce. Đoạn code sau đây sẽ tạo trường lựa chọn sản phẩm.

 // Product Select ?>   

"> ID, '_product_field_type_ids', true ); $product_ids = ! empty( $product_field_type_ids ) ? array_map( 'absint', $product_field_type_ids ) : null; if ( $product_ids ) { foreach ( $product_ids as $product_id ) { $product = get_product( $product_id ); $product_name = woocommerce_get_formatted_product_name( $product ); echo ' ' . esc_html( $product_name ) . ' '; } } ?>

<?php

woo-products-select-field

Custom Field Type

Bên cạnh đó,bạn còn cũng có thể có thể tạo custom field tự khái niệm riêng, nhờ vào cách lưu đa chủng loại dữ liệu trong wordpress bởi hàm update_post_meta . Với post meta wordpress hỗ trợ lưu kiểu chuỗi, số, boolean, thậm trí mảng. Trường hợp lưu giá trị là đối tượng vd mảng wordpress sử dụng hàm php serialize dùng để mã hóa đối tượng và giải mã trái lại bởi hàm unserialize .
Ví dụ sau đây, tôi tạo 2 Number fields lưu giá trị của chúng vào mảng chung với danh tức là một field.

 // Custom field Type ?>   

ID, '_custom_field_type', true ); ?> <input placeholder=" " type="number" name="_field_one" value=" " step="any" min="0" style="width: 80px;" /> <input placeholder=" " type="number" name="_field_two" value=" " step="any" min="0" style="width: 80px;" />

<?php

Bạn cũng có thể có thể làm mọi thứ trong việc thiết kế custom field, như thêm CSS trang điểm field.

Lưu giá trị Fields

Chúng ta đã tạo xong fields và hiển thị trong tab general, tiếp đến công đoạn lưu giá trị fields mới này cho mặt hàng ngày nay đang ở cửa sổ chỉnh sửa tin tức sản phẩm. Giá trị của fields sẽ đọng lại khi bấm vào nút update hoặc Publish. Như trước đó bạn biết, chúng ta sẽ sử dụng hàm woo_add_custom_general_fields_save liên kết vào hook woocommerce_process_product_meta . Nguyên lý rất đơn giản, hàm sẽ kiểm tra sự tồn tại giá trị của field trong dữ liệu form POST, nếu field có mức giá trị chúng ta sẽ tạo post meta sử dụng update_post_meta() . Chú ý để lưu dữ liệu an toàn, chúng ta sử dụng thêm esc_attr() esc_html()

Đoạn code sau này là ví dụ cách lưu mỗi kiểu field.

     

Kết quả:
mastering-woocommerce-custom-fields-2

Hiển thị dữ liệu custom field cho sản phẩm

Chúng ta vừa hoàn tất tạo fields và lưu giá trị fields cho từng sản phẩm. Những dữ liệu này sẽ có hiện trên frontend trong woocommerce custom template của bạn. Ở bài học trước mình viết khá đầy đủ cách tùy biến giao diện và tính năng với woocommerce thông qua sử dụng filters hooks và override Woocommerce default fields.
Để lấy thông tin custom field, chúng ta sử dụng hàm get_post_meta() . Xác định product ID và tên field cần lấy.

   ID, 'my-field-slug', true ); // You can also use echo get_post_meta( get_the_ID(), 'my-field-slug', true ); ?>   

Tham số thứ là giá trị tính chất 'woocommerce_single_product_summary' );

 echo get_post_meta( get_the_ID(), '_text_field', true );  

View trang sản phẩm sẽ thấy ngay kết quả, hiển thị thêm chuỗi là giá trị của field '_text_field'.

Tạo tabs mới

Cuối cùng code snippet sau đây giúp bạn tạo thêm tabs sản phẩm:

 add_action( 'woocommerce_product_write_panel_tabs', 'woo_add_custom_admin_product_tab' ); function woo_add_custom_admin_product_tab() { ?>   
  • <?php }

    Kết quả:
    woo-custom-product-tab

    Tab có tượng trưng mặc định như hình trên, tuy vậy bạn có thể trang trí tab bằng cách thêm CSS, tỉ dụ thay icon cho tab.
    Nếu nếu muốn thêm fields vào trong những tab khác ngoài general tab, bạn chỉ việc sửa lại tên hook của hàm liên kết woo_add_custom_general_fields cho đúng tab bạn cần. Ví dụ: sử dụng hook woocommerce_product_options_shipping để thêm fields vào shipping tab. Mọi thông tin hooks xem tại woocommerce/admin/post-types/writepanels/writepanel-product_data.php

    Thêm fields vào custom tab

    Hiện tại tab chưa hiện hữu fields nào, chúng ta sử dụng hook woocommerce_product_write_panels để hiển thị các fields cho những custom tab mới thêm. Thêm hàm liên kết vào hook woocommerce_product_write_panels , mọi fields được phân phối vào các custom tabs chúng ta sẽ sử lý tại callback này. Với mỗi tab xác định bởi một ID bao bởi thẻ DIV.

     /** * Adds the panel to the Product Data postbox in the product interface */ public function product_write_panel() { global $post; // the product if ( defined( 'WOOCOMMERCE_VERSION' ) && version_compare( WOOCOMMERCE_VERSION, '2.1', '     ID, 'frs_woo_product_tabs', true ) ); if ( empty( $tab_data ) ) { $tab_data[] = array( 'title' =>  '', 'content' =>  '' ); } foreach ( $tab_data as $tab ) { // display the custom tab panel echo ' 
    '; woocommerce_wp_text_input( array( '_wc_custom_product_tabs_lite_tab_title', 'label' => __( 'Tab Title', self::TEXT_DOMAIN ), 'description' => __( 'Required for tab to be visible', self::TEXT_DOMAIN ), 'value' => $tab['title'] ) ); woocommerce_wp_textarea_input( array( '_wc_custom_product_tabs_lite_tab_content', 'label' => __( 'Content', self::TEXT_DOMAIN ), 'placeholder' => __( 'HTML and text to display.', self::TEXT_DOMAIN ), 'value' => $tab['content'], 'style' => 'width:70%;height:21.5em;' ) ); echo '
    '; } }

    Lưu giá trị fields trên tab

    Nếu bạn tạo nhiều tab, chúng ta nên ghi nhớ tên fields theo tab và cũng có thể có thể lưu toàn bộ dữ liệu của fields phân loại vào các custom tabs vào mảng 2 chiều và update_post_meta cho dễ quản lý.

     public function generate_tabId($tab_title){ $tab_id = ''; if ( $tab_title ) { if ( strlen( $tab_title ) != strlen( utf8_encode( $tab_title ) ) ) { // can't have titles with utf8 characters as it breaks the tab-switching javascript $tab_id = "tab-custom"; } else { // convert the tab title into an id string $tab_id = strtolower( $tab_title ); $tab_id = preg_replace( "/[^ws]/", '', $tab_id ); // remove non-alphas, numbers, underscores or whitespace $tab_id = preg_replace( "/_+/", ' ', $tab_id ); // replace all underscores with single spaces $tab_id = preg_replace( "/s+/", '-', $tab_id ); // replace all multiple spaces with single dashes $tab_id = 'tab-' . $tab_id; // prepend with 'tab-' string } } return $tab_id; } public function product_save_data( $post_id, $post ) { $tab1_title = stripslashes( $_POST['_wc_custom_product_tabs_1_title'] ); $tab1_content = stripslashes( $_POST['_wc_custom_product_tabs_1_content'] ); $tab2_title = stripslashes( $_POST['_wc_custom_product_tabs_2_title'] ); $tab2_content = stripslashes( $_POST['_wc_custom_product_tabs_2_content'] ); // save the data to the database $tab_data['tab1'] = array( 'title' =>  $tab1_title, 'content' =>  $tab1_content ); $tab_data['tab2'] = array( 'title' =>  $tab2_title, 'content' =>  $tab2_content ); update_post_meta( $post_id, 'frs_woo_product_tabs', $tab_data ); }  

    Sửa lại nội dung các tabs sử dụng với nhiều fields khác nhau.

     foreach ( $tab_data as $tab_> $tab ) { if($tab_> '; woocommerce_wp_text_input( array( '_wc_custom_product_tabs_1_title', 'label' =>  __( 'Tab Title', self::TEXT_DOMAIN ), 'description' =>  __( 'Required for tab to be visible', self::TEXT_DOMAIN ), 'value' =>  $tab['title'] ) ); $this-> woocommerce_wp_textarea_input( array( '_wc_custom_product_tabs_1_content', 'label' =>  __( 'Content', self::TEXT_DOMAIN ), 'placeholder' =>  __( 'HTML and text to display.', self::TEXT_DOMAIN ), 'value' =>  $tab['content'], 'style' =>  'width:70%;height:21.5em;' ) ); echo ''; } if($tab_> '; woocommerce_wp_text_input( array( '_wc_custom_product_tabs_2_title', 'label' =>  __( 'Tab Title', self::TEXT_DOMAIN ), 'description' =>  __( 'Required for tab to be visible', self::TEXT_DOMAIN ), 'value' =>  $tab['title'] ) ); woocommerce_wp_textarea_input( array( '_wc_custom_product_tabs_2_content', 'label' =>  __( 'Content', self::TEXT_DOMAIN ), 'placeholder' =>  __( 'HTML and text to display.', self::TEXT_DOMAIN ), 'value' =>  $tab['content'], 'style' =>  'width:70%;height:21.5em;' ) ); echo ''; } ... }  

    Cách sử lý khác là lưu tên tab vào trong mảng chứa dữ liệu field.

     $tab_data[] = array('tab'=> 'tab1', 'title' =>  $tab1_title, 'content' =>  $tab1_content ); $tab_data[] = array('tab'=> 'tab2', 'title' =>  $tab2_title, 'content' =>  $tab2_content ); update_post_meta( $post_id, 'frs_woo_product_tabs', $tab_data );  

    Lấy fields ra tabs.

     foreach ( $tab_data as $tab ) { if($tab['tab']=='tab1'){ // display the custom tab panel echo ' 
    '; woocommerce_wp_text_input( array( '_wc_custom_product_tabs_1_title', 'label' => __( 'Tab Title', self::TEXT_DOMAIN ), 'description' => __( 'Required for tab to be visible', self::TEXT_DOMAIN ), 'value' => $tab['title'] ) ); $this-> woocommerce_wp_textarea_input( array( '_wc_custom_product_tabs_1_content', 'label' => __( 'Content', self::TEXT_DOMAIN ), 'placeholder' => __( 'HTML and text to display.', self::TEXT_DOMAIN ), 'value' => $tab['content'], 'style' => 'width:70%;height:21.5em;' ) ); echo '
    '; } if($tab['tab']=='tab2'){ // display the custom tab panel echo '
    '; woocommerce_wp_text_input( array( '_wc_custom_product_tabs_2_title', 'label' => __( 'Tab Title', self::TEXT_DOMAIN ), 'description' => __( 'Required for tab to be visible', self::TEXT_DOMAIN ), 'value' => $tab['title'] ) ); $this-> woocommerce_wp_textarea_input( array( '_wc_custom_product_tabs_2_content', 'label' => __( 'Content', self::TEXT_DOMAIN ), 'placeholder' => __( 'HTML and text to display.', self::TEXT_DOMAIN ), 'value' => $tab['content'], 'style' => 'width:70%;height:21.5em;' ) ); echo '
    '; } ... }

    Thêm custom tab vào single product tabs

    custom-tab-single-product-woo

    Để thêm tab mới vào bản kê tabs của sản phẩm kể cả Description, Reviews, Related, chúng ta khai báo thêm dữ liệu tabs vào filter woocommerce_product_tabs . Các Tabs nội dung của sản phẩm sẽ được hiển thị trong trang mặt hàng chi tiết bởi action hook woocommerce_after_single_product_summary . Mặc định có 2 hàm liên kết với hook này, một hàm giúp hiển thị product tabs và hàm thứ 2 hiển thị các mặt hàng liên quan. Lời gọi nội dung Tabs chứa trong file content-single-product.php

     ...    ...  

    Mỗi tab có cấu trúc như sau:

     $tabs[ $tab['title' =>  __( $tab['title'], self::TEXT_DOMAIN ), 'priority' =>  25, 'callback' =>  array( $this, 'custom_product_tabs_panel_content' ), 'content1' =>  $tab['content'], // custom field );  

    Trong đó:
    Tiêu đề tab lấy nội dung của thuộc tính “title”, cũng có thể có thể thêm tab vào cuối danh sách tabs hoặc xen giữa ở bất kỳ vị trí nào bởi tính chất 'priority'. Nội dung của tabs thực thi bởi hàm liên kết “callback”.

    Thêm đoạn code sau vào file functions.php hoặc tạo plugin mới như dưới đây.

     // frontend stuff add_filter( 'woocommerce_product_tabs', array($this,'add_custom_product_tabs' )) ; /** * Add the custom product tab * * $tabs structure: * Array( * id =>  Array( * 'title' =>  (string) Tab title, * 'priority' =>  (string) Tab priority, * 'callback' =>  (mixed) callback function, * ) * ) * * @since 1.2.0 * @param array $tabs array representing the product tabs * @return array representing the product tabs */ public function add_custom_product_tabs( $tabs ) { global $product; if ( $this-> product_has_custom_tabs( $product ) ) { foreach ( $this-> tab_data as $tab ) { $tabs[ $tab['title' =>  __( $tab['title'], self::TEXT_DOMAIN ), 'priority' =>  25, 'callback' =>  array( $this, 'custom_product_tabs_panel_content' ), 'content' =>  $tab['content'], // custom field ); } } return $tabs; }  

    Ngoài ra, có thể chứa thêm dữ liệu khác cho nội dung tab vào biến $tabs. Ví dụ trên, dữ liệu content sẽ được khai thác trong hàm custom_product_tabs_panel_content .

     /** * Render the custom product tab panel content for the given $tab * * $tab structure: * Array( * 'title' =>  (string) Tab title, * 'priority' =>  (string) Tab priority, * 'callback' =>  (mixed) callback function, * 'content' =>  (sring) tab content, * ) * * @param string $key tab key * @param array $tab tab data * * @param array $tab the tab */ public function custom_product_tabs_panel_content( $key, $tab ) { //// allow shortcodes to function $content = apply_filters( 'the_content', $tab['content'] ); $content = str_replace( ']]> ', ']]>', $content ); echo apply_filters( 'woocommerce_custom_product_tabs_lite_heading', ' 

    ' . $tab['title'] . '

    ', $tab ); echo apply_filters( 'woocommerce_custom_product_tabs_lite_content', $content, $tab ); }

    Ở đây mình tạo thêm filter woocommerce_custom_product_tabs_lite_content liên kết với hàm do_shortcode, cho phép thực thi shortcode trong nội dung tab. Học thêm cách sử lý shortcode trong nội dung chuỗi và widget text.
    Thêm dòng này nếu muốn sử dụng shortcode trong custom product tab ở trên.

     // allow the use of shortcodes within the tab content add_filter( 'woocommerce_custom_product_tabs_lite_content', 'do_shortcode' );  

    Plugin tạo WooCommerce Tabs

    Nếu không rành về code, bạn cũng có thể tạo custom tab đơn giản với plugin WooCommerce Custom Product Tabs Lite.

    Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dấu kênh chia sẻ kiến thức WordPress của TopVn trên Twitter và Facebook

    Bài viết Tạo thêm custom fields cho 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