Code thêm tabs và nội dung tabs trong trang sản phẩm

Tabs trong mô tả sản phẩm thường dùng để chỉ các tab hoặc các nút chuyển đổi giữa các phần thông tin khác nhau của sản phẩm trong một trang web. Mỗi tab sẽ chứa thông tin khác nhau như chi tiết sản phẩm, thông tin về giao hàng, đánh giá của khách hàng, hướng dẫn sử dụng, v.v. Điều này giúp người dùng dễ dàng tìm và đọc thông tin mà họ quan tâm mà không cần phải scroll qua một trang dài.

Code thêm tabs và nội dung tabs trong trang sản phẩm

Theo mặc định, WooCommerce chỉ hỗ trợ những tab cơ bản như mô tả, thông tin thêm, đánh giá.

Vậy nếu bạn có nhu cầu muốn tạo thêm một tab mới thì phải làm như thế nào? Trong bài viết này mình sẽ hướng dẫn bạn làm điều đó.

Tạo tab mới cho trang sản phẩm

Bạn hãy thêm đoạn code dưới đây vào file functions.php của theme hoặc child theme nhé.

add_filter( 'woocommerce_product_tabs', 'flatsome_custom_tab' );
function flatsome_custom_tab( $tabs ) {

$tabs['fl_custom_tab'] = array(
'title' => 'Học WordPress',
'callback' => 'fl_custom_tab_content',
'priority' => 50,
);

return $tabs;
}

function fl_custom_tab_content() {
echo 'Bạn có thể hiển thị thông tin ở đây';
}

Với title là tiêu đề của tabs. Và nội dung của tab sẽ được tuỳ chỉnh ở function fl_custom_tab_content.

Giá trị priority là độ ưu tiên, nếu bạn muốn tab mới này được hiển thị ở đầu tiên, hãy thay đổi 50 thành 5 nhé.

Đây là kết quả mà bạn sẽ đạt được:

Code Thêm nhiều tabs trong mô tả sản phẩm và remove tab Rivews 

Để thêm nhiều tabs vô trong mô tả sản phẩm để có thể có nhiều lựa chọn tùy biến cho trang, ví dụ như hình bên dưới

Để thêm 3 tabs như trên ta cần lấy code bên dưới bỏ vô file Function.php của theme đang dùng nhé

// Thêm 3 tabs và Remove tab Reviews
add_filter( 'woocommerce_product_tabs', 'woo_add_custom_tabs' );
function woo_add_custom_tabs( $tabs ) {

// Xóa tab Đánh giá
unset( $tabs['reviews'] );

// Thêm tab Hướng dẫn sử dụng
$tabs['tab_details'] = array(
'title' => __( 'Hướng dẫn sử dụng', 'text-domain' ),
'priority' => 50,
'callback' => 'woo_custom_tab_details_content'
);

// Thêm tab cam kết từ chúng tôi
$tabs['tab_usage'] = array(
'title' => __( 'Cam kết của chúng tôi', 'text-domain' ),
'priority' => 60,
'callback' => 'woo_custom_tab_usage_content'
);

// Thêm tab Bảo hành - Đổi trả
$tabs['tab_video'] = array(
'title' => __( 'Bảo hành - Đổi trả', 'text-domain' ),
'priority' => 70,
'callback' => 'woo_custom_tab_video_content'
);

return $tabs;
}

// Hàm callback cho tab Hướng dẫn sử dụng
function woo_custom_tab_details_content() {
// Nội dung bạn muốn hiển thị trong tab này
echo '<h2>Hướng dẫn sử dụng</h2>';
echo '<p>';
echo do_shortcode('[block id="cach-su-dung-va-bao-quan"]'); 
echo '</p>';
}

// Hàm callback cho tab cam kết từ chúng tôi
function woo_custom_tab_usage_content() {
// Nội dung bạn muốn hiển thị trong tab này
echo '<h2>cam kết từ chúng tôi</h2>';
echo '<p>';
echo do_shortcode('[block id="cam-ket"]'); 
echo '</p>';
}

// Hàm callback cho tab Bảo hành - Đổi trả
function woo_custom_tab_video_content() {
// Nội dung bạn muốn hiển thị trong tab này
echo '<h2>Bảo hành - Đổi trả </h2>';
echo '<p>';
echo do_shortcode('[block id="doi-tra"]'); 
echo '</p>';
}

Anh em để ý code trên có 2 phần , 1 thêm tabs  $tabs [‘tab_details’] và add thông tin tabs qua ‘callback’ => ‘woo_custom_tab_details_content’

và 1 lưu ý cho anh nữa là để xóa 1 tabs đi ta dùng unset ($tabs[‘reviews’] );  <= mình đang Remove tab Reviews nhé

Thêm tabs Sản phẩm bằng Plugin 

Ngoài việc thêm bằng code trên anh em cũng có thể tham khảo thêm tabs cho sản phẩm bằng cách dùng Plugin, bạn cần phải cài đặt và kích hoạt plugin Custom Product Tabs for WooCommerce.

Với plugin trên ta có thể Truy cập vào Settings => Custom Product Tabs for WooCommerce => Click vào nút Add Tab để tạo tab mới, trong trường hợp bạn muốn tab này hiển thị trên nhiều sản phẩm.