Hướng dẫn chỉnh sửa các tab trong woocommerce

Chắc bạn làm về woocommerce cũng không ít lần gặp phải việc khách hàng có những yêu cầu mà bạn chưa từng làm và cần phải tìm hiểu thêm. Hôm nay mình đang có khách hàng cần làm  về chỉnh sửa tab trong woocommerce nên mình viết luôn 1 bài hướng dẫn cho những bạn chưa biết.

Những đoạn code dưới đây bạn cần cho nó vào file function của themes mà không cần trực tiếp chỉnh sửa code trong plugin. Bạn nên đưa code vào child themes tránh việc sau này khi cập nhật những code này sẽ không có sau 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.