Thêm tab mới vào trang chi tiết sản phẩm WooCommerce

WooCommerce giúp bạn thiết kế Website bán hàng một cách dễ dàng. Tuy nhiên bạn không biết cách làm thế nào để tạo thêm các tab vào trang chi tết 1 sản phẩm như hình bên dưới. Bài viết này sẽ giúp bạn dễ dàng làm điều đó, xem đoạn code bên dưới để rõ hơn.

Thêm tab mới vào trang chi tiết sản phẩm bằng code

Bạn chỉ cần thêm đoạn code sau vào file functions.php của theme hoặc child theme trang sử dụng là được nhé:

add_filter( 'woocommerce_product_tabs', 'add_product_tab', 9999 );
function add_product_tab( $tabs ) {
    //Thêm tab thông số kĩ thuật
    $tabs['tskt'] = array(
        'title' => __( 'Thông số', 'woocommerce' ), // Tiêu đề tab mới
        'priority' => 50, // Thứ tự sắp xếp tab (DESC 10, ADD INFO 20, REVIEWS 30)
        'callback' => 'tskt_product_tab_content', // TAB CONTENT CALLBACK
    );
    return $tabs;
}
 
function tskt_product_tab_content() {
   global $product;
   ?>
   <div class="tskt">
           <h2>Thông số kĩ thuật của <?php echo $product->get_name(); ?></h2>
           <ul>
               <li>Màu sắc: Đỏ</li>
               <li>Chiều dài: 2m</li>
               <li>Chiều dọc: 1m5</li>
           </ul>
   </div>
   <?php
}

Bạn có thể tạo nhiều hơn 1 tab vào trang chi tiết bằng cách sao chép mảng array tabs như trong đoạn code trên nhé.

Thêm tab mới bằng Plugin WordPress

Nếu bạn chưa thể kết nối vào trong Hosting WordPress để chỉnh sửa code, hãy dùng plugin này cũng giúp được cho bạn giải quyết vấn đề.

• Custom Product Tabs for WooCommerce
• WooCommerce Product Tabs