Hướng dẫn thêm tab cho sản phẩm WooCommerce

Tại sao cần thêm tab cho trang sản phẩm WooCommerce?

Mặc định, trang sản phẩm WooCommerce hiển thị 3 tab cơ bản: Description (mô tả sản phẩm), Additional Information (thông tin bổ sung) và Reviews (đánh giá). Với nhiều shop online, chừng đó là chưa đủ. Bạn có thể cần thêm tab riêng để trình bày chính sách bảo hành, hướng dẫn sử dụng, thông số kỹ thuật chi tiết, chính sách đổi trả hay chương trình khuyến mãi.

Thay vì nhồi nhét tất cả vào phần mô tả, việc tổ chức nội dung theo từng tab giúp trang sản phẩm trở nên gọn gàng, chuyên nghiệp và thân thiện với người mua hơn.

Cách thêm tab WooCommerce bằng plugin (không cần code)

Cách đơn giản và phổ biến nhất là dùng plugin Custom Product Tabs for WooCommerce. Đây là plugin miễn phí, nhẹ, tương thích tốt với hầu hết các theme và phiên bản WooCommerce hiện tại.

Bước 1: Cài đặt plugin Custom Product Tabs for WooCommerce

Vào Dashboard > Plugins > Add New, tìm kiếm từ khóa “Custom Product Tabs for WooCommerce”, sau đó nhấn Install Now và Activate để kích hoạt.

Bước 2: Tạo tab dùng chung cho nhiều sản phẩm (tùy chọn)

Nếu bạn muốn một tab xuất hiện trên nhiều sản phẩm cùng lúc (ví dụ: tab “Chính sách bảo hành”), hãy thực hiện theo các bước sau:

• Vào Settings > Custom Product Tabs for WooCommerce

• Nhấn Add Tab để tạo tab mới
• Nhập tiêu đề và nội dung cho tab
• Nhấn Save Tab để lưu

Tab được tạo ở đây sẽ có thể tái sử dụng, gán nhanh vào từng sản phẩm mà không cần nhập lại nội dung.

Bước 3: Thêm tab vào từng sản phẩm cụ thể

Mở sản phẩm cần chỉnh sửa, cuộn xuống phần Product Data, chọn tab Custom Tabs trong menu bên trái. Tại đây bạn có hai lựa chọn:

• Add a Tab: Tạo tab mới chỉ dành riêng cho sản phẩm này
• Add a Saved Tab: Chèn nhanh tab đã tạo sẵn ở bước 2

Sau khi điền tiêu đề và nội dung, nhấn Save Tabs rồi cập nhật sản phẩm. Tab mới sẽ hiển thị ngay trên trang sản phẩm ngoài frontend.

Cách thêm tab WooCommerce bằng code (dành cho developer)

Nếu bạn muốn kiểm soát hoàn toàn mà không cài thêm plugin, WooCommerce cung cấp filter hook woocommerce_product_tabs để thêm, sửa hoặc xóa tab trực tiếp trong file functions.php của theme con.

Thêm tab tùy chỉnh mới

add_filter( 'woocommerce_product_tabs', 'them_tab_bao_hanh' );
function them_tab_bao_hanh( $tabs ) {
    $tabs['bao_hanh'] = array(
        'title'    => __( 'Chính sách bảo hành', 'woocommerce' ),
        'priority' => 50,
        'callback' => 'noi_dung_tab_bao_hanh',
    );
    return $tabs;
}
 
function noi_dung_tab_bao_hanh() {
    echo '<h2>Chính sách bảo hành</h2>';
    echo '<p>Sản phẩm được bảo hành 12 tháng kể từ ngày mua. Vui lòng liên hệ để được hỗ trợ.</p>';
}

Đổi tên tab mặc định của WooCommerce

add_filter( 'woocommerce_product_tabs', 'doi_ten_tab_mac_dinh', 98 );
function doi_ten_tab_mac_dinh( $tabs ) {
    $tabs['description']['title'] = __( 'Mô tả sản phẩm', 'woocommerce' );
    $tabs['reviews']['title']     = __( 'Nhận xét khách hàng', 'woocommerce' );
    return $tabs;
}

Xóa tab không cần thiết

add_filter( 'woocommerce_product_tabs', 'xoa_tab_additional_info', 98 );
function xoa_tab_additional_info( $tabs ) {
    unset( $tabs['additional_information'] );
    return $tabs;
}

Lưu ý: luôn dùng theme con (child theme) khi chỉnh sửa functions.php để tránh mất code khi cập nhật theme. Nếu bạn cần hỗ trợ kỹ thuật, đội ngũ của chúng tôi sẵn sàng tại trang hỗ trợ theme.

Hiển thị nội dung tab từ custom field (ACF)

Trong trường hợp bạn dùng plugin Advanced Custom Fields (ACF) để quản lý dữ liệu sản phẩm, bạn có thể kéo nội dung từ custom field vào tab một cách linh động:

add_filter( 'woocommerce_product_tabs', 'tab_tu_acf' );
function tab_tu_acf( $tabs ) {
    $tabs['thong_so'] = array(
        'title'    => 'Thông số kỹ thuật',
        'priority' => 50,
        'callback' => 'hien_thi_thong_so_acf',
    );
    return $tabs;
}
 
function hien_thi_thong_so_acf() {
    global $post;
    $thong_so = get_post_meta( $post->ID, 'thong_so_ky_thuat', true );
    if ( $thong_so ) {
        echo '<div>' . wp_kses_post( $thong_so ) . '</div>';
    }
}

Phương pháp này đặc biệt phù hợp với các shop bán sản phẩm kỹ thuật, điện tử, hoặc bất kỳ danh mục nào cần hiển thị thông số theo từng sản phẩm khác nhau.

So sánh hai phương pháp thêm tab WooCommerce

Một số lưu ý khi thêm tab cho sản phẩm WooCommerce

• Không nên thêm quá nhiều tab, tối đa 4 đến 5 tab để giao diện không bị rối.
• Đặt tiêu đề tab ngắn gọn, rõ ràng để người dùng dễ nhận biết nội dung bên trong.
• Đảm bảo nội dung trong tab được index bởi Google: WooCommerce render HTML đầy đủ nên các tab đều được đọc bởi Googlebot.
• Nếu dùng page builder như Elementor hay Divi, một số theme có thể ghi đè layout tab, cần kiểm tra lại sau khi cài plugin.
• Nếu gặp sự cố hiển thị hoặc xung đột plugin, bạn có thể liên hệ hỗ trợ trực tiếp để được tư vấn nhanh.

FAQ: Câu hỏi thường gặp về tab sản phẩm WooCommerce

Plugin Custom Product Tabs for WooCommerce có miễn phí không?

Có. Plugin này hoàn toàn miễn phí và có sẵn trên kho WordPress.org. Phiên bản Pro có thêm tính năng như tab theo danh mục, tab toàn cửa hàng, nhưng phiên bản miễn phí đã đáp ứng tốt nhu cầu cơ bản.

Nội dung trong tab tùy chỉnh có được Google index không?

Có. WooCommerce render toàn bộ nội dung tab trong HTML gốc của trang, không dùng AJAX lazy load, nên Googlebot có thể đọc và index tất cả nội dung trong các tab mà không gặp vấn đề gì.

Có thể thêm video YouTube vào tab sản phẩm WooCommerce không?

Hoàn toàn có thể. Bạn chỉ cần dán link embed YouTube vào phần nội dung tab trong trình soạn thảo. WooCommerce hỗ trợ shortcode và HTML trong nội dung tab, bao gồm cả iframe nhúng video.

Làm thế nào để xóa tab “Additional Information” mặc định?

Bạn dùng hook woocommerce_product_tabs kết hợp unset( $tabs['additional_information'] ) trong file functions.php của theme con. Tab này chỉ hiển thị khi sản phẩm có thuộc tính (attributes) được khai báo, nếu không có thuộc tính nào thì tab tự ẩn.

Tab sản phẩm WooCommerce có hoạt động tốt trên mobile không?

Điều này phụ thuộc phần lớn vào theme bạn đang sử dụng. Hầu hết các theme WordPress chuẩn responsive đều xử lý tab tốt trên mobile, hiển thị dạng accordion hoặc scroll ngang. Nếu theme của bạn chưa hỗ trợ tốt, hãy xem qua kho theme chuẩn WooCommerce để chọn giao diện phù hợp.

WooCommerce Tab Manager có khác gì Custom Product Tabs không?

WooCommerce Tab Manager là plugin trả phí chính thức của WooCommerce.com, cung cấp giao diện quản lý tab tập trung, cho phép tạo tab toàn cửa hàng hoặc theo danh mục sản phẩm. Custom Product Tabs for WooCommerce là plugin miễn phí từ bên thứ ba, nhẹ hơn và phù hợp với nhu cầu cơ bản đến trung cấp.