Thủ thuật, Woocommerce Ngày 05/03/2024 3071 lượt xem

Thêm tabs và nội dung tabs trong trang sản phẩm wordpress bằng code Function

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…

Lê Anh ĐôngFlatsome trên Google News

Thêm tabs và nội dung tabs trong trang sản phẩm wordpress bằng code Function

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.

Thêm tabs và nội dung tabs trong trang sản phẩm wordpress bằng code Function

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 đó.

Tao Tab Moi Trong Trang San Pham Woocommerce
Thêm tabs và nội dung tabs trong trang sản phẩm wordpress bằng code Function

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é.

Với  title là tiêu đề của tab. 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:

Ket Qua Tao Tab Moi Woo

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

Them Nhieu Tabs Cho San Pham
Code Thêm nhiều tabs trong mô tả sản phẩm và remove tab Rivews

Để 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é

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

các 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.

Kết luận về việc Thêm tabs Sản phẩm

Lợi ích khi thêm tabs Sản phẩm trong WordPress:

  1. Cải thiện Trải nghiệm Người Dùng (UX): Việc tổ chức thông tin sản phẩm thành các tabs giúp người dùng dễ dàng tìm kiếm và xem thông tin, từ đó cải thiện trải nghiệm người dùng.
  2. Trình bày Thông tin Gọn gàng: Các tabs cho phép bạn trình bày thông tin chi tiết mà không làm cho trang trở nên quá dài hay rối rắm.
  3. Tối ưu SEO: Các tabs giúp cấu trúc thông tin tốt hơn, có thể hỗ trợ SEO nếu được triển khai một cách đúng đắn.
  4. Tăng Tỷ lệ Chuyển đổi: Thông tin rõ ràng, dễ tìm kiếm có thể thuyết phục khách hàng mua hàng nhanh hơn.

Cái không tốt khi thêm tabs Sản phẩm trong WordPress:

  1. Tốc độ Tải Trang chậm lại: Nếu tabs không được mã hóa tốt, nó có thể làm chậm tốc độ tải trang.
  2. Rối rắm với SEO: Các công cụ tìm kiếm đôi khi không quét sâu vào nội dung trong các tabs ẩn, điều này có thể ảnh hưởng đến khả năng hiển thị của thông tin.
  3. Rắc rối với Responsive Design: Tabs có thể không hiển thị tốt trên tất cả các thiết bị nếu không được thiết kế đáp ứng (responsive) một cách cẩn thận.

Điều cần chú ý khi thêm tabs Sản phẩm:

  1. Thiết kế Responsive: Đảm bảo rằng tabs hiển thị tốt trên mọi thiết bị, từ máy tính để bàn đến điện thoại di động.
  2. Tối ưu Hóa Tốc độ: Kiểm tra tốc độ tải trang và tối ưu hóa nếu cần thiết để không ảnh hưởng đến trải nghiệm người dùng.
  3. Nội dung dễ Đọc: Cung cấp thông tin đầy đủ và dễ đọc trong mỗi tab, tránh việc để người dùng phải click quá nhiều để tìm thông tin.
  4. SEO-Friendly Tabs: Sử dụng các plugin hoặc phương pháp lập trình sao cho nội dung trong tabs dễ dàng được các công cụ tìm kiếm index.
  5. Kiểm tra Trên Nhiều Trình Duyệt: Đảm bảo tính tương thích xuyên suốt các trình duyệt web khác nhau.
  6. Tính Năng Accessibility: Đảm bảo tabs có thể truy cập được cho người dùng có hạn chế về khả năng tiếp cận, như hỗ trợ bàn phím và đọc màn hình.

chúc anh em thành công nhé

Điểm 5/5 - ( Có 10 bình chọn)

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Các dịch vụ của FLATSOME.XYZ