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.