Xin Chào, hôm nay mình sẽ hướng cách bạn có thể tùy chỉnh WooCommerce một cách năng động và đặc biệt là làm thế nào để thêm các trường tùy chỉnh vào bất kỳ sản phẩm WooCommerce nào. Nếu bạn muốn hạn chế dùng plugin thì đây là lựa chọn tuyệt với.
Đây là demo ví dụ. Nào cùng bắt đầu nào.
Để thực hiện ta cần biết đến 2 hàm này của woocommerce. woocommerce_product_options_general_product_data(hiển thị trường nhập dữ liệu trong admin) và woocommerce_process_product_meta(lưu thông tin nhập vào).
// 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 dữ liệu mới. Như ở trên mình có dùng hook để móc thằng woo_add_custom_general_fields vào woocommerce_product_options_general_product_data và woo_add_custom_general_fields_save vào woocommerce_process_product_meta.
Ta vào file functions.php của theme vào thêm function này vào:
function woo_add_custom_general_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
// thuộc tính trường cần thêm vào
echo '</div>';
}
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );- woocommerce_wp_text_input()
- woocommerce_wp_textarea_input()
- woocommerce_wp_select()
- woocommerce_wp_checkbox()
- woocommerce_wp_hidden_input()
Danh Mục
Các trường thuộc tính cơ bản:
- Text_input:
woocommerce_wp_text_input ( mảng( 'id' => '_text_field', 'label' => __ ('tên trường', 'woocommerce'), 'placeholder' => 'http: //', 'desc_tip' => 'true', 'description' => __ ('Nhập giá trị tùy chỉnh ở đây', 'woocommerce') ) ); - Input_Textarea:
// Textarea woocommerce_wp_textarea_input( array( 'id' => '_textarea', 'label' => __( 'My Textarea', 'woocommerce' ), 'placeholder' => '', 'description' => __( 'Enter the custom value here.', 'woocommerce' ) ) );
- Number Field Type:
// Number Field woocommerce_wp_text_input( array( 'id' => '_number_field', 'label' => __( 'My Number Field', 'woocommerce' ), 'placeholder' => '', 'description' => __( 'Enter the custom value here.', 'woocommerce' ), 'type' => 'number', 'custom_attributes' => array( 'step' => 'any', 'min' => '0' ) ) );
- Dropdown Select Field Type:
// Select woocommerce_wp_select( array( 'id' => '_select', 'label' => __( 'My Select Field', 'woocommerce' ), 'options' => array( 'one' => __( 'Option 1', 'woocommerce' ), 'two' => __( 'Option 2', 'woocommerce' ), 'three' => __( 'Option 3', 'woocommerce' ) ) ) );
- Checkbox Field Type:
// Checkbox woocommerce_wp_checkbox( array( 'id' => '_checkbox', 'wrapper_class' => 'show_if_simple', 'label' => __('My Checkbox Field', 'woocommerce' ), 'description' => __( 'Check me!', 'woocommerce' ) ) ); - Hidden Field Type:
// Hidden field woocommerce_wp_hidden_input( array( 'id' => '_hidden_field', 'value' => 'hidden_value' ) );
- Products Select Field Type:
// Product Select ?> <p class="form-field product_field_type"> <label for="product_field_type"><?php _e( 'Product Select', 'woocommerce' ); ?></label> <select id="product_field_type" name="product_field_type[]" class="ajax_chosen_select_products" multiple="multiple" data-placeholder="<?php _e( 'Search for a product…', 'woocommerce' ); ?>"> <?php $product_field_type_ids = get_post_meta( $post->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 '<option value="' . esc_attr( $product_id ) . '" selected="selected">' . esc_html( $product_name ) . '</option>'; } } ?> </select> <img class="help_tip" data-tip='<?php _e( 'Your description here', 'woocommerce' ) ?>' src="<?php echo $woocommerce->plugin_url(); ?>/assets/images/help.png" height="16" width="16" /> </p> <?php - Custom Field Type:
// Custom field Type ?> <p class="form-field custom_field_type"> <label for="custom_field_type"><?php echo __( 'Custom Field Type', 'woocommerce' ); ?></label> <span class="wrap"> <?php $custom_field_type = get_post_meta( $post->ID, '_custom_field_type', true ); ?> <input placeholder="<?php _e( 'Field One', 'woocommerce' ); ?>" class="" type="number" name="_field_one" value="<?php echo $custom_field_type[0]; ?>" step="any" min="0" style="width: 80px;" /> <input placeholder="<?php _e( 'Field Two', 'woocommerce' ); ?>" type="number" name="_field_two" value="<?php echo $custom_field_type[1]; ?>" step="any" min="0" style="width: 80px;" /> </span> <span class="description"><?php _e( 'Place your own description here!', 'woocommerce' ); ?></span> </p> <?php
Lưu giá trị đã nhập vào:
function woo_add_custom_general_fields_save( $post_id ){
// Text Field
$woocommerce_text_field = $_POST['_text_field'];
if( !empty( $woocommerce_text_field ) )
update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );
// Number Field
$woocommerce_number_field = $_POST['_number_field'];
if( !empty( $woocommerce_number_field ) )
update_post_meta( $post_id, '_number_field', esc_attr( $woocommerce_number_field ) );
// Textarea
$woocommerce_textarea = $_POST['_textarea'];
if( !empty( $woocommerce_textarea ) )
update_post_meta( $post_id, '_textarea', esc_html( $woocommerce_textarea ) );
// Select
$woocommerce_select = $_POST['_select'];
if( !empty( $woocommerce_select ) )
update_post_meta( $post_id, '_select', esc_attr( $woocommerce_select ) );
// Checkbox
$woocommerce_checkbox = isset( $_POST['_checkbox'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_checkbox', $woocommerce_checkbox );
// Custom Field
$custom_field_type = array( esc_attr( $_POST['_field_one'] ), esc_attr( $_POST['_field_two'] ) );
update_post_meta( $post_id, '_custom_field_type', $custom_field_type );
// Hidden Field
$woocommerce_hidden_field = $_POST['_hidden_field'];
if( !empty( $woocommerce_hidden_field ) )
update_post_meta( $post_id, '_hidden_field', esc_attr( $woocommerce_hidden_field ) );
// Product Field Type
$product_field_type = $_POST['product_field_type'];
update_post_meta( $post_id, '_product_field_type_ids', $product_field_type );
}
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
và đây là kết quả đạt được: 
Truy xuất giá trị trường
Bây giờ chúng ta đã tạo thành công các trường của chúng tôi và lưu các giá trị của chúng, tôi đoán bạn muốn hiển thị các giá trị ra ngoài font-end. Trong trường hợp này, phương pháp tốt nhất là làm việc với các mẫu tùy chỉnh WooCommerce. Về cơ bản một mẫu tùy chỉnh cho phép bạn ghi đè lên các tệp tin mặc định WooCommerce và sử dụng các tệp tùy chỉnh của riêng bạn. Dưới đây là một hướng dẫn nhanh sẽ giải thích cách tạo các mẫu tùy chỉnh của bạn: http://docs.woothemes.com/document/template-structure/
Để có được những giá trị chúng ta chỉ cần sử dụng hàm get_post_meta () phổ biến . Đó là khá nhiều thứ bạn cần.
ví du:
<? php // Hiển thị giá trị trường tùy chỉnh echo get_post_meta ( $ post -> ID , ' my-field-slug ' , đúng ); // Bạn cũng có thể sử dụng echo get_post_meta (get_the_ID (), ' my-field-slug ' , đúng ); ? >
Tạo các tab tùy chỉnh
Cuối cùng, đây là một đoạn mã nhanh để tạo tab sản phẩm tùy chỉnh:
add_action( 'woocommerce_product_write_panel_tabs', 'woo_add_custom_admin_product_tab' );
function woo_add_custom_admin_product_tab() {
?>
<li class="custom_tab"><a href="#custom_tab_data"><?php _e('My Custom Tab', 'woocommerce'); ?></a></li>
<?php
}để cho hiển thị được đẹp nhật bạn nên sự dụng một tý css vào nhé :)).
