Thêm trường dữ liệu mới vào Woocommerce không cần dùng plugin

102
0

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)  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' );
Để tạo các trường chúng ta sẽ chủ yếu sử dụng chức năng tích hợp WooCommerce như (Tất cả các chức năng này được đặt trong WooCommerce / Admin / WritePanels / writepanels-init.php.):

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&hellip;', '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é :)).

 

Đối nét về Thắng Nguyễn

Xin Chào, Mình là Nguyễn Việt Thắng người sáng lập và quản lý trang https://iamgvt.com
Mình sinh năm 1994, Đam mê thích học hỏi khám phá và chia sẻ những thứ mình học được. Tham gia vào MMO cũng được gần 1 năm.

| Website | Facebook | Twitter

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Viết một bình luận