[WordPress] Thêm Tab vào Product Meta (Dữ Liệu Sản Phẩm)

Thêm Tab vào Product Meta (Dữ Liệu Sản Phẩm) trong WooCommerce là hướng dẫn thêm custom tab và custom field vào trong dữ liệu sản phẩm nhanh chóng mà không cần plugin

Thông thường trong Product meta sẽ có các tabs: General, Shipping, Attribute,... giờ chúng ta sẽ thêm một tab là Custom Tab như hình này

Image

Thêm Custom Tab vào trong Product Meta

add_filter( 'woocommerce_product_data_tabs', 'devpd_product_settings_tabs' );
function devpd_product_settings_tabs( $tabs ){

	$tabs[ 'customtab' ] = array(
		'label'    => 'Custom Tab',
		'target'   => 'devpd_customtab_product_data',
		'class'    => array( 'show_if_simple' ),
		'priority' => 21,
	);
	return $tabs;

}

Ở đây bạn sẽ có show_if_simple là class cho bạn ẩn hiện tab với điều kiện là product loại simple, tương tự có các class khác show_if_grouped, show_if_external, show_if_variable, show_if_virtual, show_if_downloadable

Ngoài ra ở đây còn priority là tham số cho phép custom tab sẽ xuất hiện ở vị trí nào trong danh sách tab hiện tại.

Thêm custom field vào trong Custom Tab

add_action( 'woocommerce_product_data_panels', 'devpd_product_panels' );
function devpd_product_panels(){

	echo '<div id="devpd_customtab_product_data" class="panel woocommerce_options_panel hidden">';

	woocommerce_wp_text_input(
		array(
			'id'          => 'ten_nv_ho_tro',
			'value'       => get_post_meta( get_the_ID(), 'ten_nv_ho_tro', true ),
			'label'       => 'Tên nhân viên hỗ trợ',
			'description' => 'Tên nhân viên hỗ trợ tư vấn sau mua'
		)
	);

	woocommerce_wp_select(
		array(
			'id'            => 'tinh_trang_ho_tro',
			'value'         => get_post_meta( get_the_ID(), 'tinh_trang_ho_tro', true ),
			'label'         => 'Tình trạng hỗ trợ',
			'options'       => array(
				'' => 'Vui lòng chọn',
				'dang_hoat_dong' => 'Đang Hoạt Động',
				'tam_dung_hoat_dong' => 'Tạm Dừng Hoạt Động'
			),
		)
	);

	echo '</div>';

}

Lưu data vào trong meta

add_action( 'woocommerce_process_product_meta', 'devpd_save_fields' );
function devpd_save_fields( $id ){

	update_post_meta( $id, 'ten_nv_ho_tro', sanitize_text_field( $_POST[ 'ten_nv_ho_tro' ] ) );

	$tinh_trang_ho_tro = isset( $_POST[ 'tinh_trang_ho_tro' ] ) && in_array( $_POST[ 'tinh_trang_ho_tro' ], array( 'dang_hoat_dong', 'tam_dung_hoat_dong' ) ) ? $_POST[ 'tinh_trang_ho_tro' ] : '';
	update_post_meta( $id, 'tinh_trang_ho_tro', $tinh_trang_ho_tro );

}

Xong, đến đây bạn đã có custom tab và một vài field trong đó 

Thêm Icon cho Custom Tab

Để thêm icon vào tab, bạn thêm vào style css với snippet code 

add_action('admin_head', 'devpd_custom_css');

function devpd_custom_css() {
  echo '<style>
    #woocommerce-product-data ul.wc-tabs li.customtab_options a::before, .woocommerce ul.wc-tabs li.customtab_options a::before {
        content: "\f208";
    }
  </style>';
}

Có thể tham khảo các icon khác ở đây