Hướng Dẫn Tùy Biến Tab WooCommerce Bằng Code Toàn Tập (Không Cần Plugin)

Chắc bạn làm về WooCommerce cũng không ít lần gặp phải yêu cầu khách hàng cần can thiệp sâu vào giao diện sản phẩm. Trong quá trình phát triển dự án hôm nay, mình có khách hàng yêu cầu xử lý hiển thị tab nên viết luôn bài hướng dẫn tùy biến tab WooCommerce cho những ai chưa biết. Các đoạn code dưới đây bạn chỉ cần thêm vào file functions.php của child theme, hoàn toàn không cần can thiệp code lõi của plugin hay sợ mất dữ liệu khi cập nhật.

Hướng dẫn xóa tab trong woocommerce

Sử dụng code dưới đây để xóa một tab nào đó bạn mong muốn.

/**
 * Remove product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );      	// Xóa tab mô tả
    unset( $tabs['reviews'] ); 			// Xóa tab review
    unset( $tabs['additional_information'] );  	// Xóa tab additional information

    return $tabs;
}

Hãy chọn tab woocommerce mà bạn không muốn hiển thị để xóa chúng. Chúc các bạn thành công

Hướng dẫn đổi tên tab woocommerce

Dùng code dưới đây để thay đổi tên tab woocommerce mà bạn muốn.

/**
 * Rename product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {

	$tabs['description']['title'] = __( 'More Information' );		// Thay đổi tên tab description
	$tabs['reviews']['title'] = __( 'Ratings' );				// Thay đổi tên tab reviews
	$tabs['additional_information']['title'] = __( 'Product Data' );	// Thay đổi tên tab additional information
	return $tabs;

}

Chọn tab woocommerce mà bạn muốn đổi tên để thay đổi.

Hướng dẫn thay đổi vị trí của các tab trong woocommerce

Sử dụng code dưới đây để thay đổi vị trí các tab trong woocommerce

/**
 * Reorder product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {

	$tabs['reviews']['priority'] = 5;			// Reviews first
	$tabs['description']['priority'] = 10;			// Description second
	$tabs['additional_information']['priority'] = 15;	// Additional information third

	return $tabs;
}

Hướng dẫn tùy chỉnh nội dung hiển thị của từng tab trong woocommerce

Dưới đây mình sẽ tùy chỉnh nội dung hiển thị của tab Description thành nội dung mình mong muốn.

/**
 * Customize product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {

	$tabs['description']['callback'] = 'woo_custom_description_tab_content';	// Custom description callback

	return $tabs;
}

function woo_custom_description_tab_content() {
	echo '<h2>Custom Description</h2>';
	echo '<p>Here\'s a custom description</p>';
}

Nội dung hiển thị tùy chỉnh mình viết trong hàm woo_custom_description_tab_content(). Nội dung này sẽ hiện ở tab Description.

Các tab $tabs[‘reviews’] và $tabs[‘additional_information’] bạn làm tương tự.

Hướng dẫn thêm 1 tab tùy chỉnh trong woocommerce

Đây cũng là phần không thể thiếu trong woocommerce. Bạn cho code dưới đây vào file function để thêm một tab tùy chỉnh

/**
 * Add a custom product data tab
 */
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
	
	// Adds the new tab
	
	$tabs['test_tab'] = array(
		'title' 	=> __( 'New Product Tab', 'woocommerce' ),
		'priority' 	=> 50,
		'callback' 	=> 'woo_new_product_tab_content'
	);

	return $tabs;

}
function woo_new_product_tab_content() {

	// The new tab content

	echo '<h2>New Product Tab</h2>';
	echo '<p>Here\'s your new product tab.</p>';
	
}

Dưới đây là tất tần tật về chỉnh sửa tab trong woocommerce. Các bạn có gì thắc mắc hãy để lại comment mình sẽ reply khi nhận được comment. Chúc các bạn thành công.