Khách đang xem một chiếc máy lau sàn nhưng chưa biết mẫu nào có thời lượng pin lâu hơn, hỗ trợ nằm phẳng hay chống rối tóc? Nếu phải mở từng trang rồi tự tìm thông số trong bài mô tả, việc lựa chọn sẽ mất khá nhiều thao tác.
Plugin so sánh sản phẩm WooCommerce được giới thiệu bởi Làm Web Cùng Tùng giúp đưa các thông tin cần đối chiếu vào một bảng trên trang chi tiết sản phẩm. Người quản trị chọn các mẫu phù hợp trong admin, còn khách hàng xem ảnh, tên và thông số cạnh nhau để nhận biết điểm khác biệt.
Giải pháp sử dụng WooCommerce và ACF để quản lý dữ liệu, chèn bảng bằng shortcode và được xây dựng theo nhu cầu triển khai trên Flatsome.
Plugin so sánh sản phẩm WooCommerce này hoạt động như thế nào?
Mỗi cột trong bảng đại diện cho một sản phẩm. Phần đầu cột có ảnh, tên và nút xem sản phẩm; các hàng bên dưới thể hiện cùng một nhóm thông số.
Ví dụ, khi xem máy lau sàn A, khách có thể đối chiếu A với các mẫu B, C và D. Thay vì đọc lại bốn bài mô tả, khách nhìn vào từng hàng để kiểm tra lực hút, diện tích lau hoặc khả năng làm sạch cạnh.
Đây là bảng so sánh do người quản trị thiết lập sẵn. Phiên bản hiện tại giúp khách dễ dàng xem và lựa chọn mua sản phẩm ưng ý nhất.
Những tính năng nổi bật của plugin
Lấy ảnh, tên và đường dẫn từ WooCommerce
Bạn không phải nhập lại ảnh hoặc gắn link thủ công cho từng cột. Plugin lấy ảnh đại diện, tên và đường dẫn từ sản phẩm WooCommerce được chọn.
Nút “Xem sản phẩm” giúp khách chuyển đến trang chi tiết của mẫu muốn tìm hiểu. Cột sản phẩm đang xem có nền màu riêng để dễ nhận biết khi đối chiếu với các mẫu còn lại.
Quản lý thông số bằng ACF
Plugin tự đăng ký nhóm trường ACF trong màn hình chỉnh sửa sản phẩm. Bạn chỉ cần kích hoạt ACF và plugin so sánh, không phải tự tạo lại từng trường.
Thông số được nhập một lần cho mỗi sản phẩm và được dùng lại khi sản phẩm xuất hiện trong những bảng khác nhau. Khi thông tin thay đổi, bạn sửa tại sản phẩm tương ứng, thay vì đi chỉnh từng bảng HTML.
Bản cấu hình Demo có 16 thông số cho nhóm máy hút bụi, lau sàn:
| Thông số | Cách nhập |
|---|---|
| Lực hút | Nhập thông tin |
| Diện tích lau | Nhập thông tin |
| Chống rối tóc/lông thú | Có/Không |
| Nằm phẳng 180° | Có/Không |
| Làm sạch cạnh | Có/Không |
| Thời gian hoạt động | Nhập thông tin |
| Màn hình hiển thị | Có/Không |
| Điện phân nước | Có/Không |
| Lau nhà bằng nước nóng/hơi nóng | Có/Không |
| Tự động giặt con lăn khí nóng | Nhập thông tin |
| Sấy khô con lăn khí nóng | Nhập thông tin |
| Trợ lực di chuyển | Nhập thông tin |
| Cảm biến bụi bẩn iLoop | Có/Không |
| Đèn chiếu sáng | Có/Không |
| Kết nối App | Có/Không |
| Thông báo giọng nói | Có/Không |
Các ô nhập thông tin cho phép ghi thêm đơn vị hoặc mô tả ngắn. Ví dụ, thời lượng hoạt động nên ghi rõ điều kiện hoặc chế độ nếu nhà sản xuất có công bố, thay vì chỉ nhập một con số thiếu ngữ cảnh.
Nếu thông số đang nằm trong mô tả sản phẩm, bạn cần chuyển các nội dung cần so sánh sang ACF trong lần thiết lập đầu tiên. Plugin chưa tự đọc và bóc tách thông số từ bài mô tả hay hình ảnh.
Chọn thêm tối đa 5 sản phẩm
Trong mỗi sản phẩm, bạn có thể chọn thêm tối đa 5 mẫu để so sánh. Sản phẩm đang xem được tự thêm vào cột đầu, nên bảng có tối đa 6 cột sản phẩm.
Tuy nhiên, không phải bảng nào cũng cần đủ số lượng tối đa. Chọn các mẫu cùng nhóm, gần nhu cầu sử dụng hoặc cùng phân khúc sẽ giúp khách đối chiếu có ý nghĩa hơn.
Danh sách này được lưu riêng cho từng sản phẩm. Chọn B trong bảng của A không tự thêm A vào bảng của B. Bạn có thể dùng sự độc lập đó để giới thiệu những lựa chọn phù hợp với từng trang.
Lọc sản phẩm theo danh mục trong admin
Khi website có nhiều sản phẩm, tìm trong một danh sách dài dễ nhầm mẫu. Plugin bổ sung bộ lọc danh mục ngay tại ô chọn sản phẩm so sánh.
Chọn một danh mục thì danh sách hiển thị các sản phẩm phù hợp với bộ lọc đó. Bỏ chọn danh mục thì trở về danh sách không lọc theo danh mục. Bạn vẫn có thể nhập tên để tìm trong nhóm đang chọn.
Bộ lọc phục vụ việc quản trị, không phải bộ lọc dành cho khách hàng ngoài website. Các mẫu đã chọn vẫn được giữ khi bạn đổi danh mục để tìm thêm sản phẩm khác.
Cuộn ngang trên điện thoại
Một bảng nhiều cột sẽ khó đọc nếu bị ép vừa màn hình nhỏ. Bảng so sánh sản phẩm WooCommerce này sử dụng cuộn ngang để giữ không gian cho từng cột.
Cột tên thông số được giữ cố định khi cuộn ngang. Nhờ đó, khách vẫn biết mình đang xem hàng lực hút, thời lượng hoạt động hay tính năng nào.
Phân biệt dữ liệu chưa nhập với “Không có”
Một tính năng chưa được xác nhận không nên mặc định là “Không”. Plugin cho phép để trống thông số; trong bảng, ô thiếu dữ liệu hiển thị “Chưa cập nhật”.
Nếu một hàng chưa có thông tin ở tất cả sản phẩm được hiển thị, hàng đó được ẩn. Cách xử lý này giúp bảng gọn hơn mà không biến dữ liệu còn thiếu thành kết luận sai về sản phẩm.
Cách sử dụng trên website
Để thiết lập bảng so sánh, bạn thực hiện các bước sau:
- Kích hoạt WooCommerce, ACF và plugin so sánh sản phẩm.
- Mở màn hình chỉnh sửa từng sản phẩm cần đưa vào bảng.
- Nhập dữ liệu trong nhóm “Thông số và sản phẩm so sánh”. Đây là tên nhóm trường trong bản hiện tại.
- Tại mục “Sản phẩm so sánh thêm”, lọc danh mục và chọn các mẫu muốn hiển thị cùng sản phẩm đang sửa.
- Cập nhật sản phẩm và chèn shortcode ở vị trí cần xuất hiện bảng.
Shortcode mặc định:
[tineco_compare]Bạn có thể đặt shortcode trong nội dung sản phẩm hoặc UX Block được sử dụng trong bố cục trang chi tiết của Flatsome hoặc trên trang custom của theme bất kỳ. Nếu đặt tại bố cục dùng chung, plugin lấy danh sách đã lưu theo sản phẩm đang xem.
Có thể thay tiêu đề bảng qua shortcode:
[tineco_compare title="So sánh các dòng máy lau sàn"]Sau khi chèn, hãy kiểm tra cả máy tính và điện thoại, đồng thời xem lại dữ liệu và các link sản phẩm. Nếu website có cache trang, cần xóa cache những trang liên quan sau khi cập nhật để khách thấy thông tin mới.
CSS và xử lý dữ liệu được giới hạn ra sao?
CSS của plugin được giới hạn trong khối bảng so sánh để tránh áp dụng sang nút, ảnh hoặc bảng ở khu vực khác. Ngược lại, CSS của theme vẫn có thể tác động vào bảng, nên giao diện cần được kiểm tra trên website thực tế.
Các nội dung như tên, thông số và đường dẫn được xử lý theo ngữ cảnh trước khi xuất ra giao diện. Plugin cũng kiểm tra trạng thái xuất bản và yêu cầu mật khẩu của sản phẩm trước khi đưa vào bảng.
Đây là các biện pháp trong phạm vi chức năng so sánh, không thay thế việc cập nhật WordPress, WooCommerce, ACF và kiểm tra bảo mật toàn website.
Những điều cần biết trước khi triển khai
Bản hiện tại tập trung vào so sánh thông số: chưa hiển thị giá, đánh giá sao hay nút thêm vào giỏ hàng trong bảng. Các trường thông số đang phục vụ nhóm thiết bị làm sạch; nếu dùng cho điện thoại, laptop hoặc thiết bị công nghiệp, cần điều chỉnh cấu hình trường và phần hiển thị theo ngành hàng.
Plugin không tự tạo quan hệ so sánh hai chiều. Khi muốn A và B cùng xuất hiện trong bảng của nhau, bạn cần thiết lập danh sách tại cả hai sản phẩm.
Với sản phẩm được chọn thêm, plugin còn kiểm tra khả năng hiển thị của WooCommerce. Một sản phẩm đang ẩn khỏi danh mục, chỉ hiển thị trong tìm kiếm hoặc bị loại bởi cấu hình ẩn hàng hết kho có thể không xuất hiện trong bảng. Đây là mục cần kiểm tra nếu đã chọn sản phẩm nhưng ngoài giao diện vẫn thiếu cột.
Trước khi đưa lên website đang bán hàng, nên thử trên bản sao website để đối chiếu giao diện, dữ liệu và cấu hình các plugin liên quan.
Câu hỏi thường gặp
Có cần dùng ACF PRO không?
Bản hiện tại sử dụng các trường Text, Select và Relationship, không sử dụng Repeater. Bạn có thể triển khai với ACF miễn phí; vẫn cần kiểm tra phiên bản đang cài và môi trường website thực tế.
Có phải nhập lại thông số cho từng bảng không?
Không. Thông số được lưu tại từng sản phẩm. Các bảng lấy lại dữ liệu của những sản phẩm đã chọn; bạn chỉ cần nhập danh sách so sánh riêng cho mỗi trang.
Vì sao đã chọn sản phẩm nhưng bảng chưa hiện?
Hãy kiểm tra shortcode, danh sách đã lưu và trạng thái của sản phẩm. Bảng chỉ xuất hiện khi có ít nhất hai sản phẩm hợp lệ, gồm sản phẩm đang xem và ít nhất một mẫu được chọn thêm.
Plugin có giúp website tự tăng hạng Google không?
Không có cam kết tự tăng thứ hạng từ việc cài plugin. Giá trị chính là tổ chức thông tin để khách dễ đối chiếu. Hiệu quả SEO còn phụ thuộc vào chất lượng nội dung, cấu trúc website, khả năng thu thập dữ liệu và nhiều yếu tố khác.
Tạo bảng so sánh phù hợp với website của bạn
Một bảng so sánh hữu ích cần chọn đúng sản phẩm và dùng dữ liệu thống nhất. Plugin giúp quản lý và hiển thị phần thông tin đó, còn doanh nghiệp cần xác nhận thông số đúng với mẫu và phiên bản đang bán.
Nếu bạn muốn thêm bảng so sánh vào website WooCommerce, liên hệ Làm Web Cùng Tùng để trao đổi về nhóm sản phẩm, bộ thông số và vị trí hiển thị trên giao diện hiện tại.
Bạn cũng có thể tham khảo plugin Flash Sale WooCommerce theo khung giờ nếu website có nhu cầu quản lý ưu đãi theo từng chương trình.
