Hướng dẫn ẨN Additional information và tùy biến TẤT TẦN TẬT về TAB trên sản phẩm Woocommerce

Bài viết này giới thiệu với bạn cách tùy biến tất tần tật về tab trên single product trong Woocommerce. Mời bạn tham khảo.

Ẩn tab – Remove tabs

Để ẨN Thông tin bổ sung Additional information và các tab khác trên sản phẩm Woocommerce, bạn có thể dùng CSS display:none hoặc PHP. Trong bài viết này, mình sẽ hướng dẫn các bạn dùng code PHP.

Để chèn code PHP, bạn nên sử dụng plugin Code Snippets hoặc chèn code PHP và childtheme. Lưu ý không chèn trực tiếp vào file hệ thống.

Bạn sử dụng đoạn code sau đây để ẨN các tab không cần thiết:

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

function woo_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );      	// Remove the description tab, ẩn Mô tả chi tiết
    unset( $tabs['reviews'] ); 			// Remove the reviews tab, ẩn Đánh giá
    unset( $tabs['additional_information'] );  	// Remove the additional information tab, ẩn Thông tin bổ sung

    return $tabs;
}

Muốn ẩn tab nào thì để lại dòng unset đó. Như code ở trên, mình đã ẩn cả 3 tab.

Đổi tên các tab – Renaming Tabs

Để đổi tên tiêu đề các tab trong single product Woocommerce, bạn dùng code:

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

	$tabs['description']['title'] = __( 'More Information' );		// Rename the description tab
	$tabs['reviews']['title'] = __( 'Ratings' );				// Rename the reviews tab
	$tabs['additional_information']['title'] = __( 'Product Data' );	// Rename the additional information tab

	return $tabs;

}

Thay đổi thứ tự các tab – Re-ordering Tabs

Để thay đổi thứ tự các tab trong single product Woocommerce, bạn dùng code:

/**
 * 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;
}

Các tab có số priority nhỏ thì sẽ hiển thị trước.

Tùy biến chức năng 1 tab – Customize a tab

Bạn có thể thay thế chức năng của 1 tab có sẵn thành 1 chức năng khác bằng đoạn code sau:

/**
 * 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>';//đoạn code tùy biến
}

Lưu ý khi tùy biến ADDITIONAL INFORMATION TAB

Xin lưu ý rằng tab “Thông tin bổ sung” sẽ chỉ hiển thị nếu sản phẩm có trọng lượng, kích thước hoặc thuộc tính (với “Hiển thị trên trang sản phẩm” được chọn).

Nếu bạn cố gắng áp dụng thay đổi cho tab đó và nếu sản phẩm không có trọng lượng, kích thước hoặc thuộc tính, bạn sẽ nhận được thông báo lỗi tương tự như:

Warning: call_user_func() expects parameter 1 to be a valid callback, no array or string given in /mysite/wp-content/plugins/woocommerce/templates/single-product/tabs/tabs.php on line 35

Trong trường hợp đó, bạn phải sử dụng các thẻ điều kiện WooCommerce:

has_attributes ()

has_dimensions ()

has_weight ()

Tức là, bổ sung thêm đoạn code này:

/**
 * Check if product has attributes, dimensions or weight to override the call_user_func() expects parameter 1 to be a valid callback error when changing the additional tab
 */
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );

function woo_rename_tabs( $tabs ) {

	global $product;
	
	if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) { // Check if product has attributes, dimensions or weight
		$tabs['additional_information']['title'] = __( 'Product Data' );	// Rename the additional information tab
	}
 
	return $tabs;
 
} 

Thêm 1 tab mới – Add a new tab

Bạn muốn thêm 1 tab mới trên single product Woocommerce, sử dụng đoạn code này:

/**
 * 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>';//code tùy biến
	
}