Hướng dẫn tách product tabs thành các section riêng biệt

Hello các bạn, chắc hẳn nhiều bạn đang rất khó chịu với kiểu hiển thị nội dung của woocommerce bằng cách gom các mục nội dung chi tiết, thông tin bổ sung và đánh giá thành các tabs đúng không. Bài viết này mình sẽ chia sẻ với các bạn cách tách hoàn toàn 3 tabs thành các section riêng biệt giống như tiki, shopee,..

Tại sao bạn nên tách product tabs ra thành các section riêng biệt?

Đơn giản chỉ là để nó đẹp mắt hơn, hiển thị nội dung rõ ràng và chuyên nghiệp hơn. Giúp khách hàng dễ dàng nhận biết nội dung và các mục thông tin bổ sung cũng như đưa phần đánh giá sản phẩm xuống cuối.

Có 2 cách để tách product tabs thành các section riêng biệt.

  • Cách thứ nhất là chỉnh code trong phần single-product > tabs > tabs.php. Nhưng cách này đòi hỏi bạn phải hiểu rõ về code để tránh sửa sai.
  • Cách thứ 2 thì đơn giản hơn, bạn chỉ cần làm theo các bước sau.

Mình sẽ giải thích cách làm như sau. Còn việc của bạn chỉ cần copy đoạn code tổng cuối cùng để paste vào functions.php thôi nhé.

Đầu tiên, mình sẽ filter lại cái hàm woocommerce_output_product_data_tabs mặc định

Tiếp theo là mình sẽ viết lại function như sau để phân tách tabs

Đấy, chỉ có 2 bước đơn giản vậy thôi. Bây giờ chỉ cần gộp cả 2 đoạn code trên và dán vào file functions.php là chạy thôi. À, lưu ý rằng nên sử dụng child theme để chỉnh sửa code để tránh trường hợp làm lỗi website nhé.

Ok, đây là đoạn code tổng bạn sử dụng:

Lưu ý để code hoạt động:

Để đoạn code phân tách product tabs thành các section riêng biệt này hoạt động bạn cần để ở giao diện mặc định của woocommerce.

Trường hợp bạn tự tạo product page layout bằng UX Builder thì bạn cần chọn Hook woocommerce_after_single_product_summary thay vì chọn elements “Product tabs” có sẵn trong trình builder.

Hướng dẫn tách product tabs thành các section riêng biệt - ảnh 2
Hướng dẫn tách product tabs thành các section riêng biệt - ảnh 3
Chọn hook như trong hình

Kết quả cuối cùng như hình sau:

Hướng dẫn tách product tabs thành các section riêng biệt

Chúc các bạn thành công!

Review dịch vụ hosting/vps azdigi 1

Viết một bình luận