Để thêm một tab mới trong trang sản phẩm của WooCommerce, bạn có thể sử dụng các hook mà WooCommerce cung cấp. Dưới đây là hướng dẫn từng bước để thực hiện điều này:

1. Thêm Tab Mới bằng cách Sử dụng woocommerce_product_tabs Hook

Bạn có thể thêm code sau vào file functions.php của theme (hoặc child theme) bạn đang sử dụng:

function custom_product_tab($tabs) {
    // Thêm tab mới
    $tabs['custom_tab'] = array(
        'title'    => __('Tab Custom', 'your-text-domain'),
        'priority' => 50, // Thứ tự hiển thị của tab, số nhỏ hơn sẽ hiển thị trước
        'callback' => 'custom_product_tab_content'
    );
    return $tabs;
}
add_filter('woocommerce_product_tabs', 'custom_product_tab');

function custom_product_tab_content() {
    echo '<h2>' . __('Nội dung của Tab Custom', 'your-text-domain') . '</h2>';
    echo '<p>' . __('Đây là nội dung bạn muốn hiển thị trong tab custom.', 'your-text-domain') . '</p>';
}

2. Giải Thích Chi Tiết Code

  • custom_product_tab function:
    • Đây là hàm sử dụng để thêm một tab mới. Nó được thêm vào mảng $tabs với một khóa là 'custom_tab'.
    • Mảng 'custom_tab' bao gồm:
      • 'title': Tiêu đề của tab.
      • 'priority': Thứ tự ưu tiên hiển thị của tab (tab nào có priority nhỏ hơn sẽ xuất hiện trước).
      • 'callback': Hàm callback để hiển thị nội dung của tab.
  • custom_product_tab_content function:
    • Đây là hàm callback được gọi khi tab mới được hiển thị. Nội dung của tab được định nghĩa trong hàm này.

3. Tùy Chỉnh Nội Dung Tab

Bạn có thể tùy chỉnh nội dung của tab theo yêu cầu của bạn. Ví dụ, nếu bạn muốn hiển thị nội dung tùy chỉnh từ trường meta của sản phẩm, bạn có thể làm như sau:

function custom_product_tab_content() {
    global $post;
    $custom_field_value = get_post_meta($post->ID, '_your_custom_field_key', true);
    
    echo '<h2>' . __('Nội dung của Tab Custom', 'your-text-domain') . '</h2>';
    
    if ($custom_field_value) {
        echo '<p>' . esc_html($custom_field_value) . '</p>';
    } else {
        echo '<p>' . __('Không có nội dung nào để hiển thị.', 'your-text-domain') . '</p>';
    }
}

4. Lưu Ý

  • Text Domain: Thay 'your-text-domain' bằng text domain của theme hoặc plugin của bạn để hỗ trợ dịch thuật.
  • Custom Field Key: Thay '_your_custom_field_key' bằng key của custom field mà bạn muốn hiển thị nội dung.

5. Kết Luận

Với cách làm này, bạn có thể dễ dàng thêm một tab tùy chỉnh vào trang sản phẩm của WooCommerce mà không cần cài đặt thêm plugin. Bạn có thể tùy chỉnh nội dung tab theo nhu cầu cụ thể của mình, như hiển thị thông tin từ các trường meta tùy chỉnh hoặc bất kỳ thông tin nào khác mà bạn muốn.