Thêm các trường tùy chỉnh cho biến thể sản phẩm trong Woocommerce

Cập nhật lần cuối: 12 Tháng Tám 2018

WordPress

1,777 Lượt xem

Woocommerce là một plugin mạnh mẽ để tạo một website bán hàng trên WordPress, thế nhưng có hàng trăm triệu mặt hàng khác nhau, yêu cầu có những cấu trúc khác nhau. WordPress là một CMS linh động có thể tạo ra các tùy biến linh hoạt, nhờ vậy nên phần lớn WordPress đều có thể làm được. Trong bài viết này mình sẽ chia sẻ với bạn cách để tạo ra thêm một số trường tùy biến nằm trong biến thể của sản phẩm trong Woocommerce.

1. Tạo các trường nhập liệu

Để thêm các trường vào biến thể của WooCommerce, mình sử dụng hook acction “woocommerce_variation_options_pricing“. Hook này có hàm để móc vào với cấu trúc như sau:

function tdc_ten_ham( $loop, $variation_data, $variation ) {
          //code
}

Trong đó:

$loop: là một số nguyên, nó là số định danh cho mỗi biến thể trong sản phẩm. Ví dụ: bạn có 2 biến thể trong sản phẩm thì biến thể đầu có số loop là 0, và biến thể 2 là 1.
$variation_data: là một mảng chứa toàn bộ dữ liệu về biến thể này, bạn có thể sử dụng để hiển thị dữ liệu lên các trường nếu cần thiết.
$variation: cũng là một mảng chứa dữ liệu về biến thể, nhưng nó bao gồm các thông tin tổng thể như ID, ngày đăng, tiêu đề, trạng thái,… của biến thể đó.

Tiếp theo là tạo các trường nhập liệu trong hàm này. WooCommerce có nhiều hàm hiển thị control nhập liệu như:

woocommerce_wp_text_input: hiển thị trường nhập chữ số, ký tự.

Ví dụ:

Hiển thị ô nhập chữ

woocommerce_wp_text_input( 
 array( 
     'id' => '_text_field['.$loop.']', 
     'label' => __( 'Ô nhập chữ', 'woocommerce' ), 
     'placeholder' => 'Placeholder của chữ',
     'desc_tip' => 'true',
     'description' => __( 'Nhập vài chữ vào đây.', 'woocommerce' ),
     'value' => get_post_meta( $variation->ID, '_text_field', true )
     )
 );

Hiển thị ô nhập số

woocommerce_wp_text_input( 
 array( 
      'id' => '_number_field['.$loop.']', 
      'label' => __( 'Ô nhập số', 'woocommerce' ), 
      'desc_tip' => 'true',
      'description' => __( 'Nhập số vào đây.', 'woocommerce' ),
      'value' => get_post_meta( $variation->ID, '_number_field', true ),
      'custom_attributes' => array(
         'step' => 'any',
         'min' => '0'
         ) 
      )
);

woocommerce_wp_textarea_input: hiển thị ô textarea.

Ví dụ:

woocommerce_wp_textarea_input( 
  array( 
      'id' => '_textarea['.$loop.']', 
      'label' => __( 'Nhập mô tả', 'woocommerce' ), 
      'placeholder' => '', 
      'description' => __( 'Mô tả ngắn.', 'woocommerce' ),
      'value' => get_post_meta( $variation->ID, '_textarea', true ),
      )
);

woocommerce_wp_select: hiển thị danh sách lựa chọn.

Ví dụ:

woocommerce_wp_select( 
  array( 
      'id' => '_select['.$loop.']', 
      'label' => __( 'Lựa chọn', 'woocommerce' ), 
      'description' => __( 'Hãy chọn một giá trị.', 'woocommerce' ),
      'value' => get_post_meta( $variation->ID, '_select', true ),
      'options' => array(
      'value1' => __( 'Giá trị 1', 'woocommerce' ),
      'value2' => __( 'Giá trị 2', 'woocommerce' ),
      'value3' => __( 'Giá trị 3', 'woocommerce' )
     )
  )
);

woocommerce_wp_checkbox: hiển thị ô tích chọn.

Ví dụ:

woocommerce_wp_checkbox( 
  array( 
      'id' => '_checkbox['.$loop.']', 
      'label' => __('Check vào ô', 'woocommerce' ), 
      'description' => __( 'Check vào đây!', 'woocommerce' ),
      'value' => get_post_meta( $variation->ID, '_checkbox', true ), 
  )
);

woocommerce_wp_hidden_input: tạo ra một trường ẩn.

Ví dụ:

woocommerce_wp_hidden_input(
  array( 
      'id' => '_hidden_field['.$loop.']', 
      'value' => 'hidden_value'
  )
);

Dưới đây là code mẫu để bạn hiển thị các control trong biến thể Woocommerce.

	add_action( 'woocommerce_variation_options_pricing', 'tdc_add_custom_field_to_variations', 10, 4 );
	function tdc_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
	 	echo '<div class="form-row-full form-row">';
			woocommerce_wp_text_input(
				array(
					'id'          => '_text_field['.$loop.']',
					'label'       => __( 'Ghi chú', 'woocommerce' ),
					'placeholder' => 'Nhập ghi chú vào đây!',
					'desc_tip'    => 'true',
					'description' => __( 'Ghi chú giúp hiển thị thông báo khi người dùng chọn biến thể.', 'woocommerce' ),
					'value'       => get_post_meta( $variation->ID, '_text_field', true )
				)
			);
		echo '</div>';
	}

Bạn chỉ cần thay hàm woocommerce_wp_text_input để tạo ra các control khác nhau là được.

2. Lưu giá trị được nhập

Có hai dạng lưu đối với biến thể, đó là lưu vào biến thể và lưu vào dữ liệu biến thể, cụ thể như sau:

Lưu giá trị vào biến thể.

Code như sau:

add_action( 'woocommerce_save_product_variation', 'tdc_save_custom_field_variations', 10, 2 );
function tdc_save_custom_field_variations( $variation_id, $i ) {
   $custom_field = $_POST['_text_field'][$i];
   if ( ! empty( $custom_field ) ) {
      update_post_meta( $variation_id, '_text_field', esc_attr( $custom_field ) );
   } else delete_post_meta( $variation_id, '_text_field' );
}

Lưu giá trị vào dữ liệu biến thể.

Code như sau:

add_filter( 'woocommerce_available_variation', 'tdc_add_custom_field_variation_data' );

function tdc_add_custom_field_variation_data( $variations ) {
   $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
   return $variations;
}

Như vậy là đã hoàn thành rồi, chúc bạn thành công !