Thêm chức năng so sánh sản phẩm trong WooCommerce

Ngày đăng: 24 - 03 - 2020 Lượt xem: 1466 lượt

Xin chào mọi người!

Khách mua hàng thường hay có nhu cầu so sánh các sản phẩm để tìm ra loại sản phẩm tốt nhất cho mình. Chẳng hạn khi mua điện thoại, cùng giá tiền họ muốn so sánh xem sản phẩm nào có tính năng ưu việt hơn, phù hợp với nhu cầu của họ. Thông thường khách hàng phải mở nhiều tab sản phẩm và bấm qua bấm lại để so sánh rất bất tiện. Để việc so sánh sản phẩm được thuận tiện thì website cần có chức năng so sánh sản phẩm ngay tại trang.

Thêm chức năng so sánh sản phẩm

Để thêm chức năng so sánh sản phẩm, ta có thể dùng plugin hỗ trợ có tên là YITH WooCommerce Compare, do YITH phát triển. Bạn hãy tìm, cài đặt và kích hoạt plugin này từ kho plugin WordPress nhé! Đây chỉ là bản miễn phí, chỉ giới hạn trong việc so sánh hai sản phẩm và hiện bảng so sánh. Tuy nhiên như vậy cũng đủ xài rồi. Nếu bạn muốn chuyên nghiệp hơn thì có thể so sánh bản miễn phí và có phí của plugin này tại đây.

chức năng so sánh sản phẩm

Sau khi cài đặt & kích hoạt xong, bạn sẽ thấy xuất hiện trong Dashboard một menu mới là YITH, bạn vào menu YITH > Compare. Ở phần General Settings, bạn thiết lập như sau:

  • Link or Button: lựa chọn hiển thị so sánh dạng nút hay liên kết.
  • Link/Button text: tiêu đề của liên kế / button.
  • Show button in single product page: chọn để hiển thị nút so sánh trong trang chi tiết sản phẩm.
  • Show button in products list: chọn để hiển thị nút so sánh trong trang danh sách sản phẩm.
  • Open automatically lightbox: bảng so sánh sẽ tự động hiện ra sau khi nhấn nút so sánh.

chức năng so sánh sản phẩm

Tiếp theo bạn thiết lập mục Table settings

  • Table title: tiêu đề bảng so sánh.
  • Fields to show: chọn những thông tin nào sẽ xuất hiện trong bảng sao sánh. Bạn có thể chọn cả các thuộc tính mà mình thêm vào cho sản phẩm để so sánh.
  • Repeat “Price” field: hiển thị giá sản phẩm vào cuối bảng.
  • Remeat “Add to cart” field: hiển thị nút mua hàng vào cuối bảng.
  • Image size: đặt kích thước hình ảnh.

Cuối cùng bạn lưu lại các thiết lập này nhé!

Table settings

So sánh sản phẩm

Bây giờ mình ra ngoài trang chủ, vào xem sản phẩm sẽ thấy nút Thêm vào so sánh như thế này. Bạn nhấn nút này bảng so sánh sản phẩm sẽ lập tức hiện lên dạng popup.

So sánh sản phẩm

Bảng so sánh sẽ có dạng như thế này.  Bạn có thể thêm nhiều sản phẩm để so sánh. Nếu muốn loại sản phẩm nào ra thì nhấn nút Remove. Bạn sẽ thấy các dòng tiêu đề bên trái bằng tiếng anh không đẹp lắm, vì website mình là tiếng Việt. Mình sẽ hướng dẫn dịch tiếng Việt cho theme và plugin trong một bài khác nhé.

So sánh sản phẩm

Tổng kết

So sánh sản phẩm là một tính năng vô cùng cần thiết cho trang bán hàng bằng Woocommerce. Đặc biệt là các trang bán hàng điện tử như điện thoại, laptop,… Qua bài viết này, bạn đã có thể thêm tính năng so sánh cho website . Chúc bạn thành công!

5 1 vote
Article Rating

guest
0 Comments
Inline Feedbacks
View all comments

Bài viết liên quan

Cách thêm tùy chọn số lượng sản phẩm WooCommerce trong trang danh sách sản phẩm

Cách thêm tùy chọn số lượng sản phẩm WooCommerce trong trang danh sách sản phẩm

19 - 10 - 2021

Cách thêm tùy chọn số lượng sản phẩm WooCommerce trong các trang danh sách sản phẩm Đã có một vài...

Hợp nhất giỏ hàng WooCommerce và trang thanh toán chỉ với 4 bước đơn giản.

Hợp nhất giỏ hàng WooCommerce và trang thanh toán chỉ với 4 bước đơn giản.

29 - 09 - 2021

Làm thế nào để hợp nhất giỏ hàng WooCommerce với trang thanh toán? Một số người rất cần hợp nhất...

Hiển thị danh mục sản phẩm woocommerce

Hiển thị danh mục sản phẩm woocommerce

08 - 06 - 2021

Hiển thị danh mục sản phẩm woocommerce như thế nào? Chắc hẳn đôi khi chúng ta muốn tùy chỉnh...

Hiển thị Star Ratings bên dưới giá sản phẩm Woocommerce

Hiển thị Star Ratings bên dưới giá sản phẩm Woocommerce

05 - 06 - 2021

Cách hiển thị star rating woocommerce như thế nào ? Trở ngại lớn nhất với các website bán hàng trực...

Hiển thị ngày dự kiến ​​giao hàng trên trang Sản phẩm

Hiển thị ngày dự kiến ​​giao hàng trên trang Sản phẩm

27 - 04 - 2021

Ngày dự kiến sản phẩm woocommerce như thế nào? Vd thứ Hai trước 16:00 – đoạn mã này được in...

Thay chữ Sale thành % giảm giá trong woocommerce

Thay chữ Sale thành % giảm giá trong woocommerce

19 - 04 - 2021

Thay Sale thành % giảm giá woocommerce? Nhiều khi chúng ta không muốn hiển thị chữ SALE khi sản phẩm...

0
Would love your thoughts, please comment.x
()
x