WooCommerce: Cách chỉnh sửa tab trong trang chi tiết sản phẩm

Đôi khi các tab trong trang chi tiết sản phẩm chưa làm bạn hài lòng và bạn muốn chỉnh sửa, xóa bỏ, thêm mới tab đó mà không biết làm thế nào. Bài viết này sẽ giúp bạn làm những điều đó chỉ bằng với những đoạn code đơn giản.

WooCommerce: Cách chỉnh sửa tab trong trang chi tiết sản phẩm
WooCommerce: Cách chỉnh sửa tab trong trang chi tiết sản phẩm

Xóa tab

Sử dụng đoạn mã sau để xóa các tab cụ thể.

/**
 * 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
    unset( $tabs['reviews'] ); 			// Remove the reviews tab
    unset( $tabs['additional_information'] );  	// Remove the additional information tab

    return $tabs;
}

Đổi tên tab

Sử dụng đoạn mã sau để đổi tên các tab.

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

}

Sắp xếp lại các tab

Sử dụng đoạn mã sau để thay đổi thứ tự tab.

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

Tùy chỉnh một tab

Đoạn mã sau sẽ thay thế tab mô tả bằng chức năng tùy chỉnh.

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

Thêm một tab mới

Sử dụng đoạn mã sau để thêm tab mới.

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

Nguồn: https://docs.woocommerce.com/document/editing-product-data-tabs/

Làm sao để thêm đoạn mã này?

Bạn có thể đặt các đoạn mã PHP ở cuối tệp tin functions.php trong chủ đề con hoặc chủ đề bạn đang sử dụng (trước “?>” Nếu bạn có nó). Hãy chắc chắn rằng bạn biết những gì bạn đang làm khi chỉnh sửa các tệp tin quan trọng như vậy – nếu bạn cần thêm hướng dẫn, vui lòng xem bài viết Cách thêm đoạn mã tùy biến vào WooCommerce.

BẢO MẬT WORDPRESS

Bình luận

4 bình luận về "WooCommerce: Cách chỉnh sửa tab trong trang chi tiết sản phẩm"

avatar
Mới nhất Cũ nhất
Lê Văn Ca<span class="bl-woovn">1 bình luận</span>
Lê Văn Ca1 bình luận

Dạ em chào anh, em Ca đây ạ!

Phong Thần Thánh<span class="bl-woovn">1 bình luận</span>
Phong Thần Thánh1 bình luận

Ví dụ muốn tạo 1 tab để thông tin vận chuyển bên cạnh mô tả. Thì cái phần text này chèn vào đâu bác?